fix sticky problems

assets/css/src/article.css

@@ -0,0 +1,2 @@
+article .content {
+}

assets/css/src/generic.css

@@ -77,3 +77,23 @@ body {
 .opacity {
   opacity: var(--opacity);
 }
+
+/* ================= BUTTONS ================= */
+button.toggle.left::after {
+  margin-left: var(--unit--horizontal);
+}
+button.toggle.left.close::after {
+  content: "+";
+}
+button.toggle.left.open::after {
+  content: "-";
+}
+button.toggle.right::before {
+  margin-right: var(--unit--horizontal);
+}
+button.toggle.right.close::before {
+  content: "+";
+}
+button.toggle.right.open::before {
+  content: "-";
+}

assets/css/src/header.css

@@ -35,13 +35,12 @@
 
 .page-cover {
   position: relative;
+  height: 80svh;
   box-sizing: border-box;
-  height: 100svh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-top: calc(var(--unit--vertical-relative) * 5);
-  padding-bottom: calc(5 * var(--unit--vertical));
 }
 
 .page-cover.open + * {
@@ -52,13 +51,47 @@
   padding-top: calc(var(--unit--vertical-relative) * 6);
 }
 
-#category .page-cover {
-  height: auto;
-  padding-bottom: 0;
-  margin-bottom: calc(2 * var(--unit--vertical));
+/* ================= ENTRY BTNS ================= */
+#entry-btns {
+  position: sticky;
+  top: calc(var(--unit--vertical) * 3);
+  height: 20svh;
+  display: flex;
+  justify-content: space-between;
 }
