save before move tabs outside from header

assets/css/src/article.css

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

assets/css/src/footer.css

@@ -6,3 +6,9 @@
   padding: var(--unit--horizontal);
   padding-top: var();
 }
+
+#main-footer a {
+  text-shadow: 0 0 2px #000;
+  -moz-text-shadow: 0 0 2px #000;
+  -webkit-text-shadow: 0 0 2px #000;
+}

assets/css/src/header.css

@@ -1,4 +1,4 @@
-#header {
+#main-header {
   position: fixed;
   z-index: 1;
   top: 0;
@@ -7,17 +7,16 @@
   width: 100%;
   height: calc(var(--unit--vertical) * 5);
   padding: var(--unit--vertical) var(--unit--horizontal);
-
   transition: height 0.2s ease-in-out;
 }
-#header.minimized {
+#main-header.minimized {
   height: calc(var(--unit--vertical) * 3);
 }
 #logo {
   position: relative;
 }
 
-#header.open #actuel {
+#main-header.open #actuel {
   color: var(--color-background);
 }
 #logo #actuel {
@@ -33,6 +32,22 @@
   bottom: -48%;
   transition: bottom 0.2s ease-in-out;
 }
-#header.minimized #logo #inactuel {
+#main-header.minimized #logo #inactuel {
   bottom: 0%;
 }
+
+.page-cover {
+  box-sizing: border-box;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: calc(7 * var(--unit--vertical)) 0;
+  margin-bottom: 0rem;
+
+  transition: margin-bottom 0.5s ease-in-out;
+}
+
+.page-cover.open {
+  margin-bottom: calc(100vh - 10 * var(--unit--vertical));
+}

assets/css/src/home.css

@@ -1,3 +1 @@
-main#home .toggle-btns {
-  margin-top: calc(var(--unit--vertical) * 6);
-}
+

assets/css/src/html.css

@@ -2,7 +2,7 @@ body {
   position: relative;
   box-sizing: border-box;
   min-height: 100vh;
-  padding: var(--unit--vertical) var(--unit--horizontal);
+  padding: 0 var(--unit--horizontal);
   background-color: var(--color-background);
   color: var(--color-primary);
 }
@@ -26,10 +26,6 @@ html {
   scroll-behavior: smooth;
 }
 
-main {
-  margin-top: calc(6 * var(--unit--vertical));
-}
-
 /* Works on Firefox */
 
 * {

assets/css/src/tabs.css

@@ -25,9 +25,18 @@ button.toggle.right.open::before {
   content: "-";
 }
 
-.active-tab {
-  margin-top: calc(var(--unit--vertical) * 0.5);
-  overflow: auto;
-  max-height: calc(100vh - 7.5 * var(--unit--vertical));
-  margin-bottom: calc(2 * var(--unit--vertical));
+#tabs {
+  position: relative;
+}
+
+.active-tab {
+  position: absolute;
+  overflow: auto;
+  margin-top: calc(var(--unit--vertical) * 0.5);
+  height: 0px;
+  transition: height 0.5s ease-in-out;
+}
+
+.page-cover.open .active-tab {
+  height: calc(100vh - 7.5 * var(--unit--vertical));
 }

assets/dist/script.js

@@ -1,7 +1,7 @@
 "use strict";
 
 function openTab(data, tab) {
-  data.activeTab === tab ? data.activeTab = "" : data.activeTab = tab;
+  data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
 }
 function scrollToElem(selector) {
   setTimeout(function () {
@@ -10,7 +10,7 @@ function scrollToElem(selector) {
     var top = elem.getBoundingClientRect().top;
     window.scrollTo({
       top: top + window.scrollY + yOffset,
-      behavior: "smooth"
+      behavior: "smooth",
     });
   }, 100);
 }
@@ -18,12 +18,12 @@ document.addEventListener("DOMContentLoaded", function () {
   function toggleLogoState() {
     var scrollY = window.scrollY || window.pageYOffset;
     if (scrollY > 10) {
-      document.querySelector("#header").classList.add("minimized");
+      document.querySelector("#main-header").classList.add("minimized");
     } else {
-      document.querySelector("#header").classList.remove("minimized");
+      document.querySelector("#main-header").classList.remove("minimized");
     }
   }
   window.addEventListener("scroll", function () {
     toggleLogoState();
   });
-});
+});

assets/dist/style.css

@@ -125,7 +125,7 @@ button {
 article p {
   margin-bottom: var(--unit--vertical);
 }
-#header {
+#main-header {
   position: fixed;
   z-index: 1;
   top: 0;
@@ -136,7 +136,7 @@ article p {
   padding: var(--unit--vertical) var(--unit--horizontal);
   transition: height 0.2s ease-in-out;
 }
-#header.minimized {
+#main-header.minimized {
   height: calc(var(--unit--vertical) * 3);
 }
 #logo,
@@ -147,7 +147,7 @@ article p {
   margin-top: var(--unit--vertical);
   margin-left: var(--unit--horizontal);
 }
-#header.open #actuel {
+#main-header.open #actuel {
   color: var(--color-background);
 }
 #logo #actuel,
@@ -165,8 +165,8 @@ article p {
   bottom: -48%;
   transition: bottom 0.2s ease-in-out;
 }
-#header.minimized #logo #inactuel,
-#header.minimized #logo-nav #inactuel-nav {
+#main-header.minimized #logo #inactuel,
+#main-header.minimized #logo-nav #inactuel-nav {
   bottom: 0;
 }
 #nav-btn {
