Merge branch 'main' into calvin-mobile-fixes

acmucsd · Sep 25, 2023 · 060095c · 060095c
2 parents f49e9e2 + 947404e
commit 060095c
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/src/sections/Timer/index.tsx b/src/sections/Timer/index.tsx
@@ -88,7 +88,20 @@ const TimerHero: React.FC = () => {
           </div>
         </div>
         <div className={s.description__info}>
-        ACM Projects is our quarterly projects program where students work in a tight knit team. The program gives students the opportunity to be hands-on outside of courses in fields such as AI, design, and software engineering. The program culminates in a projects showcase and the finished product looks great on resumes. We welcome all skill levels to apply!
+
+        You could apply for either AI, Design, Hack, or Advanced teams. AI focuses on topics in AI like machine learning, large language models, computer vision, etc. Design focuses on either redesigning an existing platform or creating designs for an entirely new one using Figma. Hack focuses on software development for websites where students can be frontend, backend, or fullstack developers learning about the Agile process. Advanced combines all three teams and focuses on developing a product that involves all of AI, Design, and Hack. 
+
+          <br /><br />
+          <b>AI</b><br />
+          Roles: AI Engineer<br />
+          Team Size: 6<br />
+          <b>Design</b><br />
+          Roles: Team Lead, Visual Designer, UX Researcher, UX Designer, UI Designer<br />
+          Team Size: 4<br />
+          <b>Hack</b><br />
+          Roles: Frontend, Backend, Fullstack, Team Lead, Scrummaster<br />
+          Team Size: 6<br />
+
         </div>
       </div>
 

diff --git a/src/sections/Timer/style.module.scss b/src/sections/Timer/style.module.scss
@@ -1,10 +1,11 @@
 @use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
 
 .hero {
-  padding-top: 64px;
-  padding-bottom: 64px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   font-family: 'DM Sans';
   font-size: 22px;
+  word-wrap: normal;
 
   &__timer {
     padding: 0 !important;
@@ -18,8 +19,9 @@
 
     &__header {
       width: 100% !important;
+      word-wrap: normal;
       margin-top: 20px;
-      padding: 25px;
+      padding: 5px;
       display: flex;
       flex-direction: column;
       h1 {
@@ -30,6 +32,12 @@
           font-size: 40px;
         }
       }
+      @media screen and (max-width: 768px) {
+        h1 {
+          font-size: 35px;
+          font-weight: 700;
+        }
+      }
 
       p {
         font-size: 41px;
@@ -39,6 +47,12 @@
           font-size: 32px;
         }
       }
+      @media screen and (max-width: 768px) {
+        p {
+          font-size: 35px;
+          font-weight: 300;
+        }
+      }
     }
 
     &__time {
@@ -60,11 +74,27 @@
           font-weight: 800;
           height: 50px;
         }
+        @media screen and (max-width: 768px) {
+          &__digits {
+            font-size: 55px;
+            font-weight: 800;
+            height: 50px;
+          }
+        }
+
         &__label {
           font-size: 20px;
           font-weight: 500;
           height: 50px;
         }
+
+        @media screen and (max-width: 768px) {
+          &__label {
+            font-size: 18px;
+            font-weight: 500;
+            height: 50px;
+          }
+        }
       }
       &__divider {
         font-size: 66px;
@@ -73,7 +103,15 @@
         margin-left: 10px;
         margin-right: 10px;
       };
-
+      @media screen and (max-width: 768px) {
+        &__divider {
+          font-size: 55px;
+          font-weight: 800;
+          height: 50px;
+          margin-left: 10px;
+          margin-right: 10px;
+        };
+      }
     }
 
     @media only screen and (max-width: 1050px) {
@@ -96,6 +134,9 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  @media screen and (max-width: 699px) {
+    flex-direction: column;
+  }
   &__info {
     width: 550px !important;
     padding: 20px;