style hover link

assets/css/src/header.css

@@ -9,9 +9,6 @@
   padding: var(--unit--vertical) var(--unit--horizontal);
   transition: height 0.2s ease-in-out;
 }
-#main-header.minimized {
-  height: calc(var(--unit--vertical) * 3);
-}
 #logo {
   position: relative;
 }

assets/css/src/tabs.css

@@ -27,15 +27,20 @@ button.toggle.right.open::before {
 
 #tabs {
   position: relative;
-  margin-top: -30svh;
+  margin-top: -25svh;
   margin-bottom: 30svh;
+  transition: margin-top 0.5s ease-in-out;
+}
+
+#tabs.open {
+  margin-bottom: calc(3 * var(--unit--vertical));
 }
 
 .active-tab {
-  max-height: 70vh;
+  max-height: 60svh;
   overflow: auto;
-  margin-top: calc((var(--unit--vertical) * 0.5));
+  margin-top: var(--unit--vertical);
-  transition: height 0.5s ease-in-out;
+  transition: max-height 0.5s ease-in-out;
 }
 
 .page-cover.open .active-tab {

assets/css/src/texts.css

@@ -26,6 +26,28 @@ h4,
 h5,
 p {
   font-weight: var(--font-weight-light);
+  line-height: 1;
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+}
+
+article h2 {
+  margin-bottom: calc(var(--unit--vertical) / 2);
+}
+
+.title-center {
+  --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;
+  font-weight: var(--font-weight-light);
 }
 
 p,
@@ -53,19 +75,6 @@ button,
   font-size: var(--font-size-xxl) !important;
 }
 
-.title-center {
-  --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;
-  font-weight: var(--font-weight-light);
-}
-
 p,
 li,
 button,
@@ -100,6 +109,17 @@ button {
   align-items: center;
 }
 
+a * {
+  transition: font 0.2s ease-in-out;
+}
+
+a.no-line:hover * {
+  font-weight: 250;
+}
+a:not(.no-line):hover {
+  text-decoration: none;
+}
+
 a:not(.no-line) {
   text-decoration: dotted;
   text-decoration-color: #fff;
@@ -108,7 +128,7 @@ a:not(.no-line) {
   text-decoration-thickness: 0.5px;
 }
 
-article p {
+article p:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 

assets/js/script.js

@@ -42,11 +42,4 @@ document.addEventListener("DOMContentLoaded", () => {
   window.addEventListener("scroll", () => {
     toggleLogoState();
   });
-
-  if (
-    navigator.userAgent.toLowerCase().includes("safari") &&
-    window.innerWidth < 800
-  ) {
-    document.querySelector("#tabs").classList.add("safari");
-  }
 });

site/snippets/tabs.php

@@ -6,7 +6,8 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
 
 <nav id="tabs" x-data="{
     activeTab: '<?= $activeTab ?>'
-  }">
+  }"
+  :class="activeTab.length > 0 ? 'open' : 'close'">
     <div class="toggle-btns | flex space-between" style="
     --content:space-between;
     ">
@@ -22,7 +23,9 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
         @click="toggleTab($data, 'texts')"
       >textes</button>
     </div>
-    <div class="active-tab" x-show="activeTab.length > 0">
+    <div 
+      class="active-tab"
+    >
       <section 
       x-show="activeTab === '<?=$left['slug'] ?>'">
         <?= $left['content'] ?>