header style

assets/css/src/header.css

@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   box-sizing: border-box;
-  width: 100%;
+  width: 100vw;
   height: calc(var(--unit--vertical) * 5);
   padding: var(--unit--vertical) var(--unit--horizontal);
   transition: height 0.2s ease-in-out;
@@ -37,11 +37,11 @@
 
 .page-cover {
   box-sizing: border-box;
-  height: 100vh;
+  height: 100svh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding-top: calc(8 * var(--unit--vertical));
+  padding-top: 25svh;
   padding-bottom: calc(5 * var(--unit--vertical));
 }
 

assets/css/src/html.css

@@ -1,7 +1,6 @@
 body {
   position: relative;
   box-sizing: border-box;
-  min-height: 100vh;
   padding: 0 var(--unit--horizontal);
   background-color: var(--color-background);
   color: var(--color-primary);

assets/css/src/tabs.css

@@ -26,16 +26,9 @@ button.toggle.right.open::before {
 }
 
 #tabs {
-  --mg: 4;
   position: relative;
-  margin-top: calc(0px - (2 * var(--unit--vertical)));
-  margin-bottom: calc((var(--mg) / 2) * var(--unit--vertical));
-}
-#tabs.safari {
-  margin-top: calc(-60px - (3 * var(--unit--vertical)));
-}
-#home #tabs {
-  margin-top: calc(0px - (6 * var(--unit--vertical)));
+  margin-top: -30svh;
+  margin-bottom: 30svh;
 }
 
 .active-tab {
@@ -46,7 +39,7 @@ button.toggle.right.open::before {
 }
 
 .page-cover.open .active-tab {
-  height: calc(100vh - 7.5 * var(--unit--vertical));
+  height: calc(100svh - 7.5 * var(--unit--vertical));
 }
 
 .texts__year.short .year__edito {

assets/css/src/texts.css

@@ -19,9 +19,13 @@
   font-weight: var(--font-weight-extra-bold);
 }
 
-h3 {
-  font-size: var(--font-size-l);
-  font-weight: var(--font-weight-bold);
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  font-weight: var(--font-weight-light);
 }
 
 p,
@@ -50,17 +54,16 @@ button,
 }
 
 .title-center {
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight-light);
-  width: 100%;
-  margin-left: calc(5 * var(--unit--horizontal));
+  --margin-left: calc(4 * var(--unit--horizontal));
+  width: calc(100% - var(--margin-left));
+  margin-left: var(--margin-left);
 }
 
 .main-title {
   line-height: 1;
   text-align: left;
   box-sizing: border-box;
-  margin-bottom: 1rem;
+  font-weight: var(--font-weight-light);
 }
 
 p,

assets/css/style.css

@@ -6,5 +6,5 @@
 @import url("src/header.css");
 @import url("src/tabs.css");
 @import url("src/home.css");
-@import url("src/article.css");
+@import url("src/linear.css");
 @import url("src/footer.css");

assets/dist/script.js

@@ -1,16 +1,29 @@
 "use strict";
 
-function openTab(data, tab) {
-  data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
+var remFactor = 16;
+var verticalUnit = 1.3 * remFactor;
+function toggleTab(data, tab) {
+  if (data.activeTab === tab) {
+    scrollToElem("body");
+    setTimeout(function () {
+      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(function () {
-    var yOffset = -185;
+    var yOffset = -7 * verticalUnit;
     var elem = document.querySelector(selector);
     var top = elem.getBoundingClientRect().top;
     window.scrollTo({
       top: top + window.scrollY + yOffset,
-      behavior: "smooth",
+      behavior: "smooth"
     });
   }, 100);
 }
@@ -26,4 +39,7 @@ document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener("scroll", function () {
     toggleLogoState();
   });
-});
+  if (navigator.userAgent.toLowerCase().includes("safari") && window.innerWidth < 800) {
+    document.querySelector("#tabs").classList.add("safari");
+  }
+});