Merge pull request #43 from uclaacm/charles

added responsiveness to team and events page
uclaacm · Jan 5, 2024 · 58ab4f1 · 58ab4f1
2 parents 87a0934 + 5774c74
commit 58ab4f1
Show file tree

Hide file tree

Showing 6 changed files with 3,405 additions and 3,730 deletions.
diff --git a/.env.example b/.env.example
diff --git a/styles/BoardCard.module.scss b/styles/BoardCard.module.scss
@@ -88,3 +88,15 @@
     font-size: 1rem;
   }
 }
+
+@media (max-width: 576px) {
+  .container {
+    width: 25rem;
+  }
+}
+
+@media (max-width: 450px) {
+  .container {
+    width: 21rem;
+  }
+}
diff --git a/styles/EventCard.module.scss b/styles/EventCard.module.scss
@@ -40,8 +40,18 @@
   margin-top: 15px;
 }
 
-@media (max-width: 1175px) {
+@media (max-width: 992px) {
+  .header {
+    text-align: center;
+  }
+
   .body {
-    display: inline;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .body img {
+    min-width: auto;
+    width: auto;
   }
 }
diff --git a/styles/Events.module.scss b/styles/Events.module.scss
@@ -52,3 +52,9 @@
   margin-top: 2rem;
   margin-left: 1rem;
 }
+
+@media (max-width: 576px) {
+  .main {
+    padding: 2rem 3rem;
+  }
+}
diff --git a/styles/Teampage.module.scss b/styles/Teampage.module.scss
@@ -19,16 +19,15 @@
   font-size: 3.5rem;
 }
 
-.description {
-  margin: 1rem;
-  font-size: 1.1rem;
-}
-
 .subtitle {
-  margin: 1rem;
-  font-size: 32px;
+  margin: 1.25rem 1.5rem 0;
+  font-size: 1.75rem;
   line-height: 1;
-  margin-top: 2rem;
+}
+
+.description {
+  margin: 1rem 1.5rem;
+  font-size: 1.1rem;
 }
 
 .boardgrid {
@@ -57,11 +56,42 @@
   // grid-area: card;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
+  .main {
+    padding: 2rem 3rem;
+  }
+
+  .title {
+    font-size: 3rem;
+  }
+
+  .subtitle {
+    margin-top: 0;
+    font-size: 1.6rem;
+  }
+
+  .description {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 576px) {
   .grid {
     width: 100%;
     flex-direction: column;
   }
+
+  .title {
+    margin: 1rem 0;
+  }
+
+  .subtitle {
+    margin-left: 0.5rem;
+  }
+
+  .description {
+    margin-left: 0.5rem;
+  }
 }
 
 @media (prefers-color-scheme: dark) {