feat: add base and typography styles, refactor layout for improved structure

Author: sgalcheung

playground/src/layouts/Layout.astro

@@ -1,5 +1,7 @@
 ---
 import "@/styles/global.css";
+import "@/styles/base.css";
+import "@/styles/typography.css";
 import BaseHead from "@/components/BaseHead.astro";
 import Header from "../components/Header.astro";
 ---
@@ -15,7 +17,7 @@ import Header from "../components/Header.astro";
     <main>
       <slot />
     </main>
-    
+
     <script>
       import "preline/preline.js";
     </script>

playground/src/pages/index.astro

@@ -19,7 +19,7 @@ const intros = await getAllIntroductions();
       <div class="container mx-auto my-24">
         <div class="flex flex-col items-center justify-between">
           <div class="flex flex-col items-center gap-y-4 mb-8">
-            <h1 class="text-4xl dark:text-white">
+            <h1 class="ss-h1">
               Welcome to the StarSquid Playground
             </h1>
           </div>
@@ -29,7 +29,7 @@ const intros = await getAllIntroductions();
               const data = intro.data.data;
               return (
                 data && (
-                  <h2 class="text-3xl dark:text-white">
+                  <h2 class="ss-h2">
                     <a
                       class="text-blue-600 hover:underline hover:decoration-blue-800 focus:outline-hidden focus:underline focus:decoration-blue-800 dark:decoration-white"
                       href={routes.intro(data.slug.iv)}
@@ -43,7 +43,7 @@ const intros = await getAllIntroductions();
           }
 
           <sction>
-            <h3 class="text-2xl dark:text-white">This is the backend info:</h3>
+            <h3 class="ss-h3 dark:text-white">This is the backend info:</h3>
             {
               app && (
                 <p class="dark:text-white">
@@ -64,7 +64,7 @@ const intros = await getAllIntroductions();
                     </div>
 
                     <div class="grow pt-0.5 pb-8">
-                      <h3 class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
+                      <h3 class="ss-h3 flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
                         <svg
                           class="shrink-0 size-4 mt-1"
                           xmlns="http://www.w3.org/2000/svg"

playground/src/pages/intro/[slug].astro

@@ -26,7 +26,7 @@ Astro.cookies.set(COLUMN, slug, { path: "/" });
 <Layout>
   <div class="container mx-auto my-24 xl:my-5">
     <header class="flex flex-col items-center sm:mt-24 text-center">
-      <h1 class="mb-6 text-4xl">
+      <h1 class="mb-6 ss-h1">
         {data.title.iv}
       </h1>
     </header>

playground/src/styles/base.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+@reference "./global.css";
+
+* {
+  @apply border-border outline-ring/50;
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+header.scrolled {
+  @apply border-black/25 bg-white/80 saturate-200 backdrop-blur-sm dark:border-white/25 dark:bg-black/50;
+}
+
+/* Adds pointer cursor to buttons */
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+  cursor: pointer;
+}

playground/src/styles/global.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 /* for Shadcn Accordion */
 @import "tw-animate-css";
 
@@ -8,29 +8,15 @@
 /* Defaults hover styles on all devices */
 @custom-variant hover (&:hover);
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-
-  /* Adds pointer cursor to buttons */
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}
-
-header.scrolled {
-  @apply border-black/25 bg-white/80 saturate-200 backdrop-blur-sm dark:border-white/25 dark:bg-black/50;
-}
-
 /* generated by Shadcn */
-
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+  --font-display: var(--font-inter-display), "ui-sans-serif", "system-ui",
+    "sans-serif";
+}
+
+/* generate by Shadcn */
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);

playground/src/styles/typography.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@reference "./global.css";
+
+.ss-h1 {
+  @apply font-display font-medium text-balance text-5xl md:text-6xl;
+}
+
+.ss-h2 {
+  @apply font-display font-medium text-balance text-3xl md:text-4xl;
+}
+
+.ss-h3 {
+  @apply font-display font-medium text-balance text-lg md:text-2xl;
+}
+
+.ss-body-text {
+  @apply leading-relaxed;
+}