diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index 8042df1..f1af8c3 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -1,3 +1,7 @@ +.sr-only { + display: none; +} + body.progress * { cursor: progress !important; } diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index 80c9882..e8b1bb9 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -1,17 +1,86 @@ /* Nav */ + +.expanded-nav, +.main-nav { + padding: 1rem; + padding-right: var(--space-m); +} + +/* Expanded nav */ + +.expanded-nav { + position: fixed; + width: 100%; + box-sizing: border-box; + top: -20rem; + z-index: 2; + background-color: var(--color-brown-light); + display: grid; + grid-template-columns: 1fr 4fr 1fr; + transition: top 0.5s var(--curve-quick-slow); +} +.expanded-nav.open { + top: 0rem; +} + +.expanded-nav__columns { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.expanded-nav .close-btn { + position: relative; + width: 1.5rem; + height: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + justify-self: end; +} + +.expanded-nav .close-btn__line, +.expanded-nav .close-btn__line::before { + content: ""; + width: 100%; + height: 3px; + background-color: #000; + position: absolute; +} + +.expanded-nav .close-btn__line { + transform: rotate(-45deg); +} +.expanded-nav .close-btn__line::before { + transform: rotate(90deg); +} + +.expanded-nav__category { + margin-bottom: 1rem; +} +.expanded-nav__subcategory { + font-size: var(--font-size-s); +} + +/* Header */ + .main-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); - padding: 1rem; } .main-nav__right { display: flex; + align-items: center; } -.main-nav__right > *:not(:last-child) { +.main-nav__featured-pages { + display: flex; +} + +.main-nav__right > *:not(:last-child), +.main-nav__featured-pages li:not(:last-child) { margin-right: 2.69rem; } diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css index eeefddb..01fa43c 100644 --- a/assets/css/src/variables.css +++ b/assets/css/src/variables.css @@ -10,7 +10,7 @@ --font-size-h2: 1.875rem; --font-size-h1: 2.8125rem; - --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955); --padding-vertical: 2rem; --space-m: 4vw; diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..d06e7df --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,24 @@ +document.addEventListener("DOMContentLoaded", () => { + // Functions + function expandNav() { + expandedNav.classList.add("open"); + + burgerBtn.setAttribute("aria-expanded", true); + closeNavBtn.setAttribute("aria-expanded", true); + } + function closeNav() { + expandedNav.classList.remove("open"); + + burgerBtn.setAttribute("aria-expanded", false); + closeNavBtn.setAttribute("aria-expanded", false); + } + + // Variables + const burgerBtn = document.querySelector(".burger-btn"); + const closeNavBtn = document.querySelector(".expanded-nav .close-btn"); + const expandedNav = document.querySelector(".expanded-nav"); + + // Listeners + burgerBtn.addEventListener("click", expandNav); + closeNavBtn.addEventListener("click", closeNav); +}); diff --git a/site/blueprints/pages/section.yml b/site/blueprints/pages/section.yml index 8b1b0cd..4274719 100644 --- a/site/blueprints/pages/section.yml +++ b/site/blueprints/pages/section.yml @@ -18,4 +18,12 @@ tabs: - text - image - links-list + paramsTab: + label: Paramètres + icon: cog + fields: + isIndexed: + label: Titre de section affichée dans le menu développé ? + type: toggle + default: true filesTab: tabs/files diff --git a/site/collections/featured-pages.php b/site/collections/featured-pages.php new file mode 100644 index 0000000..eca1529 --- /dev/null +++ b/site/collections/featured-pages.php @@ -0,0 +1,7 @@ + + color()->exists()): ?>