From e757ee6bcaa7847429ee6c866258246668e763ff Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Thu, 23 Feb 2023 11:52:24 +0100 Subject: [PATCH] Finish mobile nav styling and behaviour --- sass/style.scss | 23 +++++++++++++++++++++++ static/js/nav.js | 1 + 2 files changed, 24 insertions(+) diff --git a/sass/style.scss b/sass/style.scss index 5f24201..e0a15de 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -66,6 +66,10 @@ section { /* Specific */ +body.noscroll { + overflow: hidden; +} + .intro { min-height: 100vh; @@ -113,6 +117,7 @@ section { a { display: flex; align-items: center; + justify-content: center; flex-shrink: 0; padding: 0 1.5em; overflow: hidden; @@ -330,6 +335,24 @@ footer { nav { display: none; + + border: none; + flex-direction: column; + position: absolute; + left: 0; + top: 100%; + width: 100%; + min-height: 100vh; + margin-top: 1px; // Fix covering border of header + background-color: $col-bg; + + a { + padding: 3em 1rem; + border: 0; + font-weight: bold; + font-size: 1.138rem; + border-bottom: 1px solid #5D6E81; + } } } } diff --git a/static/js/nav.js b/static/js/nav.js index 30a7c53..99d882b 100644 --- a/static/js/nav.js +++ b/static/js/nav.js @@ -1,4 +1,5 @@ document.getElementById("menu-button").addEventListener("click", function(){ + document.body.classList.toggle("noscroll"); this.getElementsByClassName("image")[0].classList.toggle("open"); document.getElementById("nav").classList.toggle("visible"); });