-#category .active-tab {
-  max-height: none;
+
+.entry-btn {
+  transition: all 0.5s var(--curve-sine);
+}
+[data-template="home"] .entry-btn {
+  align-items: start;
+}
+
+.entry-btn--left::after,
+.entry-btn--right::before {
+  transition: all 0.5s var(--curve-sine);
+  content: "+";
+}
+.entry-btn--left::after {
+  margin-left: var(--unit--horizontal);
+}
+.entry-btn--right::before {
+  margin-right: var(--unit--horizontal);
+}
+
+#entry-btns.minimized {
+  color: var(--color-secondary);
+}
+#entry-btns.minimized .entry-btn::before,
+#entry-btns.minimized .entry-btn::after {
+  font-weight: bold;
+}
+
+#entry-btns.minimized .entry-btn--left {
+  margin-left: calc(-4px - var(--width));
+}
+#entry-btns.minimized .entry-btn--right {
+  margin-right: calc(-4px - var(--width));
 }
 
 @media screen and (min-width: 640px) {

assets/css/src/html.css

@@ -10,10 +10,6 @@ body {
   box-sizing: border-box;
   background-color: var(--color-background);
   color: var(--color-primary);
-}
-
-main {
-  position: relative;
   padding: 0 var(--unit--horizontal);
 }
 

assets/css/src/linear.css

@@ -1,5 +0,0 @@
-.article-header .title-wrapper {
-  --margin-left: 2;
-  width: calc(100% - (var(--margin-left) * var(--unit--horizontal)));
-  padding-left: calc(var(--margin-left) * var(--unit--horizontal));
-}

assets/css/src/nav.css

@@ -1,50 +1,3 @@
-/* ================= ENTRIES BTNS ================= */
-#entry-btns {
-  position: sticky;
-  top: calc(var(--unit--vertical) * 10);
-  display: flex;
-  justify-content: space-between;
-  z-index: 2;
-}
-
-.entry-btn {
-  transition: all 0.5s var(--curve-sine);
-}
-
-[data-template="home"] #entry-btns {
-  transform: translateY(calc(0rem - var(--unit--vertical-relative) * 8));
-}
-[data-template="linear"] #entry-btns {
-  transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
-}
-
-.entry-btn--left::after,
-.entry-btn--right::before {
-  transition: all 0.5s var(--curve-sine);
-  content: "+";
-}
-.entry-btn--left::after {
-  margin-left: var(--unit--horizontal);
-}
-.entry-btn--right::before {
-  margin-right: var(--unit--horizontal);
-}
-
-#entry-btns.minimized {
-  color: var(--color-secondary);
-}
-#entry-btns.minimized .entry-btn::before,
-#entry-btns.minimized .entry-btn::after {
-  font-weight: bold;
-}
-
-#entry-btns.minimized .entry-btn--left {
-  margin-left: calc(-4px - var(--width));
-}
-#entry-btns.minimized .entry-btn--right {
-  margin-right: calc(-4px - var(--width));
-}
-
 /* ================= PANELS ================= */
 .panel {
   position: fixed;
@@ -58,16 +11,31 @@
   padding: 0 var(--unit--horizontal);
   padding-top: calc(var(--unit--vertical) * 5);
   box-sizing: border-box;
-  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.panel--left {
+  left: calc(-100vw - 1px);
+}
+.panel--right {
+  right: calc(-100vw - 1px);
+}
+
+.panel--left.open {
+  left: 0;
+}
+.panel--right.open {
+  right: 0;
 }
 
 .search {
-  position: fixed;
-  width: calc(100% - 2 * var(--unit--horizontal));
+  position: relative;
+  width: 100%;
   background-color: #000;
   z-index: 1;
   top: 0;
-  padding-top: calc(var(--unit--vertical) * 5);
 }
 .search__input {
   all: unset;
@@ -82,7 +50,7 @@
   font-weight: var(--font-weight-light);
 }
 .search__input::placeholder {
-  font-size: var(--font-size-s);
+  font-size: var(--font-size-sm);
   letter-spacing: 1px;
 }
 .search__icon {
@@ -100,26 +68,13 @@ button.search__icon {
 }
 
 .panel__items {
-  margin-top: calc(var(--unit--vertical) * 2);
-  margin-bottom: calc(var(--unit--vertical) * 4);
-}
-
-.panel--left {
-  left: calc(-100% - var(--unit--horizontal) * 2 - 1px);
-}
-.panel--right {
-  right: calc(-100% - var(--unit--horizontal) * 2 - 1px);
-}
-
-.panel--right.open {
-  right: 0;
-}
-.panel--left.open {
-  left: 0;
+  scroll-behavior: smooth;
+  height: 100%;
+  padding-top: var(--unit--vertical);
+  overflow: auto;
 }
 
 .panel-close {
-  position: fixed;
   justify-content: center;
   width: calc(100% - 2 * var(--unit--horizontal));
   bottom: 0;

assets/css/src/reset.css

@@ -25,6 +25,9 @@ a {
   text-decoration: none;
   color: inherit;
 }
+a:focus-visible {
+  outline: none;
+}
 
 li {
   list-style-type: none;

assets/css/src/tabs.css

@@ -21,10 +21,6 @@ button.toggle.left.close::after {
 button.toggle.left.open::after {
   content: "-";
 }
-
-#tabs.minimized button.toggle.right {
-  margin-right: calc(-4px - var(--width));
-}
 button.toggle.right::before {
   margin-right: var(--unit--horizontal);
 }
@@ -35,6 +31,10 @@ button.toggle.right.open::before {
   content: "-";
 }
 
+#tabs.minimized button.toggle.right {
+  margin-right: calc(-4px - var(--width));
+}
+
 #tabs {
   width: 100%;
   z-index: 1;

assets/css/src/variables.css

@@ -13,6 +13,7 @@
   );
 
   --font-size-s: 0.8rem;
+  --font-size-sm: calc(var(--font-size-s) * 1);
   --font-size-m: calc(var(--font-size-s) * 1.5);
   --font-size-l: calc(var(--font-size-m) * 1.5);
   --font-size-xl: calc(var(--font-size-l) * 1.5);

assets/css/style.css

@@ -1,11 +1,61 @@
 @import url("src/reset.css");
-@import url("src/variables.css");
 @import url("src/html.css");
 @import url("src/generic.css");
 @import url("src/texts.css");
 @import url("src/header.css");
-@import url("src/tabs.css");
 @import url("src/nav.css");
+@import url("src/article.css");
 @import url("src/home.css");
-@import url("src/linear.css");
 @import url("src/footer.css");
+:root {
+  --color-background: #000;
+  --color-primary: #ffffff;
+  --color-primary--transparent: rgba(255, 255, 255, 0.86);
+  --color-secondary: rgb(120, 171, 150, 0.86);
+  --color-secondary--light: rgb(119, 177, 157, 0.2);
+  --color-secondary--x-light: rgb(119, 177, 157, 0.1);
+
+  --unit--horizontal: 5vw;
+  --unit--vertical: 1.7rem;
+  --unit--vertical-relative: calc(
+    var(--unit--vertical) * var(--window-height-factor)
+  );
+
+  --font-size-s: 0.8rem;
+  --font-size-m: calc(var(--font-size-s) * 1.5);
+  --font-size-l: calc(var(--font-size-m) * 1.5);
+  --font-size-xl: calc(var(--font-size-l) * 1.5);
+  --font-size-xxl: calc(var(--font-size-xl) * 1.5);
+
+  --font-weight-light: 200;
+  --font-weight-bold: 400;
+  --font-weight-extra-bold: 550;
+
+  --opacity-light: 0.6;
+
+  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+@media screen and (min-width: 640px) {
+  :root {
+    --color-background: #000;
+    --color-primary: #ffffff;
+    --color-primary--transparent: rgba(255, 255, 255, 0.86);
+    --color-secondary: rgb(120, 171, 150, 0.86);
+    --color-secondary--light: rgb(119, 177, 157, 0.25);
+    --color-secondary--x-light: rgb(119, 177, 157, 0.15);
+
+    --unit--horizontal: 5vw;
+    --unit--vertical: 1.7rem;
+
+    --font-size-s: 0.9rem;
+    --font-size-m: calc(var(--font-size-s) * 1.5);
+    --font-size-l: calc(var(--font-size-m) * 1.5);
+    --font-size-xl: calc(var(--font-size-l) * 1.5);
+    --font-size-xxl: calc(var(--font-size-xl) * 1.5);
+
+    --font-weight-light: 200;
+    --font-weight-bold: 400;
+    --font-weight-extra-bold: 550;
+  }
+}

assets/js/script.js

@@ -58,10 +58,9 @@ function setWindowHeightFactor() {
   const delta = windowHeight - min;
   const factor = roundToNearestHalf(delta / 300) + 1;
 
-  const head = document.querySelector("head");
-  const style = document.createElement("style");
-  style.innerText = `:root { --window-height-factor:${factor} }`;
-  head.appendChild(style);
+  document
+    .querySelector(":root")
+    .style.setProperty("--window-height-factor", factor);
 }
 
 function roundToNearestHalf(num) {
@@ -123,10 +122,12 @@ function togglePanel(side) {
   if (isOpen) {
     document.querySelector("html").style.overflowY = "hidden";
     document.querySelector("#main-header").classList.remove("minimized");
-  } else if (scrollY > 10) {
+  } else {
     document.querySelector("html").style.overflowY = "";
+    if (scrollY > 10) {
       document.querySelector("#main-header").classList.add("minimized");
     }
+  }
 }
 
 document.addEventListener("DOMContentLoaded", () => {

site/snippets/cover.php

@@ -8,5 +8,14 @@ $isOpen = isset($isOpen) ? $isOpen : false;
   <div class="title-wrapper">
     <?= $slots->title() ?>
   </div>
-  <?= $slots->tabs() ?>
 </header>
+<div id="entry-btns">
+  <button
+    class="entry-btn entry-btn--left"
+    onclick="togglePanel('left')"
+  >années</button>
+  <button
+    class="entry-btn entry-btn--right"
+    onclick="togglePanel('right')"
+  >categories</button>
+</div>

site/snippets/header.php

@@ -1,3 +1,6 @@
+<?php
+$entryTopPos = $entryTopPos ?? 20;
+?>
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -8,6 +11,11 @@
     <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <meta name="robots" content="noindex, nofollow, noarchive">
+    <style>
+      :root {
+        --entry-btns-top: calc(var(--unit--vertical-relative) * <?= $entryTopPos ?>);
+      }
+    </style>
   </head>
   <body class="grid" data-template="<?= $page->template() ?>" >
     <header id="main-header">
@@ -18,3 +26,4 @@
         </a>
       </div>
     </header>
+    <?php snippet('panels') ?>

site/snippets/panels.php

@@ -1,15 +1,4 @@
 
-<div id="entry-btns">
-  <button
-    class="entry-btn entry-btn--left"
-    onclick="togglePanel('left')"
-  >années</button>
-  <button
-    class="entry-btn entry-btn--right"
-    onclick="togglePanel('right')"
-  >categories</button>
-</div>
-
 <nav 
   class="panel panel--left"
   x-data="{search: ''}"
@@ -39,22 +28,24 @@
     <?php foreach($kirby->collection('years') as $year): ?>
     <li 
       class="panel__item "
-      x-data='{ year: false }'
+      x-data='{ isOpen: false }'
     >
+      <a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
         <button 
           class="panel__toggle-btn"
-        :class="year ? '' : 'short'"
-        @click="year = !year" 
+          :class="isOpen ? '' : 'short'"
+          @click="isOpen = !isOpen" 
         >
           <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
           <div 
             class="panel__toggle-icon" 
-          x-text="year || search.length > 0 ? '-' : '+'"
+            x-text="isOpen || search.length > 0 ? '-' : '+'"
           ></div>
         </button>
+      </a>
       <div
         class="panel-item-content"
-        x-show="year || search.length > 0"
+        x-show="isOpen || search.length > 0"
         x-data='{ edito: false }'
       >
         <div 
@@ -144,22 +135,24 @@
       foreach($categories as $category): ?>
     <li 
       class="panel__item "
-      x-data='{ category: false }'
+      x-data='{ isOpen: false }'
     >
+      <a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
         <button 
           class="panel__toggle-btn"
-        :class="category ? '' : 'short'"
-        @click="category = !category" 
+          :class="isOpen ? '' : 'short'"
+          @click="isOpen = !isOpen" 
         >
           <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
           <div 
             class="panel__toggle-icon" 
-          x-text="category || search.length > 0 ? '-' : '+'"
+            x-text="isOpen || search.length > 0 ? '-' : '+'"
           ></div>
         </button>
+      </a>
       <div
         class="panel-item-content"
-        x-show="category || search.length > 0"
+        x-show="isOpen || search.length > 0"
       >
         <ul class="panel-item-content__texts">
           <?php

site/templates/linear.php

@@ -1,4 +1,6 @@
-<?php snippet('header') ?>
+<?php snippet('header', array(
+  'entryTopPos' => 20
+)) ?>
 <main id="<?= $page->template() ?>">
   <article>
     <?php snippet('cover', array('isOpen' => true), slots: true) ?>
@@ -18,7 +20,8 @@
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>
-    <?php snippet('nav') ?>
+    <div class="content">
       <?= $page->body() ?>
+    </div>
   </article>
 </main>