feat: wip copy and styling

src/_includes/components/site-hero.webc

@@ -0,0 +1,59 @@
+<section>
+  <h2>Creative Spaces</h2>
+  <p class="hero-body">for enthusiasts</p>
+  <p class="hero-tagline">
+   The web is for everyone! Unleash your creative potential.
+  </p>
+</section>
+
+<style webc:scoped>
+  :host {
+    display: block;
+    padding-inline: 0.5rem;
+  }
+
+  :host(section) {
+    margin-block-start: 20vh;
+
+    margin-inline: auto;
+    max-width: var(--breakpoint-lg);
+  }
+
+  h2 {
+    font-size: 6.75rem;
+    line-height: 0.8;
+    letter-spacing: -0.3rem;
+    margin-block-end: 1.5rem;
+  }
+
+  .hero-body {
+    font-size: 2.75rem;
+    line-height: 0.8;
+    letter-spacing: -0.3rem;
+  }
+
+  .hero-tagline {
+    margin-block-start: 1.5rem;
+    letter-spacing: -0.05rem;
+    font-style: italic;
+  }
+
+  @media(min-width: 768px) {
+    :host {
+      padding-inline: 1rem;
+    }
+
+    h2 {
+      font-size: 9rem;
+      margin-block-end: 2.25rem;
+    }
+
+    .hero-body {
+      font-size: 2.5rem;
+    }
+
+    .hero-tagline {
+      margin-block-start: 1.75rem;
+    }
+  }
+</style>

src/_includes/layouts/base.css

@@ -22,8 +22,6 @@
     min-height: 100%;
     background-color: var(--bg-base);
 
-    /* TODO Is this what I want?  */
-    font-family: "Helvetica Neue", Verdana, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     line-height: 1.5rem;
   }
 
@@ -78,22 +76,29 @@
     scroll-behavior: smooth;
   }
 
+  body {
+    font-family: var(--font-base, sans-serif);
+  }
+
+  h1, h2, h3, h4, h5, h6, p {
+    max-width: 60ch;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading, sans-serif);
+  }
+
   h1 {
     font-size: 2.25rem;
-    line-height: 2.5rem;
     font-weight: 700;
     margin-block-end: 1.5rem;
   }
 
   h2 {
     font-size: 1.5rem;
-    line-height: 2rem;
 
     color: var(--text-secondary);
     font-weight: 700;
-    text-decoration-line: underline;
-    text-decoration-thickness: 4px;
-    text-decoration-color: var(--decoration-secondary-inverted);
     margin-block-end: 0.75rem;
   }
 
@@ -107,10 +112,6 @@
     list-style-position: inside;
   }
 
-  ul > li::marker {
-    color: var(--decoration-accent); 
-  }
-
   a {
     font-weight: 700;
     color: var(--text-base);
@@ -151,7 +152,6 @@
 
     h2 {
       font-size: 1.875rem;
-      line-height: 2.25rem;
       margin-block-end: 1rem;
     }
   }
@@ -177,15 +177,14 @@
     --color-base-fg: oklch(var(--_clr-base-fg));
     --color-accent: oklch(var(--_clr-accent));
     --color-section: oklch(var(--_clr-section));
-  }
 
-  /* TODO Replace with proper font face with font weights */
-  body {
-    font-family: 'Quicksand', sans-serif;
+    /* FONTS */
+    --font-heading: "Protest Riot";
+    --font-base: "Poppins";
   }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Patua One', serif;
+  
+  p, ol, ul, li {
+    font-size: 1.125rem;
   }
 
   @media(prefers-color-scheme: dark) {

src/_includes/layouts/base.webc

@@ -11,6 +11,9 @@
     >
     <meta name="color-scheme" content="dark light">
     <link rel="stylesheet" href="base.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap" rel="stylesheet" webc:keep>
     <style @raw="getBundle('css')" webc:keep></style>
 		<script @raw="getBundle('js')" webc:keep></script>
   </head>

src/index.webc

@@ -3,6 +3,74 @@ layout: layouts/base.webc
 ---
 <h1 class="sr-only">Creative Spaces for enthusiasts</h1>
 <site-hero></site-hero>
-<p class="hero-body">
-  The web is for everyone! Unleash your creative potential.
-</p>
+<section class="our-mission-section">
+  <header>
+    <h2 class="small-heading">Our mission</h2>
+    <p>Provide a safe space to be creative</p>
+    <p>A sandbox environment to test new ideas, get feedback, or simply just to be creative.</p>
+  </header>
+
+  <ul>
+    <li>
+      <!-- TODO Add icon -->
+      <section>
+        <h3>Unleash your creativity</h3>
+        <p>Have you wanted to dive deeper into CSS-only animations? Or have you wondered what the limits of building something using no JavaScript?</p>
+      </section>
+    </li>
+    <li>
+      <!-- TODO Add icon -->
+      <section>
+        <h3>Tinker and experiment</h3>
+        <p>What if you replaced React for another framework? How does that impact developer experience and user experience in ways that you care?</p>
+      </section>
+    </li>
+    <li>
+      <!-- TODO Add icon -->
+      <section>
+        <h3>Bring your own project</h3>
+        <p>Have you been sitting on an App idea for a while? Like a dating app for Chinchillas or a 3D game in React?</p>
+      </section>
+    </li>
+    <li>
+      <!-- TODO Add icon -->
+      <section>
+        <h3>Collaborate</h3>
+        <p>Work with someone on a project they've already have started.</p>
+      </section>
+    </li>
+  </ul>
+</section>
+
+<style webc:scoped>
+  :host(.our-mission-section) {
+    margin-block-start: 4rem;
+    padding-inline: 0.5rem;
+  }
+
+  :host(.our-mission-section > header) {
+    max-width: var(--breakpoint-md);
+    margin-inline: auto;
+  }
+
+  :host(.our-mission-section > ul) {
+    max-width: var(--breakpoint-lg);
+    margin-inline: auto;
+  }
+
+  :host(.small-heading) {
+    font-style: var(--font-base);
+  }
+
+  @media(min-width: 768px) {
+    :host(.our-mission-section) {
+      margin-block-start: 5rem;
+      padding-inline: 1rem;
+    }
+
+    :host(.our-mission-section > ul) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>