Use the new variables in page style

src/_includes/hero.liquid

@@ -3,6 +3,6 @@
     <h1 class="hero-title">{% if subpage.data.displayedTitle %}{{ subpage.data.displayedTitle }}{% else %}{{ subpage.data.title }}{% endif %}</h1>
     <p>{{subpage.data.description}}</p>
     {{ subpage.templateContent }}
-    {% include "partials/socials.liquid" %}
+    {% include "partials/socials-label.liquid" %}
   </div>
 </section>

src/_includes/partials/socials-label.liquid

@@ -0,0 +1,10 @@
+<ul class="list-inline socials-list socials-list--label">
+  {% if author.socials %}
+    {% for social in author.socials %}
+      <li><a href="{{ social.link }}" class="icon--left {{ social.icon }}" target="_blank">{{ social.title }}</a></li>
+    {% endfor %}
+    {% if author.mail %}
+      <li><a href="mailto:{{ author.mail }}" class="icon--left icon-mail" target="_blank">Send me an e-mail</a></li>
+    {% endif %} 
+  {% endif %} 
+</ul>

src/scss/components/_colors.scss

@@ -1,4 +1,5 @@
 :root {
+  /* BRAND */
   --sand-50: 249 248 243;
   --sand-100: 242 239 226;
   --sand-200: 227 221 197;
@@ -22,4 +23,25 @@
   --forest-800: 59 75 41;
   --forest-900: 52 65 38;
   --forest-950: 26 34 17;
+  /* BRAND */
+
+
+
+
+
+  --shark-50: 246 246 246;
+  --shark-100: 231 231 231;
+  --shark-200: 209 209 209;
+  --shark-300: 176 176 176;
+  --shark-400: 136 136 136;
+  --shark-500: 109 109 109;
+  --shark-600: 93 93 93;
+  --shark-700: 79 79 79;
+  --shark-800: 69 69 69;
+  --shark-900: 61 61 61;
+  --shark-950: 30 30 30; // Main
+
+
+  
+  
 }

src/scss/components/_icons.scss

@@ -11,7 +11,7 @@
  &:before, &:after {
   --m-interior: .5rem;
   --m-exterior: -.125rem;
-  background-color: currentColor;
+  background-color: var(--icon-color, currentColor);
   display: inline-block;
   flex: 0 0 auto;
   block-size: 1.5rem;

src/scss/components/_variables.scss

@@ -1,16 +1,14 @@
 :root {
-  --light-1: #efefef;
-  --dark-1: #1e1e1e;
-  --dark-2: #0f0f0f;
+  --light-1: rgb(var(--shark-100));
+  --dark-1: rgb(var(--shark-950));
+  --dark-2: rgb(var(--shark-950) / .95);
 
-  --primary-hsl: 45, 35%, 63%;
-  --primary: hsl(var(--primary-hsl));
-  --primary-light: hsl(45, 36%, 73%);
-  --primary-dark: hsl(46, 20%, 66%);
-  --secondary-hsl: 91, 36%, 71%;
-  --secondary: hsl(var(--secondary-hsl));
-  --secondary-light: hsl(91, 37%, 76%);
-  --secondary-dark: hsl(90, 17%, 62%);
+  --primary: rgb(var(--sand-400));
+  --primary-light: rgb(var(--sand-300));
+  --primary-dark: rgb(var(--sand-500));
+  --secondary: rgb(var(--forest-300));
+  --secondary-light: rgb(var(--forest-200));
+  --secondary-dark: rgb(var(--forest-400));
 
   --background: var(--primary-light);
   --text: var(--dark-1);

src/scss/critical.scss

@@ -1,3 +1,4 @@
+@use './components/colors';
 @use './components/variables';
 @use './components/reset';
 @use './components/superminimal';
@@ -15,10 +16,11 @@ html {
   }
 }
 body {
-  --start: var(--primary-light);
-  --end: var(--secondary);
-  background: var(--start);
-  background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);
+  /* --start: var(--primary-light);
+  --end: var(--secondary);*/
+  background: rgb(var(--sand-400));
+  /*background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); */
+  background: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
 
   header, footer {
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
@@ -79,7 +81,8 @@ main {
   }
 }
 footer {
-  background-color: var(--secondary);
+  /* background-color: var(--secondary); */
+  background-color: rgb(var(--forest-400));
   justify-items: center;
   margin-block-start: 1.5rem;
 
@@ -251,7 +254,20 @@ i {
     &:hover {
       --item-color: black;
     }
-  } 
+  }
+
+  &--label {
+    gap: 1rem;
+
+    a {
+      color: black;
+      --icon-color: #262626;
+      text-decoration: underline;
+      text-underline-offset: .25rem;
+      text-decoration-color: #262626;
+      font-weight: 500;
+    }
+  }
 }
 
 .timeline {
@@ -285,13 +301,14 @@ i {
       margin-top: -20px;
     }
 
-    &:after {
+    &:before {
       content: '';
       position: absolute;
       aspect-ratio: 1;
       inline-size: var(--size);
       background-color: var(--light-1);
-      border: 6px solid var(--secondary-dark);
+      border: 6px solid rgb(var(--forest-500));
+      /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
       inset-block-end: 50%;
@@ -300,6 +317,13 @@ i {
       // inset-block-start: 1.5rem;
       border-radius: 50%;
       z-index: 1;
+      transition: all .2s ease-in-out;
+    }
+
+    &:hover {
+      &:before {
+        border-color: rgb(var(--forest-600));
+      }
     }
   }
 }
@@ -318,7 +342,8 @@ i {
   }
 
   .btn {
-    color: var(--secondary-light);
+    color: rgb(var(--forest-200));
+    /* color: var(--secondary-light); */
   }
 
   p {