From 2137484680181102ec9dcb4c2f4ed9c30facc799 Mon Sep 17 00:00:00 2001
From: jinkang-0 <jinkang.fang@gmail.com>
Date: Wed, 3 Jan 2024 23:11:35 -0800
Subject: [PATCH] fix: styling issues

---
 package.json                |   4 +-
 src/components/Header.astro |  36 ++++-----
 src/components/Hero.astro   | 101 ++++++++++++------------
 src/layouts/Container.astro |  14 ++--
 src/layouts/Layout.astro    | 152 ++++++++++++++++++------------------
 src/pages/index.astro       |  36 ++++-----
 6 files changed, 172 insertions(+), 171 deletions(-)

diff --git a/package.json b/package.json
index e72d476..506686e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
     "lint:check": "npx eslint .",
     "lint:fix": "npx eslint . --fix",
     "prettier:check": "npx prettier --check .",
-    "prettier:fix": "npx prettier --write ."
+    "prettier:fix": "npx prettier --write .",
+    "compile:check": "npx tsc --noEmit",
+    "check": "npm run lint:check && npm run prettier:check && npm run compile:check"
   },
   "dependencies": {
     "@astrojs/check": "^0.3.4",
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 075ff3e..345869b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,26 +1,26 @@
 ---
-import NavBar from "./Navbar";
-import Hero from "./Hero.astro";
+import NavBar from './Navbar';
+import Hero from './Hero.astro';
 ---
 
 <header>
-    <NavBar
-        links={[
-            { name: "About", url: "#about" },
-            { name: "Non Profits", url: "#nonprofits" },
-            { name: "Schedule", url: "#schedule" },
-            { name: "FAQ", url: "#faq" }
-        ]}
-        client:load
-    />
-    <Hero />
+  <NavBar
+    links={[
+      { name: 'About', url: '#about' },
+      { name: 'Non Profits', url: '#nonprofits' },
+      { name: 'Schedule', url: '#schedule' },
+      { name: 'FAQ', url: '#faq' },
+    ]}
+    client:load
+  />
+  <Hero />
 </header>
 
 <style>
-    header {
-        min-height: 100svh;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
+  header {
+    min-height: 100svh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 </style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 9993846..4d6e964 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,68 +1,67 @@
 <div class="container">
-    <main>
-        <div>
-            <h3 class="gray">Cal Hacks x Blueprint</h3>
-            <h1>Hack the Bay</h1>
-            <div class="spacer"></div>
-        </div>
-        <div>
-            <h2>February 25, 2024</h2>
-            <p class="gray">
-                Pauley Ballroom @ University of California, Berkeley
-            </p>
-            <p class="spacer">
-                We are connecting a community of leaders, creators, and change
-                makers to tackle social challenges.
-            </p>
-            <h4 class="spacer">
-                Registration is opening soon — stay tuned! In the meantime,
-                follow @calblueprint and @calhacks on Instagram for updates.
-            </h4>
-        </div>
-    </main>
-    <aside></aside>
+  <main>
+    <div>
+      <h3 class="gray">Cal Hacks x Blueprint</h3>
+      <h1>Hack the Bay</h1>
+      <div class="spacer"></div>
+    </div>
+    <div>
+      <h2>February 25, 2024</h2>
+      <p class="gray">Pauley Ballroom @ University of California, Berkeley</p>
+      <p class="spacer">
+        We are connecting a community of leaders, creators, and change makers to
+        tackle social challenges.
+      </p>
+      <h4 class="spacer">
+        Registration is opening soon — stay tuned! In the meantime, follow
+        @calblueprint and @calhacks on Instagram for updates.
+      </h4>
+    </div>
+  </main>
+  <aside></aside>
 </div>
 
 <style lang="scss">
-    @use "../styles/breakpoints" as breakpoints;
+  @use '../styles/breakpoints' as breakpoints;
+  @use '../styles/colors' as colors;
 
-    .container {
-        display: flex;
-        flex-grow: 1;
-        width: 100%;
-        padding-left: 1rem;
-        position: relative;
+  .container {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    padding-left: 1rem;
+    position: relative;
 
-        @media (min-width: breakpoints.$laptop) {
-            padding: 0 5rem 5rem 5rem;
-        }
+    @media (min-width: breakpoints.$laptop) {
+      padding: 0 5rem 5rem 5rem;
     }
+  }
 
-    main {
-        margin: auto 0;
+  main {
+    margin: auto 0;
 
-        div:last-child {
-            width: 60%;
-        }
+    div:last-child {
+      width: 60%;
     }
+  }
 
-    .gray {
-        color: var(--col-gray);
-    }
+  .gray {
+    color: colors.$gray;
+  }
 
-    div.spacer {
-        height: 0.5rem;
+  div.spacer {
+    height: 0.5rem;
 
-        @media (min-width: 500px) {
-            visibility: hidden;
-        }
+    @media (min-width: breakpoints.$phone) {
+      visibility: hidden;
     }
+  }
 
-    p.spacer {
-        margin-top: 1.5rem;
-    }
+  p.spacer {
+    margin-top: 1.5rem;
+  }
 
-    h4.spacer {
-        margin-top: 4rem;
-    }
+  h4.spacer {
+    margin-top: 4rem;
+  }
 </style>
diff --git a/src/layouts/Container.astro b/src/layouts/Container.astro
index 2ad896f..fd9c56e 100644
--- a/src/layouts/Container.astro
+++ b/src/layouts/Container.astro
@@ -1,12 +1,12 @@
 <main>
-    <slot />
+  <slot />
 </main>
 
 <style>
-    main {
-        min-height: 100svh;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
+  main {
+    min-height: 100svh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fb13c7b..f551930 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,8 +1,8 @@
 ---
-import "@fontsource-variable/lexend-deca";
+import '@fontsource-variable/lexend-deca';
 
 interface Props {
-    title: string;
+  title: string;
 }
 
 const { title } = Astro.props;
@@ -10,93 +10,93 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="description" content="Astro description" />
-        <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
-    </head>
-    <body>
-        <slot />
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
 </html>
 
 <style is:global lang="scss">
-    @use "../styles/breakpoints.scss" as breakpoints;
-    @use "../styles/colors.scss" as colors;
-
-    html {
-        font-family: "Lexend Deca Variable", system-ui, sans-serif;
-        background: colors.$background;
-    }
-
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    /* text styles */
+  @use '../styles/breakpoints.scss' as breakpoints;
+  @use '../styles/colors.scss' as colors;
+
+  html {
+    font-family: 'Lexend Deca Variable', system-ui, sans-serif;
+    background: colors.$background;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* text styles */
+  h1 {
+    font-size: 3rem;
+    line-height: 1;
+    font-weight: 700;
+  }
+
+  h2 {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 1;
+  }
+
+  h4,
+  p {
+    font-size: 0.75rem;
+    font-weight: 300;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  button {
+    background: none;
+    border: none;
+  }
+
+  /* large screens */
+  @media (min-width: breakpoints.$tablet) {
     h1 {
-        font-size: 3rem;
-        line-height: 1;
-        font-weight: 700;
+      font-size: 6rem;
     }
 
     h2 {
-        font-size: 0.875rem;
-        font-weight: 500;
-        line-height: 1.25;
+      font-size: 2.25rem;
+      line-height: 2.5rem;
     }
 
     h3 {
-        font-size: 0.75rem;
-        font-weight: 300;
-        line-height: 1;
+      font-size: 1.5rem;
+      line-height: 2rem;
     }
 
-    h4,
-    p {
-        font-size: 0.75rem;
-        font-weight: 300;
+    h4 {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
     }
 
-    a {
-        color: inherit;
-        text-decoration: none;
-    }
-
-    button {
-        background: none;
-        border: none;
-    }
-
-    /* large screens */
-    @media (min-width: breakpoints.$tablet) {
-        h1 {
-            font-size: 6rem;
-        }
-
-        h2 {
-            font-size: 2.25rem;
-            line-height: 2.5rem;
-        }
-
-        h3 {
-            font-size: 1.5rem;
-            line-height: 2rem;
-        }
-
-        h4 {
-            font-size: 1.25rem;
-            line-height: 1.75rem;
-        }
-
-        p {
-            font-size: 1.125rem;
-            line-height: 1.75rem;
-        }
+    p {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
     }
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8bcae38..bcbf362 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,23 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Container from "../layouts/Container.astro";
-import Header from "../components/Header.astro";
-import About from "../components/About.astro";
-import NonProfits from "../components/NonProfits.astro";
-import Schedule from "../components/Schedule.astro";
-import FAQ from "../components/FAQ.astro";
-import Contact from "../components/Contact.astro";
-import Footer from "../components/Footer.astro";
+import Layout from '../layouts/Layout.astro';
+import Container from '../layouts/Container.astro';
+import Header from '../components/Header.astro';
+import About from '../components/About.astro';
+import NonProfits from '../components/NonProfits.astro';
+import Schedule from '../components/Schedule.astro';
+import FAQ from '../components/FAQ.astro';
+import Contact from '../components/Contact.astro';
+import Footer from '../components/Footer.astro';
 ---
 
 <Layout title="Hack the Bay">
-    <Container>
-        <Header />
-        <About />
-        <NonProfits />
-        <Schedule />
-        <FAQ />
-        <Contact />
-        <Footer />
-    </Container>
+  <Container>
+    <Header />
+    <About />
+    <NonProfits />
+    <Schedule />
+    <FAQ />
+    <Contact />
+    <Footer />
+  </Container>
 </Layout>