.gitignore

@@ -13,3 +13,9 @@ Thumbs.db
 node_modules
 dist
 src/_includes/css
+
+# Custom
+critical_old.scss
+_variables_old.scss
+_variables copy.scss
+_colors_old.scss

src/scss/components/_button.scss

@@ -1,6 +1,6 @@
 .btn {
-  --hover: rgba(var(--neutral-highest), .8);
+  --hover: var(--dark-2);
-  --active: rgba(var(--neutral-highest), .8);
+  --active: var(--dark-2);
   text-decoration: none;
   transition: background-color .1s ease-in-out;
   display: inline-flex;

src/scss/components/_header.scss

@@ -1,5 +1,5 @@
 header {
-  background-color: rgb(var(--brand-primary-medium));
+  background-color: var(--primary);
   position: fixed;
   z-index: 10;
   inset-block-start: 0;

src/scss/components/_variables.scss

@@ -1,9 +1,20 @@
 :root {
+  --light-1: rgb(var(--neutral-lower));
+  --dark-1: rgb(var(--neutral-highest));
+  --dark-2: rgba(var(--neutral-highest), .8);
+
+  --primary: rgb(var(--brand-primary-medium));
+  --primary-light: rgb(var(--brand-primary-low));
+  --primary-dark: rgb(var(--brand-primary-medium));
+  --secondary: rgb(var(--brand-secondary-low));
+  --secondary-light: rgb(var(--brand-secondary-lower));
+  --secondary-dark: rgb(var(--brand-secondary-medium));
+
   --bg-gradient: linear-gradient(180deg, rgb(var(--brand-primary-medium)) 0%, rgb(var(--brand-primary-medium)) 5%, rgb(var(--brand-primary-low)) 30%, rgb(var(--brand-primary-lower)) 50%, rgb(var(--brand-secondary-lower)) 51%, rgb(var(--brand-secondary-low)) 65%, rgb(var(--brand-secondary-medium)) 98%, rgb(var(--brand-secondary-medium)) 100%);
 
-  --background: rgb(var(--brand-primary-low));
+  --background: var(--primary-light);
-  --text: rgb(var(--neutral-highest));
+  --text: var(--dark-1);
-  --text-2: rgba(var(--neutral-highest), .8);
+  --text-2: var(--dark-2);
 
   --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
   --font-italic: "Georgia", serif;

src/scss/critical.scss

@@ -48,6 +48,7 @@ main {
   }
 }
 footer {
+  /* background-color: var(--secondary); */
   background-color: rgb(var(--brand-secondary-medium));
   justify-items: center;
   margin-block-start: 1.5rem;
@@ -76,7 +77,7 @@ footer {
 
 i {
   vertical-align: text-top;
-  fill: var(--fill-color, rgb(var(--brand-primary-low)));
+  fill: var(--fill-color, var(--primary-light));
   display: inline-block;
 
   svg {
@@ -195,7 +196,7 @@ i {
     inline-size: clamp(200px, 100%, 400px);
     aspect-ratio: 1;
     border-radius: 100%;
-    border: 4px solid rgb(var(--brand-primary-medium))
+    border: 4px solid var(--primary-dark)
   }
   
 
@@ -217,21 +218,22 @@ i {
   margin-block-start: 1rem;
   gap: .2rem;
 
+  a {
+    &:hover {
+      --item-color: black;
+    }
+  }
+
   &--label {
     gap: 1rem;
 
     a {
-      --item-color: black;
+      color: black;
       --icon-color: #262626;
       text-decoration: underline;
       text-underline-offset: .25rem;
       text-decoration-color: #262626;
       font-weight: 500;
-
-      &:hover {
-        --item-color: var(--text-2);
-        --icon-color: var(--text-2);
-      }
     }
   }
 }
@@ -247,7 +249,7 @@ i {
     content: '';
     position: absolute;
     inline-size: 6px;
-    background-color: rgb(var(--neutral-lower));
+    background-color: var(--light-1);
     inset: 1.5rem 0 0 1.5rem;
     margin-inline-start: -3px;
   }
@@ -272,8 +274,9 @@ i {
       position: absolute;
       aspect-ratio: 1;
       inline-size: var(--size);
-      background-color: rgb(var(--neutral-lower));
+      background-color: var(--light-1);
       border: 6px solid rgb(var(--brand-secondary-medium));
+      /* border: 6px solid var(--secondary-dark); */
       inset-inline-start: 0;
       // inset-inline-start: .9rem;
       inset-block-end: 50%;