adjust styles

assets/css/src/header.css

@@ -42,6 +42,19 @@
   padding-bottom: calc(5 * var(--unit--vertical));
 }
 
+#home .page-cover {
+  padding-top: 30svh;
+}
+
+#category .page-cover {
+  height: auto;
+  padding-bottom: 0;
+  margin-bottom: calc(2 * var(--unit--vertical));
+}
+#category .active-tab {
+  max-height: none;
+}
+
 @media screen and (min-width: 640px) {
   #main-header {
     display: flex;

assets/css/src/html.css

@@ -29,7 +29,7 @@ html {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+  scrollbar-color: transparent transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -44,7 +44,7 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: transparent;
   border-radius: 0px;
   border: none;
 }

assets/css/src/tabs.css

@@ -30,6 +30,7 @@ button.toggle.right.open::before {
   margin-top: -25svh;
   margin-bottom: 30svh;
   transition: margin-top 0.5s ease-in-out;
+  z-index: 1;
 }
 
 #tabs.open {
@@ -42,6 +43,30 @@ button.toggle.right.open::before {
   margin-top: var(--unit--vertical);
   transition: max-height 0.5s ease-in-out;
 }
+/* ================= SCROLLBAR ================= */
+/* Works on Firefox */
+
+.active-tab {
+  scrollbar-width: thin;
+  scrollbar-color: #fff transparent;
+}
+
+/* Works on Chrome, Edge, and Safari */
+
+.active-tab::-webkit-scrollbar {
+  width: 3px;
+  height: auto;
+}
+
+.active-tab::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.active-tab::-webkit-scrollbar-thumb {
+  background-color: #fff;
+  border-radius: 1px;
+  border: none;
+}
 
 .page-cover.open .active-tab {
   height: calc(100svh - 7.5 * var(--unit--vertical));

assets/css/src/texts.css

@@ -8,6 +8,11 @@
   font-style: normal;
 }
 
+.accent {
+  color: var(--color-secondary);
+  font-weight: normal;
+}
+
 * {
   font-family: "Switzer-Variable", sans-serif;
 }
@@ -41,13 +46,20 @@ article h2 {
   --margin-left: calc(4 * var(--unit--horizontal));
   width: calc(100% - var(--margin-left));
   margin-left: var(--margin-left);
+  font-size: var(--font-size-l);
+  line-height: var(--unit--vertical);
 }
 
 .main-title {
-  line-height: 1;
+  line-height: calc(var(--unit--vertical) * 2);
   text-align: left;
   box-sizing: border-box;
   font-weight: var(--font-weight-light);
+  margin-bottom: var(--unit--vertical);
+}
+
+.texts__title {
+  font-size: var(--font-size-l);
 }
 
 p,
@@ -70,9 +82,11 @@ button,
 }
 .fs-xl {
   font-size: var(--font-size-xl) !important;
+  line-height: calc(var(--unit--vertical) * 1.5) !important;
 }
 .fs-xxl {
   font-size: var(--font-size-xxl) !important;
+  line-height: calc(var(--unit--vertical) * 2.5) !important;
 }
 
 p,
@@ -121,8 +135,8 @@ a:not(.no-line):hover {
 }
 
 a:not(.no-line) {
-  text-decoration: dotted;
-  text-decoration-color: #fff;
+  text-decoration: underline;
+  text-decoration-color: inherit;
   text-decoration-line: underline;
   text-underline-offset: 0.2rem;
   text-decoration-thickness: 0.5px;

assets/css/src/variables.css

@@ -3,8 +3,8 @@
   --color-primary: #ffffff;
   --color-primary--transparent: rgba(255, 255, 255, 0.86);
   --color-secondary: rgb(120, 171, 150, 0.86);
-  --color-secondary--light: rgb(119, 177, 157, 0.25);
-  --color-secondary--x-light: rgb(119, 177, 157, 0.15);
+  --color-secondary--light: rgb(119, 177, 157, 0.2);
+  --color-secondary--x-light: rgb(119, 177, 157, 0.1);
 
   --unit--horizontal: 5vw;
   --unit--vertical: 1.7rem;