refactor: Move old components to old folders, start new website impl

src/components/GlobalStyles.astro

@@ -1,86 +1,45 @@
 <style is:global>
-    @import url("../styles/archivo.css");
-    @import url("../styles/clash-display.css");
+  @import url("../styles/archivo.css");
+  @import url("../styles/clash-display.css");
 
-    :root {
-        --clr-ts-warm-red: hsl(3, 94%, 60%);
-        --clr-ts-dark: hsl(7, 18%, 10%);
-        --clr-ts-dark-logo: hsl(7, 18%, 13%);
-        --clr-ts-light: hsl(349, 57%, 91%);
+  :root {
+    --clr-light-400: hsl(0, 0%, 100%);
+    --clr-dark-400: hsl(0, 17.6%, 3.3%);
 
-        --ff-heading: "Clash Display", sans-serif;
-        --ff-body: "Archivo", sans-serif;
+    --clr-ts-warm-red-400: hsl(3, 94%, 60%);
 
-        --fs-xl: clamp(2.125rem, 5vw + 1rem, 6rem);
-        --fs-600: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem);
-        --fs-500: 1.125rem;
-        --fs-400: 1rem;
-        --fs-300: 0.75rem;
-    }
+    --gradient-heading: linear-gradient(
+      to bottom,
+      hsla(from var(--clr-light-400) h s l / 100%),
+      hsla(from var(--clr-light-400) h s l / 70%),
+      hsla(from var(--clr-light-400) h s l / 50%)
+    );
+  }
 
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
+  body {
+    background-color: var(--clr-dark-400);
+    /*color: hsla(from var(--clr-light-400) h s l / 90%);*/ /* Syntax to create hsla from hsl*/
+    color: white;
+  }
 
-    body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        font-family: var(--ff-body);
-        font-size: var(--fs-400);
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
 
-        background-color: var(--clr-ts-dark);
-        color: var(--clr-ts-light);
-        -webkit-font-smoothing: antialiased;
-    }
+  h1,
+  h2,
+  h3 {
+    background: var(--gradient-heading);
+    background-clip: text;
+    color: transparent;
+  }
 
-    .sr-only {
-        position: absolute !important;
-        overflow: hidden !important;
-        white-space: nowrap !important;
-        width: 1px !important;
-        height: 1px !important;
-        margin: -1px !important;
-        padding: 0 !important;
-        border: 0 !important;
-        clip: rect(1px 1px 1px 1px) !important;
-        -webkit-clip-path: inset(50%) !important;
-        clip-path: inset(50%) !important;
-    }
-
-    .content {
-        max-width: 82ch;
-
-        & > * + * {
-            margin-top: 0.25em;
-        }
-
-        & a {
-            display: inline-block;
-            width: max-content;
-            position: relative;
-            font-weight: 500;
-            color: var(--clr-ts-warm-red);
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        font-family: var(--ff-heading);
-    }
-
-    h1 {
-        max-width: 16ch;
-        font-size: var(--fs-xl);
-        font-weight: 700c;
-        text-transform: uppercase;
-        line-height: 1.1;
-        letter-spacing: 0.0333em;
-    }
+  h1 {
+    max-width: 16ch;
+    font-size: 5.625rem;
+    line-height: 1.1;
+    font-weight: 600;
+  }
 </style>