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");
     }
   }