feat: ✨ update home page with new design

src/index.webc

@@ -17,17 +17,26 @@
 </script>
 
 <main>
-  <section class="beta-note">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-    <p>
+    <path
-      <strong>🏗️ Work in progress! 🚧</strong> Please note that while most of this site is close to
+      d="M0 324.5C-35.1 298.7 -70.1 272.9 -106.4 256.8C-142.7 240.8 -180.1 234.6 -215 215C-249.8 195.3 -282 162.2 -299.8 124.2C-317.6 86.1 -321.1 43.1 -324.5 0L0 0Z"
-      98% done, it is still being worked on and contents are subject to change.
+    ></path>
-    </p>
+    <path
-    <ref-button class="btn">Okie-dokie!</ref-button>
+      d="M0 -324.5C47.4 -325.2 94.7 -325.9 124.2 -299.8C153.6 -273.7 165.2 -220.7 186.7 -186.7C208.2 -152.6 239.6 -137.4 264.2 -109.4C288.9 -81.5 306.7 -40.7 324.5 0L0 0Z"
-  </section>
+    ></path>
+  </svg>
 
-  <section class="intro">
+  <header>
-    <h1>Sebin's Characters</h1>
+    <h1>
+      The World of<br />
+      <span>Sebin's Characters!</span>
+    </h1>
+    <p @text="description"></p>
 
+    <a href="#intro">Jump in!</a>
+  </header>
+
+  <section id="intro" class="intro">
     <p>Hiya! 👋🏻 Welcome to my character reference page! 😊</p>
     <p>
       This is where you can learn all about my characters with detailed descriptions and lore about
@@ -48,71 +57,185 @@
       I put a lot of effort into giving all of them a home and I hope you'll find the information
       provided enlightening and insightful. Have fun!
     </p>
+    <a href="#characters">Meet the crew!</a>
   </section>
 
-  <h2 class="char-select">Select Your Character</h2>
+  <section id="characters" class="char-select">
+    <h2>Select Your Character</h2>
 
-  <div class="characters">
+    <div class="characters">
-    <card webc:for="char of characters" :href="`/${char}/`">
+      <card webc:for="char of characters" :href="`/${char}/`">
-      <eleventy-image
+        <eleventy-image
-        slot="image"
+          slot="image"
-        :src="getAvatar(char)"
+          :src="getAvatar(char)"
-        :alt="getAltText(char)"
+          :alt="getAltText(char)"
-        :width="[500,1000]"
+          :width="[500,1000]"
-      ></eleventy-image>
+        ></eleventy-image>
-      <h2 slot="title" @text="getCharacterName(char)"></h2>
+        <h3 slot="title" @text="getCharacterName(char)"></h3>
-      <p @text="getDescription(char)"></p>
+        <p @text="getDescription(char)"></p>
-    </card>
+      </card>
-  </div>
+    </div>
+  </section>
 </main>
 
 <style>
-  main {
+  svg {
-    margin: auto;
+    position: fixed;
-    padding: 1em;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    z-index: -1;
+  }
+
+  svg path {
+    --scale: 0.75;
+    --fill: oklch(40% 60% 220deg / 0.5);
+
+    fill: var(--fill);
+
+    @media (min-width: 32em) {
+      --scale: 1;
+    }
+
+    @media (min-width: 64em) {
+      --scale: 1.5;
+    }
+
+    @media (min-width: 80em) {
+      --scale: 1.75;
+    }
+
+    @media (min-width: 120em) {
+      --scale: 2;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      --fill: oklch(40% 60% 220deg);
+    }
+  }
+
+  svg path:first-child {
+    transform: translate(100%, 0) scale(var(--scale));
+  }
+
+  svg path:last-child {
+    transform: translate(0, 100%) scale(var(--scale));
+  }
+
+  header {
+    position: relative;
+    display: grid;
+    grid-auto-rows: min-content;
+    justify-content: center;
+    justify-items: center;
+    align-content: center;
+    align-items: center;
+    gap: 1em;
+
+    text-align: center;
+    text-wrap: balance;
+
+    min-height: 100vh;
+
+    background: url('/img/home-bg.svg');
+  }
+
+  header h1 {
+    font-size: clamp(2.125em, 8vw, 4.5em);
+    max-width: 20ch;
+    margin: 0;
+  }
+
+  header h1 span {
+    --clr-accent-1: oklch(58% 0.16 33deg);
+    --clr-accent-2: oklch(78% 0.13 68deg);
+
+    color: transparent;
+
+    background: linear-gradient(var(--clr-accent-1) 35%, var(--clr-accent-2) 100%);
+    background-clip: text;
+  }
+
+  header p {
+    --font-size: 1em;
+
+    font-size: var(--font-size);
+    color: oklch(from var(--clr-text) 50% c h);
+    max-width: 65ch;
+    margin: 0;
+
+    @media (min-width: 35em) {
+      --font-size: 1.25em;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(from var(--clr-text) 70% c h);
+    }
+  }
+
+  a:not([class])[href^='#'] {
+    --clr-accent: oklch(40% 60% 220deg);
+
+    display: block;
+    justify-self: center;
+
+    color: var(--theme-c-primary-100);
+    text-decoration: none;
+
+    background: var(--clr-accent);
+    box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
+
+    border-radius: 0.75em;
+    padding-block: 0.75em;
+    padding-inline: 1.25em;
+
+    transition: background-color 0.4s ease;
+
+    &:hover {
+      background: oklch(from var(--clr-accent) 50% c h);
+    }
   }
 
   .intro {
+    display: grid;
+    align-content: center;
+    gap: 1em;
+
+    min-height: 100vh;
     max-width: 65ch;
     margin: auto;
+    padding-inline: 1em;
   }
 
-  .intro h1 {
+  .intro > * {
-    font-size: clamp(2.125em, 10vw, 4em);
+    margin-block: 0;
-    text-align: center;
   }
 
   .char-select {
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    gap: 2em;
+
+    min-height: 100vh;
+    padding-block: 2em;
+  }
+
+  .char-select > h2 {
     font-size: clamp(1.75em, 8vw, 3em);
     text-align: center;
+    margin: 0;
   }
 
   .characters {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
+    justify-content: center;
+    align-content: center;
     gap: 1.5em;
+
     width: 90vw;
     max-width: 100ch;
-    margin: auto;
-  }
-
-  .beta-note {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1em;
-
-    background-color: var(--clr-box-background);
-
-    margin: auto;
-
-    border: 0.125em solid var(--clr-box-border);
-    border-radius: 1em;
-    padding: 1em;
-  }
-
-  .beta-note > * {
-    margin-block: 0;
   }
 </style>