Responsive website :)

acmcsufoss · Sep 18, 2024 · e8d24bb · e8d24bb
1 parent f741544
commit e8d24bb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -15,7 +15,7 @@ import { Image } from "astro:assets";
           width={32}
           height={32}
         />
-        acmcsufoss
+        <span class="desktop"> acmcsufoss </span>
       </a>
     </div>
     <div>
@@ -26,7 +26,7 @@ import { Image } from "astro:assets";
           width={32}
           height={32}
         />
-        acmCSUF
+        <span class="desktop"> acmCSUF </span>
       </a>
     </div>
   </div>
@@ -55,4 +55,14 @@ import { Image } from "astro:assets";
     justify-content: center;
     gap: 0.25rem;
   }
+
+  .desktop {
+    display: none;
+  }
+
+  @media screen and (min-width: 640px) {
+    .desktop {
+      display: inline;
+    }
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -50,7 +50,7 @@ const { title } = Astro.props;
     --ff-custom: "Fira Code", "monospace";
 
     --color-primary: #212121;
-    --color-secondary: #313332;
+    --color-secondary: #2f2f2f;
     --color-contrast: #f5f5f5;
 
     --color-oss-team: #11d4b1;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,7 +9,12 @@ import Layout from "../layouts/Layout.astro";
   <main>
     <h1>FIRST CONTRIBUTIONS</h1>
     <h2>
-      <span class="oss"> Open Source Software </span> Team | ACM at CSUF
+      <div class="subtitle">
+        <span>
+          <span class="oss"> Open Source Software </span> Team
+        </span>
+        <span> ACM at CSUF </span>
+      </div>
     </h2>
     <div class="semester-links">
       <a href="/1st/fa24">Fall 2024 Contributors</a>
@@ -21,12 +26,17 @@ import Layout from "../layouts/Layout.astro";
 <style>
   h1 {
     margin: 0;
-    font-size: 4rem;
+    font-size: 2rem;
   }
 
   h2 {
     margin: 0;
-    font-size: 2.5rem;
+    font-size: 1.25rem;
+  }
+
+  .subtitle {
+    display: flex;
+    flex-direction: column;
   }
 
   .semester-links {
@@ -39,4 +49,14 @@ import Layout from "../layouts/Layout.astro";
   .semester-links > a {
     color: white;
   }
+
+  @media screen and (min-width: 640px) {
+    h1 {
+      font-size: 4rem;
+    }
+
+    h2 {
+      font-size: 2.5rem;
+    }
+  }
 </style>
diff --git a/src/pages/sp24.astro b/src/pages/sp24.astro
@@ -78,8 +78,7 @@ const contributors: MarkdownEntry[] = Object.values(
   <style>
     main {
       max-width: 60ch;
-      margin: 2rem auto;
-      padding: 1rem 2rem;
+      margin: 0 auto;
     }
 
     h1 {