From cf867bbc14d5f7401d2d84c860cd4d21766c2e27 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Tue, 26 Nov 2024 09:53:05 +0100 Subject: [PATCH] redesign nav and logo --- assets/css/src/generic.css | 6 +- assets/css/src/header.css | 59 +++++++++---- assets/css/src/nav.css | 62 +++++++++----- assets/css/src/texts.css | 7 +- assets/js/script.js | 38 +++++++++ site/collections/categories.php | 57 +++++++------ site/snippets/cover.php | 14 +--- site/snippets/header.php | 12 +-- site/snippets/nav.php | 52 ++++++++---- site/snippets/nav__texts--all.php | 32 ++++++++ site/snippets/nav__texts--collection.php | 75 +++++++++++++++++ site/snippets/panel--categories.php | 92 --------------------- site/snippets/panel--years.php | 100 ----------------------- vite.config.js | 6 ++ 14 files changed, 315 insertions(+), 297 deletions(-) create mode 100644 site/snippets/nav__texts--all.php create mode 100644 site/snippets/nav__texts--collection.php delete mode 100644 site/snippets/panel--categories.php delete mode 100644 site/snippets/panel--years.php create mode 100644 vite.config.js diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index f42e0ca..9f44890 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -79,10 +79,12 @@ body { } /* ================= BUTTONS ================= */ -.toggle-btn--left::after { +.toggle-btn--left::after, +.plus-btn::after { margin-left: var(--unit--horizontal); } -.toggle-btn--left::after { +.toggle-btn--left::after, +.plus-btn::after { content: "+"; } .toggle-btn--left.open::after { diff --git a/assets/css/src/header.css b/assets/css/src/header.css index 7691ec2..9594b40 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -1,4 +1,42 @@ #main-header { + position: fixed; + box-sizing: border-box; + width: 100vw; +} + +#logo * { + font-size: 26.65vw; + font-weight: var(--font-weight-extra-bold); +} + +#logo span { + height: 20vw; + width: 100vw; + box-sizing: border-box; + padding-right: 1vw; + display: flex; + justify-content: flex-end; + align-items: center; +} + +#logo { + text-align: right; +} + +#logo #actuel, +#logo #inactuel { + mix-blend-mode: difference; +} + +#logo #inactuel { + transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out; +} +#main-header.minimized #inactuel { + margin-top: -20vw; + transform: translateX(-2px) translateY(-2px); +} + +/* #main-header { position: fixed; z-index: 3; top: 0; @@ -41,7 +79,7 @@ #main-header.minimized #logo #inactuel { top: 0.1vw; -} +} */ body { --entry-btns-height: 10svh; @@ -91,15 +129,11 @@ button.toggle.right::before { transition: all 0.5s var(--curve-sine); content: "+"; } -.entry-btn--left::after { +button.open-nav::after { margin-left: var(--unit--horizontal); } -.entry-btn--right::before { - margin-right: var(--unit--horizontal); -} -#entry-btns .entry-btn--left::before, -#entry-btns .entry-btn--right::after { +button.open-nav::after { content: ""; position: absolute; background-color: transparent; @@ -109,13 +143,6 @@ button.toggle.right::before { transition: all 0.5s var(--curve-sine); } -#entry-btns .entry-btn--left::before { - right: 0; -} -#entry-btns .entry-btn--right::after { - left: 0; -} - #entry-btns.minimized { color: #000; } @@ -139,12 +166,12 @@ button.toggle.right::before { } @media screen and (min-width: 640px) { - #logo { + /* #logo { width: 100%; } #logo * { font-size: 25.8vw; - } + } */ .page-cover:not( [data-template="author"] .page-cover, diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index a29e00c..5e421c5 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -3,43 +3,59 @@ display: none; } .panel { + display: none; position: fixed; + overflow: auto; width: 100vw; height: 100dvh; top: 0; background-color: #000; outline: 1px solid #fff; transition: all 0.5s var(--curve-sine); - z-index: 2; - padding-top: calc(var(--unit--vertical) * 5); + z-index: 3; box-sizing: border-box; - display: flex; flex-direction: column; } -.search, -.panel__items { - padding: 0 var(--unit--horizontal); +.panel.panel--visible { + display: flex; } -.panel--left { - left: calc(-100vw - 1px); -} -.panel--right { - right: calc(-100vw - 1px); +.panel header { + position: sticky; + top: 0; + z-index: 1; + background-color: #000; + padding: var(--unit--vertical) var(--unit--horizontal); + padding-bottom: 0; } -.panel--left.open { - left: 0; +.sort-btns { + box-sizing: border-box; } -.panel--right.open { - right: 0; + +.sort-btns button { + all: unset; + cursor: pointer; + display: inline-block; + margin-right: 2vw; +} + +.sort-btns button:hover { + text-decoration: underline; + text-underline-offset: 4px; +} + +.sort-btns button.active { + text-decoration: underline; + text-underline-offset: 4px; } .search { position: relative; width: 100%; + margin-top: var(--unit--vertical); background-color: #000; z-index: 1; top: 0; @@ -66,24 +82,26 @@ width: 1.2rem; height: 1.2rem; padding: 0.5rem; - bottom: 0; - right: var(--unit--horizontal); - transform: translateX(0.5rem) translateY(-0.2rem); + right: 0; + transform: translateX(0.5rem) translateY(0.2rem); } button.search__icon { cursor: pointer; } -.panel__items { +.panel__collection { scroll-behavior: smooth; height: 100%; - padding-top: var(--unit--vertical); overflow: auto; + padding: var(--unit--vertical) var(--unit--horizontal); } .panel-close { + position: fixed; + box-sizing: border-box; + bottom: 0; justify-content: center; - width: calc(100% - 2 * var(--unit--horizontal)); + width: 100%; outline: none; border-top: 1px solid #fff; font-size: var(--font-size-m); @@ -119,7 +137,7 @@ button.search__icon { } .panel-item-content__texts { - margin-top: var(--unit--vertical); + padding: var(--unit--vertical) var(--unit--horizontal); } /* ================= TEXT ITEM ================= */ diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css index 3de3a95..876164f 100644 --- a/assets/css/src/texts.css +++ b/assets/css/src/texts.css @@ -17,11 +17,6 @@ font-family: "Switzer-Variable", sans-serif; } -#logo * { - font-size: 25vw; - font-weight: var(--font-weight-extra-bold); -} - h1, h1 *, h2, @@ -45,7 +40,7 @@ h2 { h3, .h3 { font-size: var(--font-size-xl); - color: var(--color-secondary); + color: var(--color-primary); } article h2 { diff --git a/assets/js/script.js b/assets/js/script.js index 82a5731..de412b1 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -204,4 +204,42 @@ document.addEventListener("DOMContentLoaded", () => { event.stopPropagation(); }); }); + + const navSortBtns = document.querySelectorAll("nav .sort-btn"); + const navSections = document.querySelectorAll( + ".panel__all-texts, .panel__collection" + ); + + navSortBtns.forEach((sortBtn) => { + sortBtn.addEventListener("click", () => { + navSortBtns.forEach((btn) => btn.classList.remove("active")); + sortBtn.classList.add("active"); + + const sections = { + "sort-btn--all": ".panel__all-texts", + "sort-btn--years": ".panel__collection--years", + "sort-btn--categories": ".panel__collection--categories", + }; + + navSections.forEach((navSection) => navSection.classList.add("hidden")); + + Object.keys(sections).forEach((key) => { + if (sortBtn.classList.contains(key)) { + document.querySelector(sections[key]).classList.remove("hidden"); + } + }); + }); + }); + + const panelNav = document.querySelector(".panel"); + + const openNavBtn = document.querySelector("button.open-nav"); + openNavBtn.addEventListener("click", () => { + panelNav.classList.add("panel--visible"); + }); + + const closeNavBtn = document.querySelector(".panel-close"); + closeNavBtn.addEventListener("click", () => { + panelNav.classList.remove("panel--visible"); + }); }); diff --git a/site/collections/categories.php b/site/collections/categories.php index 7188ea9..b6e6c5e 100644 --- a/site/collections/categories.php +++ b/site/collections/categories.php @@ -1,41 +1,44 @@ categories()->split() as $category) { - $categories[$category] = array( - 'title' => $category, - 'texts' => new Pages() - ); - } +function createEmptyCategories() { + $categories = new Pages(); + foreach (page('textes')->categories()->split() as $categoryName) { + $category = new Page([ + 'slug' => Str::slug($categoryName), + 'template' => 'category', + 'status' => 'listed', + 'content' => [ + 'title' => $categoryName, + ], + 'children' => [] + ]); + + $categories->add($category); + } + return $categories; } -function fillCategoriesWithTexts($emptyCategories, $texts) { - $filledCategories = $emptyCategories; - foreach ($texts as $text) { + +function createCategories() { + $emptyCategories = createEmptyCategories(); + foreach (page('textes')->grandChildren() as $text) { try { - $textCategory = $text->category()->value(); - $filledCategories[$textCategory]['texts']->add($text); + $textCategoryName = $text->category()->value(); + $emptyCategories + ->findBy('slug', Str::slug($textCategoryName)) + ->children() + ->add($text); } catch (\Throwable $th) { - throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage())); + throw new Exception($th->getFile() . ' : ' . $th->getMessage()); } } - - // exclude empty categories - return array_filter($filledCategories, function($category) { - return count($category['texts']) > 0; + return $emptyCategories->filter(function ($category) { + return $category->children()->count() > 0; }); } return function ($site) { - $textsPage = $site->find('textes'); - $years = $textsPage->children(); - $texts = $years->children()->index(); - - $emptyCategories = createCategories($textsPage); - - $filledCategories = fillCategoriesWithTexts($emptyCategories, $texts); - - return $filledCategories; + $categories = createCategories(); + return $categories; }; diff --git a/site/snippets/cover.php b/site/snippets/cover.php index 792b7d5..de274fc 100644 --- a/site/snippets/cover.php +++ b/site/snippets/cover.php @@ -14,13 +14,7 @@ $isOpen = isset($isOpen) ? $isOpen : false; -
- - -
\ No newline at end of file + + \ No newline at end of file diff --git a/site/snippets/header.php b/site/snippets/header.php index 422a4d8..ecd4b77 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -36,11 +36,11 @@ $entryTopPos = $entryTopPos ?? 20;
- +
\ No newline at end of file diff --git a/site/snippets/nav.php b/site/snippets/nav.php index dbc2303..2f6bbd4 100644 --- a/site/snippets/nav.php +++ b/site/snippets/nav.php @@ -1,17 +1,37 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/site/snippets/nav__texts--all.php b/site/snippets/nav__texts--all.php new file mode 100644 index 0000000..c152bb0 --- /dev/null +++ b/site/snippets/nav__texts--all.php @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/site/snippets/nav__texts--collection.php b/site/snippets/nav__texts--collection.php new file mode 100644 index 0000000..320abee --- /dev/null +++ b/site/snippets/nav__texts--collection.php @@ -0,0 +1,75 @@ + \ No newline at end of file diff --git a/site/snippets/panel--categories.php b/site/snippets/panel--categories.php deleted file mode 100644 index ada0c85..0000000 --- a/site/snippets/panel--categories.php +++ /dev/null @@ -1,92 +0,0 @@ -