cleaner branding component and features documentation

Author: KTibow

src/routes/+page.server.ts

@@ -0,0 +1,8 @@
+import type { PageLoad } from "./$types";
+export const load: PageLoad = async () => {
+  const r1 = fetch("https://api.github.com/repos/KTibow/m3-svelte");
+  const r2 = fetch("https://discord.com/api/v10/invites/sRzVYM9b47?with_counts=true");
+  const { stargazers_count } = await (await r1).json();
+  const { approximate_member_count } = await (await r2).json();
+  return { stars: stargazers_count as number, members: approximate_member_count as number };
+};

src/routes/+page.svelte

@@ -64,7 +64,7 @@
   <title>M3 Svelte</title>
   <meta
     name="description"
-    content="Implements the Material 3 design system in Svelte, cleanly, robustly, and across components, animations, and theming."
+    content="The Material 3 design system in Svelte, cleanly, robustly, and across components, animations, and theming."
   />
 </svelte:head>
 

src/routes/Branding.svelte

@@ -1,48 +1,122 @@
-<script>
-  import iconSquoosh from "@ktibow/iconset-material-symbols/fullscreen-exit-rounded";
-  import iconInject from "@ktibow/iconset-material-symbols/vaccines-outline-rounded";
-  import Icon from "$lib/misc/Icon.svelte";
-  import Branding from "./Branding.svelte";
+<script lang="ts">
+  import { page } from "$app/state";
+  import { resolve } from "$app/paths";
+
+  const name = "M3 Svelte";
+  const description = "implements the Material 3 design system in Svelte.";
+  const github = "https://github.com/KTibow/m3-svelte";
 </script>
 
-<div class="wrapper">
-  <Branding />
-  <div class="pills">
-    <div class="pill">
-      <Icon icon={iconInject} />
-      Now injecting globals
-    </div>
-    <div class="pill">
-      <Icon icon={iconSquoosh} />
-      Smallest CSS yet
-    </div>
-  </div>
+<div class="branding">
+  <h1>
+    <img src="https://ktibow.github.io/favicon.svg" alt="KTibow's" width="48" height="48" />
+    {name}
+  </h1>
+  <p>{description}</p>
+  <a href={github}>
+    <p>GitHub</p>
+    <p class="supporting">{page.data.stars} stars</p>
+  </a>
+  <a href="https://discord.gg/sRzVYM9b47">
+    <p>Discord</p>
+    <p class="supporting">{page.data.members} members</p>
+  </a>
+  <a href={resolve("/docs/features")}>
+    <p>Features...</p>
+    <p class="supporting">Powerful yet lean</p>
+  </a>
 </div>
 
 <style>
-  .wrapper {
+  .branding {
+    --transition: var(--m3-timing-function-emphasized) 500ms;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 1.5rem;
-    padding: 6rem 0;
-  }
-  .pills {
-    @apply --m3-label-large;
-    display: flex;
     justify-content: center;
+    border-radius: 1.5rem;
+    background-color: var(--m3c-primary-container-subtle);
+    color: var(--m3c-on-primary-container-subtle);
+    transition: var(--transition);
+    overflow: hidden;
 
-    gap: 0.5rem;
-    flex-wrap: wrap;
-  }
-  .pill {
-    background-color: var(--m3c-surface-container-low);
+    margin-block: 6rem;
+    margin-inline: auto;
 
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0 1rem;
-    border-radius: 2rem;
+    /* COLLAPSED STATE */
+    &:not(:hover, :has(a:focus-visible)) {
+      > h1 {
+        > img {
+          width: 0;
+          height: 0;
+          opacity: 0;
+          margin-right: 0;
+        }
+      }
+      > p,
+      > a {
+        height: 0;
+        margin: 0 -2rem;
+        opacity: 0;
+        padding-block: 0;
+        pointer-events: none;
+      }
+    }
+
+    /* EXPANDED ELEMENTS */
+    h1 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      @apply --m3-display-large;
+      font-weight: bold;
+      margin-block: 0.5rem;
+      margin-inline: 1rem;
+      transition: var(--transition);
+
+      img {
+        width: 1em;
+        height: 1em;
+        border-radius: var(--m3-shape-full);
+        background-color: var(--m3c-surface);
+        margin-right: 1rem;
+        transition: var(--transition);
+      }
+    }
+
+    /* Description paragraph */
+    & > p {
+      height: 1.5rem;
+      margin: 0;
+      margin-inline: 1rem;
+      overflow: hidden;
+      white-space: nowrap;
+      transition: var(--transition);
+    }
+
+    /* Link "Buttons" */
+    a {
+      @apply --m3-focus-inward;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 3rem;
+      padding-inline: 1rem;
+      border-radius: 1.5rem;
+      margin-top: 0.5rem;
+      background-color: var(--m3c-primary-container);
+      color: var(--m3c-on-primary-container);
+      text-decoration: none;
+      transition: var(--transition);
+      overflow: hidden;
+
+      p {
+        margin: 0;
+      }
+
+      .supporting {
+        font-size: 0.85rem;
+        opacity: 0.8;
+      }
+    }
   }
 </style>