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-label.liquid" %}
+    {% include "partials/socials.liquid" %}
   </div>
 </section>

src/_includes/partials/socials-label.liquid

@@ -1,10 +0,0 @@
-<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,5 +1,4 @@
 :root {
-  /* BRAND */
   --sand-50: 249 248 243;
   --sand-100: 242 239 226;
   --sand-200: 227 221 197;
@@ -23,25 +22,4 @@
   --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: var(--icon-color, currentColor);
+  background-color: currentColor;
   display: inline-block;
   flex: 0 0 auto;
   block-size: 1.5rem;

src/scss/components/_variables.scss

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

src/scss/critical.scss

@@ -1,4 +1,3 @@
-@use './components/colors';
 @use './components/variables';
 @use './components/reset';
 @use './components/superminimal';
@@ -16,11 +15,10 @@ html {
   }
 }
 body {
-  /* --start: var(--primary-light);
+  --start: var(--primary-light);
-  --end: var(--secondary);*/
+  --end: var(--secondary);
-  background: rgb(var(--sand-400));
+  background: var(--start);
-  /*background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); */
+  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);  
@@ -81,8 +79,7 @@ main {
   }
 }
 footer {
-  /* background-color: var(--secondary); */
+  background-color: var(--secondary);
-  background-color: rgb(var(--forest-400));
   justify-items: center;
   margin-block-start: 1.5rem;
 
@@ -255,19 +252,6 @@ i {
       --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 {
@@ -301,14 +285,13 @@ i {
       margin-top: -20px;
     }
 
-    &:before {
+    &:after {
       content: '';
       position: absolute;
       aspect-ratio: 1;
       inline-size: var(--size);
       background-color: var(--light-1);
-      border: 6px solid rgb(var(--forest-500));
+      border: 6px solid var(--secondary-dark);
-      /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
       inset-block-end: 50%;
@@ -317,13 +300,6 @@ 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));
-      }
     }
   }
 }
@@ -342,8 +318,7 @@ i {
   }
 
   .btn {
-    color: rgb(var(--forest-200));
+    color: var(--secondary-light);
-    /* color: var(--secondary-light); */
   }
 
   p {