Continue Header, Footer, add SkipNavLink

src/components/GlobalStyles.astro

@@ -14,7 +14,8 @@
     --fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem);
 
     --leading-title: 1.1;
-    --ledaing-subtitle: 1.2;
+    --leading-subtitle: 1.2;
+    --leading-tightest: 0.8;
     --leading-paragraph: 1.5;
     --tracking-tight: -0.0625rem;
     --tracking-narrow: -0.09375rem;
@@ -22,36 +23,37 @@
     --base-grid: repeat(12, 1fr);
     --max-content-width: 1920px;
 
-    --clr-light-400: hsl(0 10% 100%);
-    --clr-light-500: hsl(from var(--clr-light-400) h s calc(l - 10));
-    --clr-dark-400: hsl(0 17.6% 3.3%);
-    --clr-ts-warm-red-400: hsl(3 94% 60%);
+    --clr-light-400: oklch(100% 0.00011 271.152);
+    --clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h);
+    --clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h);
+    --clr-dark-400: oklch(13.306% 0.006 17.794);
+    --clr-ts-red-400: oklch(65.135% 0.21964 28.111);
 
     --gradient-page-title: linear-gradient(
       to bottom,
-      hsl(from var(--clr-light-400) h s l),
-      hsl(from var(--clr-light-400) h s calc(l - 10)),
-      hsl(from var(--clr-light-400) h s calc(l - 20)),
-      hsl(from var(--clr-light-400) h s calc(l - 20)),
-      hsl(from var(--clr-light-400) h s calc(l - 20)),
-      hsl(from var(--clr-light-400) h s calc(l - 40)),
-      hsl(from var(--clr-light-400) h s calc(l - 80))
+      oklch(from var(--clr-light-400) l c h),
+      oklch(from var(--clr-light-400) calc(l - 0.05) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.15) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.35) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.75) c h)
     );
 
     --gradient-heading: linear-gradient(
       to bottom,
-      hsl(from var(--clr-light-400) h s l),
-      hsl(from var(--clr-light-400) h s calc(l - 10)),
-      hsl(from var(--clr-light-400) h s calc(l - 30)),
-      hsl(from var(--clr-light-400) h s calc(l - 80)),
-      hsl(from var(--clr-light-400) h s calc(l - 90))
+      oklch(from var(--clr-light-400) calc(l - 0.05) c h),
+      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%,
+      oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%,
+      /* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 80%, */
+      oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100%
     );
 
     --gradient-overlay: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0.3) 0%,
-      rgba(0, 0, 0, 0) 40%,
-      rgba(0, 0, 0, 0.3) 100%
+      oklch(0% 0 0 / 0.3) 0%,
+      oklch(0% 0 0 / 0) 40%,
+      oklch(0% 0 0 / 0.3) 100%
     );
   }
 
@@ -74,20 +76,8 @@
     font-weight: 600;
   }
 
-  h1 {
-    background: var(--gradient-page-title);
-    background-clip: text;
-    color: transparent;
-  }
-
-  h2 {
-    background: var(--gradient-heading);
-    background-clip: text;
-    color: transparent;
-  }
-
   .heading-gradient {
-    background: var(--gradient-page-title);
+    background: var(--gradient-heading);
     background-clip: text;
     color: transparent;
   }
@@ -95,4 +85,9 @@
   p {
     color: var(--clr-light-500);
   }
+
+  a {
+    color: var(--clr-light-400);
+    text-decoration: none;
+  }
 </style>