diff --git a/about.html b/about.html index d8758e6..6ff4551 100644 --- a/about.html +++ b/about.html @@ -17,7 +17,19 @@ -
+ + + + + + + +

Sidebar

@@ -54,6 +66,10 @@ ABOUT JHEWIT
+
+ DESIGN WORKSHOP +
+
DROPDOWN MENU
diff --git a/index.html b/index.html index 510d805..0a79e26 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,19 @@ -
+ + + + + + + +

Sidebar

@@ -54,6 +66,10 @@ ABOUT JHEWIT
+
+ DESIGN WORKSHOP +
+
DROPDOWN MENU
diff --git a/main.css b/main.css index c366542..16f34a6 100644 --- a/main.css +++ b/main.css @@ -139,17 +139,39 @@ h1 { } #sider-outer { - box-sizing: border-box; - background-color: pink; margin: 0px; padding: 0px; position: absolute; overflow: visible !important; z-index: 1000000; width: var(--sidebar-size); - top: 0%; + top: 50%; transform: translateY(-50%); min-height: 40vh; + background-color: blanchedalmond; +} + +body.sidebar-opened > #sider-outer.design-1 { + clip-path: polygon(0% 0%, 0% 90%, 100% 100%, 100vw 100%, 100vw 0%, 100% 10%); + padding-bottom: 5vh; + padding-top: 5vh; +} + +body.sidebar-opened > #sider-outer.design-2 { + clip-path: url(#design-2); + padding-bottom: 5vh; + padding-top: 5vh; + padding-right: 5vw; +} + +#sider-outer.design-4 { + height: 100vh; + padding-top: 3.5em; + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + text-align: center; } #sider { diff --git a/src/_workshop.html b/src/_workshop.html new file mode 100644 index 0000000..f942dec --- /dev/null +++ b/src/_workshop.html @@ -0,0 +1,22 @@ +

This is a development page for sampling new styles &c. I will be removing it for the page launch, of course.

+

+ Please select your sidebar style preference:

+ Slanted Down
+ Smooth Curve (based on your suggestion)
+ Square (original; bad)
+ Full Height
+ NOTE: On mobile devices, the sidebar will probably fill the whole screen. This is intentional: trying to fit it into half the screen or smaller will leave the text broken. +

+ + \ No newline at end of file diff --git a/src/template.html b/src/template.html index 068c911..98d36ca 100644 --- a/src/template.html +++ b/src/template.html @@ -17,7 +17,19 @@ -
+ + + + + + + +

Sidebar

@@ -54,6 +66,10 @@ ABOUT JHEWIT
+
+ DESIGN WORKSHOP +
+
DROPDOWN MENU
diff --git a/workshop.html b/workshop.html new file mode 100644 index 0000000..6018c96 --- /dev/null +++ b/workshop.html @@ -0,0 +1,158 @@ + + + + + + + + + + Jhewit | Home + + + + + + + + + + +
+
+

Sidebar

+
+ + +
+ + + +
+ +
+
+
+ +
+ + + +
+
+

This is a development page for sampling new styles &c. I will be removing it for the page launch, of course.

+

+ Please select your sidebar style preference:

+ Slanted Down
+ Smooth Curve (based on your suggestion)
+ Square (original; bad)
+ Full Height
+ NOTE: On mobile devices, the sidebar will probably fill the whole screen. This is intentional: trying to fit it into half the screen or smaller will leave the text broken. +

+ + +
+ +
+ Website by Tyler Clarke. +
+
+ + + \ No newline at end of file