@@ -187,9 +187,9 @@ article p {
   background-color: var(--color-primary);
   transition: all 0.3s ease-in-out;
 }
-#header.open .line-center,
-#header.open .line-down,
-#header.open .line-up {
+#main-header.open .line-center,
+#main-header.open .line-down,
+#main-header.open .line-up {
   background-color: var(--color-background);
 }
 #nav-btn .line-up {
@@ -227,7 +227,7 @@ nav {
   overflow: hidden;
   transition: all 0.5s ease-in-out;
 }
-#header.open nav {
+#main-header.open nav {
   height: 100vh;
 }
 #spaces {

assets/js/script.js

@@ -6,14 +6,17 @@ function toggleTab(data, tab) {
     scrollToElem("body");
     setTimeout(() => {
       data.activeTab = "";
+      data.isOpen = false;
     }, 200);
   } else {
     data.activeTab = tab;
+    data.isOpen = true;
     scrollToElem(".active-tab");
   }
 }
 
 function scrollToElem(selector) {
+  document.querySelector(".active-tab").scrollTop = 0;
   setTimeout(() => {
     const yOffset = -7 * verticalUnit;
     const elem = document.querySelector(selector);
@@ -30,9 +33,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const scrollY = window.scrollY || window.pageYOffset;
 
     if (scrollY > 10) {
-      document.querySelector("#header").classList.add("minimized");
+      document.querySelector("#main-header").classList.add("minimized");
     } else {
-      document.querySelector("#header").classList.remove("minimized");
+      document.querySelector("#main-header").classList.remove("minimized");
     }
   }
 

site/snippets/cover.php

@@ -0,0 +1,16 @@
+<?php
+$isOpen = isset($isOpen) ? $isOpen : false;
+?>
+
+<header 
+  x-data="{
+    isOpen: <?= $isOpen ?>
+  }"
+  class="page-cover"
+  :class="isOpen ? 'open' : 'close'"
+>
+  <div class="title-wrapper">
+    <?= $slots->title() ?>
+  </div>
+  <?= $slots->tabs() ?>
+</header>

site/snippets/tabs.php

@@ -1,10 +1,11 @@
 <?php
 $left['slug'] = Str::slug($left['label']);
 $authorFilter = isset($authorFilter) ? $authorFilter : false;
+$activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
 ?>
 
 <div id="tabs" x-data="{
-    activeTab: ''
+    activeTab: '<?= $activeTab ?>'
   }">
     <div class="toggle-btns | flex space-between" style="
     --content:space-between;
@@ -20,7 +21,7 @@ $authorFilter = isset($authorFilter) ? $authorFilter : false;
         @click="toggleTab($data, 'texts')"
       >textes</button>
     </div>
-    <div class="active-tab">
+    <div class="active-tab" x-show="activeTab.length > 0">
       <section 
       x-show="activeTab === '<?=$left['slug'] ?>'">
         <?= $left['content'] ?>

site/templates/home.php

@@ -1,5 +1,5 @@
 <?php snippet('header') ?>
-<header id="header">
+<header id="main-header">
   <div id="logo">
     <a href="/" class="no-line">
       <h1 id="actuel">actuel</h1>
@@ -9,15 +9,22 @@
 </header>
 
 <main id="<?= $page->template() ?>">
-  <h3 class="title-center">
-    critique des arts<br />
-    et des techniques<br>
-  </h3>
-  <?php snippet('tabs', [
-    'left' => [
-      'label' => 'édito',
-      'content' => $site->edito()
-    ]
-  ]) ?>
+  <?php snippet('cover', slots: true) ?>
+    <?php slot('title') ?>
+    <h3 class="title-center">
+      revue critique<br>
+      des arts et des techniques<br>
+    </h3>
+    <?php endslot() ?>
+    
+    <?php slot('tabs') ?>
+      <?php snippet('tabs', [
+        'left' => [
+          'label' => 'édito',
+          'content' => $site->edito()
+        ]
+      ]) ?>
+    <?php endslot() ?>
+  <?php endsnippet() ?>
 </main>
 <?php snippet('footer') ?>

site/templates/linear.php

@@ -1,5 +1,5 @@
 <?php snippet('header') ?>
-<header id="header" class="minimized">
+<header id="main-header" class="minimized">
   <div id="logo" >
     <a href="/" class="no-line">
       <h2 id="actuel">actuel</h2>
@@ -9,16 +9,22 @@
 </header>
 <main id="<?= $page->template() ?>">
 <article>
-  <div class="article-header">
+  <?php snippet('cover', ['isOpen' => true], slots: true) ?>
+    <?php slot('title') ?>
     <h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
-    <p><span class="opacity" style="--opacity:.5">par</span> <a class="author no-line" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"><?= $page->author()->toUser()->name() ?></a></p>
-  </div>
-  <?php snippet('tabs', [
-    'left' => [
-      'label' => 'Édito ' . $page->parent()->title(),
-      'content' => $page->parent()->edito()
-    ]
-  ]) ?>
+      <p><span class="opacity" style="--opacity:.5">par</span> <a class="author no-line" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"><?= $page->author()->toUser()->name() ?></a></p>
+    <?php endslot() ?>
+    <?php slot('tabs') ?>
+    <?php snippet('tabs', [
+      'left' => [
+        'label' => 'édito ' . $page->parent()->title(),
+        'content' => $page->parent()->edito()
+      ],
+      'activeTab' => 'édito ' . $page->parent()->title()
+    ]) ?>    
+    <?php endslot() ?>
+  <?php endsnippet() ?>
+  <?= $page->body() ?>
 </article>
 </main>