From 1fa9bf1e10be1ccd3aaf020f687031da0c8e109f Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 12 Mar 2024 17:38:53 +0100
Subject: [PATCH] style hover link

---
 assets/css/src/header.css |  3 ---
 assets/css/src/tabs.css   | 13 +++++++----
 assets/css/src/texts.css  | 48 +++++++++++++++++++++++++++------------
 assets/js/script.js       |  7 ------
 site/snippets/tabs.php    |  7 ++++--
 5 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/assets/css/src/header.css b/assets/css/src/header.css
index aaa93dc..c6cc7cc 100644
--- a/assets/css/src/header.css
+++ b/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;
 }
diff --git a/assets/css/src/tabs.css b/assets/css/src/tabs.css
index ca12a67..d25edf6 100644
--- a/assets/css/src/tabs.css
+++ b/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));
-  transition: height 0.5s ease-in-out;
+  margin-top: var(--unit--vertical);
+  transition: max-height 0.5s ease-in-out;
 }
 
 .page-cover.open .active-tab {
diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css
index cc82e25..367fb12 100644
--- a/assets/css/src/texts.css
+++ b/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);
 }
 
diff --git a/assets/js/script.js b/assets/js/script.js
index 7456e50..dc2d168 100644
--- a/assets/js/script.js
+++ b/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");
-  }
 });
diff --git a/site/snippets/tabs.php b/site/snippets/tabs.php
index 920b3f6..039f2e1 100644
--- a/site/snippets/tabs.php
+++ b/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'] ?>