diff options
| author | curly <curlybryce@protonmail.com> | 2023-01-11 11:22:29 -0700 |
|---|---|---|
| committer | curly <curlybryce@protonmail.com> | 2023-01-11 11:22:29 -0700 |
| commit | 4bd45d754821448b37c206544cbbfddf04360988 (patch) | |
| tree | b8be4c2dc2883decef7a1a8c36262e947ade417c /src/assets | |
| parent | 5d4988161300f368f4252628f6e2588ce75ef101 (diff) | |
| download | infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.gz infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.bz2 infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.zip | |
mobile nav complete
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/css/main.css | 39 | ||||
| -rw-r--r-- | src/assets/js/main.js | 44 |
2 files changed, 74 insertions, 9 deletions
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 <body> 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 |