From 26047fb0e1fb4f53464325f7cc8a38b5dc94056f Mon Sep 17 00:00:00 2001 From: isUnknown Date: Tue, 26 Nov 2024 10:19:13 +0100 Subject: [PATCH] improve nav design --- assets/css/src/generic.css | 4 +++ assets/css/src/header.css | 65 -------------------------------------- assets/css/src/nav.css | 34 ++++++++++---------- assets/js/script.js | 10 ++++++ site/snippets/cover.php | 6 +--- site/snippets/nav.php | 4 ++- site/templates/home.php | 2 ++ 7 files changed, 37 insertions(+), 88 deletions(-) diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index 9f44890..bb0c9a0 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -2,6 +2,10 @@ display: none; } +.no-scroll { + overflow: hidden !important; +} + body { background-size: var(--unit--horizontal) var(--unit--vertical); background-image: linear-gradient( diff --git a/assets/css/src/header.css b/assets/css/src/header.css index 9594b40..ae08a1a 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -36,58 +36,6 @@ transform: translateX(-2px) translateY(-2px); } -/* #main-header { - position: fixed; - z-index: 3; - top: 0; - left: 0; - width: calc(100vw - (2 * var(--unit--horizontal))); - height: calc(var(--unit--vertical) * 11.5); - padding: 0 var(--unit--horizontal); - padding-bottom: 0; - transition: height 0.2s ease-in-out; -} -#logo { - position: relative; - height: 100%; -} - -#logo__link { - position: relative; - transform: translateY(-3rem); - display: block; - height: 100%; -} - -#main-header.open #actuel { - color: var(--color-background); -} - -#logo #actuel, -#logo #inactuel { - position: absolute; - mix-blend-mode: difference; -} -#logo #actuel { - top: 0; - right: 0; -} -#logo #inactuel { - top: 15vw; - transition: all 0.3s ease-in-out; -} - -#main-header.minimized #logo #inactuel { - top: 0.1vw; -} */ - -body { - --entry-btns-height: 10svh; -} -body[data-template="home"] { - --entry-btns-height: 15svh; -} - .page-cover { position: relative; height: calc(100svh - var(--entry-btns-height)); @@ -129,19 +77,6 @@ button.toggle.right::before { transition: all 0.5s var(--curve-sine); content: "+"; } -button.open-nav::after { - margin-left: var(--unit--horizontal); -} - -button.open-nav::after { - content: ""; - position: absolute; - background-color: transparent; - height: var(--unit--vertical); - width: var(--unit--horizontal); - z-index: -1; - transition: all 0.5s var(--curve-sine); -} #entry-btns.minimized { color: #000; diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index 5e421c5..e243dcc 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -1,7 +1,16 @@ /* ================= PANELS ================= */ -#desktop-nav { +#nav-overlay { + position: fixed; + inset: 0; + background-color: #000; + opacity: 0.7; + z-index: 2; + cursor: w-resize; +} +#nav-overlay:not(.nav-overlay--visible) { display: none; } + .panel { display: none; position: fixed; @@ -136,7 +145,11 @@ button.search__icon { overflow: hidden; } -.panel-item-content__texts { +button.see-more { + margin-bottom: var(--unit--vertical); +} + +.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) { padding: var(--unit--vertical) var(--unit--horizontal); } @@ -146,21 +159,9 @@ button.search__icon { } @media screen and (min-width: 640px) { - #desktop-nav { - display: block; - position: fixed; - box-sizing: border-box; - z-index: 3; - bottom: 0; - left: 0; - width: var(--padding-body); - height: 29vh; - padding: var(--unit--vertical) var(--unit--horizontal); + nav.panel { + width: 40rem; } - #desktop-nav .empty { - height: calc(3 * var(--unit--vertical)); - } - #subscribe-btn-wrapper { height: 2.5rem; margin-bottom: 0.2rem; @@ -194,7 +195,6 @@ button.search__icon { .panel { z-index: 4; width: var(--padding-body); - padding-top: var(--unit--vertical); } .panel-close { diff --git a/assets/js/script.js b/assets/js/script.js index de412b1..23140cf 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -232,14 +232,24 @@ document.addEventListener("DOMContentLoaded", () => { }); const panelNav = document.querySelector(".panel"); + const navOverlay = document.querySelector("#nav-overlay"); const openNavBtn = document.querySelector("button.open-nav"); openNavBtn.addEventListener("click", () => { panelNav.classList.add("panel--visible"); + navOverlay.classList.add("nav-overlay--visible"); + document.body.classList.add("no-scroll"); }); const closeNavBtn = document.querySelector(".panel-close"); closeNavBtn.addEventListener("click", () => { panelNav.classList.remove("panel--visible"); + navOverlay.classList.remove("nav-overlay--visible"); + document.body.classList.remove("no-scroll"); + }); + navOverlay.addEventListener("click", () => { + panelNav.classList.remove("panel--visible"); + navOverlay.classList.remove("nav-overlay--visible"); + document.body.classList.remove("no-scroll"); }); }); diff --git a/site/snippets/cover.php b/site/snippets/cover.php index de274fc..dfd09df 100644 --- a/site/snippets/cover.php +++ b/site/snippets/cover.php @@ -13,8 +13,4 @@ $isOpen = isset($isOpen) ? $isOpen : false; text() ?> - - - \ No newline at end of file + \ No newline at end of file diff --git a/site/snippets/nav.php b/site/snippets/nav.php index 2f6bbd4..ead623a 100644 --- a/site/snippets/nav.php +++ b/site/snippets/nav.php @@ -1,3 +1,4 @@ + \ No newline at end of file + + \ No newline at end of file diff --git a/site/templates/home.php b/site/templates/home.php index a0c9bdf..d66566d 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -7,12 +7,14 @@

subtitle()->inline() ?>

éditorial

 +