From f5678270c59691ce4ede98f6b40bc83d02c599a0 Mon Sep 17 00:00:00 2001 From: ktyl Date: Fri, 31 Dec 2021 16:17:55 +0000 Subject: [PATCH] responsive nav --- src/inc_css/nav.css | 56 ++++++++++++++++++++++++++++++-------- src/inc_html/nav.html | 10 +++---- src/inc_html/navlinks.html | 6 ---- src/root/about.html | 2 +- src/root/gallery.html | 2 +- todo.md | 8 +++--- 6 files changed, 55 insertions(+), 29 deletions(-) delete mode 100644 src/inc_html/navlinks.html diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css index d1567a6..7c18edf 100644 --- a/src/inc_css/nav.css +++ b/src/inc_css/nav.css @@ -1,4 +1,4 @@ -.sidebar { +.nav { position: fixed; width: max(11vmax, 200px); top: 0; @@ -11,11 +11,7 @@ color: var(--foreground); } -.sidebarContent { - position: relative; -} - -.sidebar ul { +.nav-links { position: relative; padding-top: 2em; @@ -25,22 +21,22 @@ width: 80%; } -.sidebar li { +.nav .nav-links li { display: block; margin-bottom: 0.8em; transition: transform 0.3s; } -.sidebar li a::before { +.nav li a::before { content: "/"; } -.sidebar li:hover { +.nav li:hover { transform: translate(1vmax); } -.sidebar li a { +.nav li a { display: block; padding: 2px; background-color: var(--clear); @@ -48,9 +44,47 @@ transition: background-color 0.5s; } -.sidebar li a:hover { +.nav li a:hover { color: var(--accent); } +@media only screen and (max-width: 600px) { + .nav { + position: fixed; + width: 100%; + padding: 0; + z-index: 1; + top: 0; + height: 2em; + } + .nav .title { + padding-top: .5em; + padding-left: .5em; + } + .nav .nav-links { + position: absolute; + top: 0; + right: 0; + padding: .5em .5em 0 0; + float: right; + text-align: right; + } + + .nav .nav-links li { + display: inline-block; + } + + .nav .nav-links li a::before { + content: ""; + } + + .nav .pageTitle { + display: none; + } + + .nav .socials { + display: none; + } +} diff --git a/src/inc_html/nav.html b/src/inc_html/nav.html index c7ee740..5e9e52f 100644 --- a/src/inc_html/nav.html +++ b/src/inc_html/nav.html @@ -1,6 +1,4 @@ -
- -
+ diff --git a/src/inc_html/navlinks.html b/src/inc_html/navlinks.html deleted file mode 100644 index c7ee740..0000000 --- a/src/inc_html/navlinks.html +++ /dev/null @@ -1,6 +0,0 @@ -
- -
diff --git a/src/root/about.html b/src/root/about.html index 146814b..03619e3 100644 --- a/src/root/about.html +++ b/src/root/about.html @@ -6,7 +6,7 @@ ktyl ~ about -
+
#include titlestart.html /about #include titleend.html diff --git a/src/root/gallery.html b/src/root/gallery.html index 7f28824..aaf685b 100644 --- a/src/root/gallery.html +++ b/src/root/gallery.html @@ -6,7 +6,7 @@ ktyl ~ gallery -
+
#include titlestart.html /gallery #include titleend.html diff --git a/todo.md b/todo.md index 33f3da6..9980b67 100644 --- a/todo.md +++ b/todo.md @@ -1,11 +1,11 @@ * [-] responsive design * [-] nav * [x] rename to nav - * [ ] should also be a top bar + * [x] top bar + * [x] no socials + * [x] title left (no trail) + * [x] page links right (no prefix) * [ ] text bigger - * [ ] top bar - * [ ] no socials - * [ ] title left (no trail) * [ ] landing page * [ ] smaller * [ ] central