Display team cards in multiple columns (#51)

* Add 404 page

* Remove redundant css

* Fix build error

* Add link to newsletter

* Display team cards in multiple columns

* fix buggos maybe

* try to fix the thing

* try to raise specificity of selector

* about to give up

* gave up

Author: riazaia

src/components/Header.astro

@@ -25,7 +25,7 @@ const props = Astro.props;
 
 <style>
   header {
-    max-width: var(--body-width);
+    max-width: var(--header-width);
     margin-bottom: 35px;
     display: flex;
     flex-direction: column;

src/layouts/PageLayout.astro

@@ -36,7 +36,8 @@ const {
       }
 
       body {
-        --body-width: 750px;
+        --main-width: 750px;
+        --header-width: 750px;
         --fujo-cream: #f7eedf;
         --fujo-purple: #c29fc9;
         --fujo-red: #ff7976;
@@ -53,10 +54,11 @@ const {
         align-items: center;
         padding-block: 20px;
         padding-inline: 15px;
+        overflow-x: hidden;
       }
 
       main {
-        max-width: min(100%, var(--body-width));
+        max-width: min(100%, var(--main-width));
         padding-bottom: 30px;
         display: flex;
         flex-direction: column;
@@ -172,26 +174,25 @@ const {
       <slot />
       <Socials />
     </main>
+    <style>
+      .learn-site-banner {
+        background-color: rgb(70, 66, 88);
+        color: white;
+        padding-block: 12px;
+        padding-inline: 20px;
+        width: 100vw;
+        margin-top: -20px;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        font-size: 0.9rem;
+        text-wrap: balance;
+      }
+      @media (max-width: 768px) {
+        .learn-site-banner .longer-text {
+          display: none;
+        }
+      }
+    </style>
   </body>
 </html>
-
-<style>
-  .learn-site-banner {
-    background-color: rgb(70, 66, 88);
-    color: white;
-    padding-block: 12px;
-    padding-inline: 20px;
-    width: 100vw;
-    margin-top: -20px;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    font-size: 0.9rem;
-    text-wrap: balance;
-  }
-  @media (max-width: 768px) {
-    .learn-site-banner .longer-text {
-      display: none;
-    }
-  }
-</style>

src/pages/team/index.astro

@@ -89,6 +89,11 @@ const projectsArray = Object.keys(PROJECTS).map((proj) => ({
   :global(h1) {
     margin-bottom: 0;
   }
+
+  body {
+    --main-width: 1200px !important;
+  }
+
   .tabs {
     display: flex;
     flex-wrap: wrap;
@@ -126,7 +131,10 @@ const projectsArray = Object.keys(PROJECTS).map((proj) => ({
   }
 
   .tabs input[type="radio"]:checked + label + .tab-content {
-    display: block;
+    display: flex;
+    gap: 0 0.75rem;
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
   .beta-readers {