From 4bd45d754821448b37c206544cbbfddf04360988 Mon Sep 17 00:00:00 2001 From: curly Date: Wed, 11 Jan 2023 11:22:29 -0700 Subject: mobile nav complete --- src/assets/css/main.css | 39 +++++++++++++++++++++++++-------- src/assets/js/main.js | 44 ++++++++++++++++++++++++++++++++++++++ src/people/cards/glass/glass.html | 15 ++++++++++++- src/people/cards/glass/glass.png | Bin 1310925 -> 39401 bytes src/templates/body-bottom.html | 21 ++++++++++++------ src/templates/inner-head.html | 3 ++- src/templates/nav.html | 24 ++++++++++----------- 7 files changed, 117 insertions(+), 29 deletions(-) create mode 100644 src/assets/js/main.js (limited to 'src') diff --git a/src/assets/css/main.css b/src/assets/css/main.css index b08b004..a224932 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -22,6 +22,14 @@ html, body { --text-primary: #ddd; --text-secondary: #999; } + + :link { + color: #99ccff; + } + + :visited { + color: #c78cff; + } } @media screen and (max-width: 500px) { @@ -36,6 +44,10 @@ html, body { .body_decoration { display: none; } + .nav-button > a > .fa { + margin: auto 5px auto 5px; + width: 20px; + } } @media screen and (min-width: 501px) and (max-width: 1099px) { .header-image > :nth-child(1) { @@ -43,6 +55,8 @@ html, body { } .header-image > :nth-child(2) { display: inline-block; + margin-bottom: 3px; + width: 32px; } .nav-button > a > :nth-child(2) { display: none; @@ -80,6 +94,9 @@ html, body { .floatwrapper > div { max-width: 50px; } + .nav-button > a > .fa { + margin: auto; + } } @media screen and (min-width: 1100px) { .header-image > :nth-child(1) { @@ -108,6 +125,10 @@ html, body { padding-left: 5px; padding-right: 5px; } + .nav-button > a > .fa { + margin: auto 5px auto 5px; + width: 20px; + } } @@ -173,6 +194,7 @@ main { display: grid; height: 100vh; overflow: auto; + z-index: 2; } .header-image { @@ -184,8 +206,13 @@ main { } .mobile-nav-button { - display: block; - margin: auto; + display: grid; + justify-content: center; + align-content: center; + width: 100%; + height: 100%; + text-decoration: none; + color: var(--text-primary); } .mobile-nav { @@ -199,7 +226,7 @@ main { } .nav-button { display: block; - height: 35px; + height: 30px; } .nav-button > a { display: flex; @@ -210,7 +237,6 @@ main { .nav-button > a > span { margin-top: auto; margin-bottom: auto; - padding-left: 5px; } .nav-button:hover, .header-image:hover { cursor: pointer; @@ -255,9 +281,4 @@ main { } .card-head { font-weight: bold; -} - - -.fa-pleroma { - color: #fba457; } \ No newline at end of file diff --git a/src/assets/js/main.js b/src/assets/js/main.js new file mode 100644 index 0000000..462c456 --- /dev/null +++ b/src/assets/js/main.js @@ -0,0 +1,44 @@ +function mobile_nav_toggle() { + var nav = document.getElementById("nav"); + + if (nav.style.display == "unset") { + mobile_nav_off(); + } else { + mobile_nav_on(); + } +} + +function mobile_nav_on() { + var nav = document.getElementById("nav"); + nav.style.display = "unset"; + + // Subract mobile nav height from navbar + var mobile_nav = document.getElementsByClassName("mobile-nav")[0]; + nav.children[0].style.height = "calc(100vh - " + mobile_nav.clientHeight + "px)"; + mobile_nav.style.backgroundColor = "rgb(var(--secondary))"; + + // Hide content + var content = document.getElementById("content"); + content.style.display = "none"; + + // Align nav and mobile nav by setting + // the flow to column + var body = document.getElementsByTagName("body")[0]; + body.style.flexFlow = "column nowrap" +} + +// Undo all changes in mobile_nav_on() +function mobile_nav_off() { + var nav = document.getElementById("nav"); + nav.style.display = ""; + + var mobile_nav = document.getElementsByClassName("mobile-nav")[0]; + nav.children[0].style.height = ""; + mobile_nav.style.backgroundColor = ""; + + var content = document.getElementById("content"); + content.style.display = ""; + + var body = document.getElementsByTagName("body")[0]; + body.style.flexFlow = "" +} \ No newline at end of file diff --git a/src/people/cards/glass/glass.html b/src/people/cards/glass/glass.html index abf1116..b60c32e 100644 --- a/src/people/cards/glass/glass.html +++ b/src/people/cards/glass/glass.html @@ -1,10 +1,23 @@ +
glass:!refglass:!/ref - + + +
diff --git a/src/people/cards/glass/glass.png b/src/people/cards/glass/glass.png index efc1c7d..a926ecc 100644 Binary files a/src/people/cards/glass/glass.png and b/src/people/cards/glass/glass.png differ diff --git a/src/templates/body-bottom.html b/src/templates/body-bottom.html index 6a5da72..cb197ad 100644 --- a/src/templates/body-bottom.html +++ b/src/templates/body-bottom.html @@ -1,12 +1,21 @@
diff --git a/src/templates/inner-head.html b/src/templates/inner-head.html index 88f5a1c..0928eeb 100644 --- a/src/templates/inner-head.html +++ b/src/templates/inner-head.html @@ -3,4 +3,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/templates/nav.html b/src/templates/nav.html index 15286e2..35b00a6 100644 --- a/src/templates/nav.html +++ b/src/templates/nav.html @@ -1,39 +1,39 @@ -