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