components/Navbar.module.css

@@ -155,13 +155,13 @@
 /* On a smaller desktop screen, keep the same navbar layout but decrease the
  * horizontal padding so it still fits
  */
-@media screen and (max-width: calc(960rem / 16)) {
+@media only screen and (max-width: calc(960rem / 16)) {
   .navContent {
     padding: calc(28rem / 16) calc(64rem / 16);
   }
 }
 
-@media screen and (max-width: calc(768rem / 16)) {
+@media only screen and (max-width: calc(768rem / 16)) {
   .navContent {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

components/NewsCard.module.css

@@ -25,6 +25,10 @@
     background-color: transparent;
   }
 
+  .date {
+    font-weight: 600;
+  }
+
   .content > *:first-child {
     margin-top: 1rem;
   }

pages/index.module.css

@@ -1,6 +1,5 @@
 .intro {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
@@ -8,6 +7,13 @@
   height: calc(580rem / 16);
 }
 
+.introContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .clubTitleWrapper {
   display: flex;
   flex-direction: row;
@@ -23,14 +29,20 @@
 .clubTitle {
   /* TODO: use Futura font family */
   font-size: calc(33rem / 16);
+  text-align: center;
   color: var(--home-title-purple);
 }
 
 .clubDescription {
   margin-bottom: calc(50rem / 16);
+  text-align: center;
   color: var(--purple-2);
 }
 
+.clubDescription br {
+  display: none;
+}
+
 .codey {
   position: absolute;
   top: 78%;
@@ -65,6 +77,14 @@
   margin: calc(8rem / 16) 0 1rem;
 }
 
+.cardsDescription br {
+  display: none;
+}
+
+.cardsDividingLine {
+  display: none;
+}
+
 .eventCards {
   display: flex;
   flex-direction: column;
@@ -80,3 +100,73 @@
   padding: calc(20rem / 16);
   padding-bottom: calc(20rem / 16);
 }
+
+/* On a smaller desktop screen, decrease the horizontal space between events/news */
+@media only screen and (max-width: calc(960rem / 16)) {
+  .cards {
+    gap: calc(50rem / 16);
+  }
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .intro {
+    height: calc(360rem / 16);
+  }
+
+  .introContent {
+    margin-bottom: calc(100rem / 16);
+    padding: 1rem;
+    max-width: calc(260rem / 16);
+  }
+
+  .clubTitleWrapper img {
+    display: none;
+  }
+
+  .clubTitle {
+    margin: calc(8rem / 16) 0;
+    font-size: calc(20rem / 16);
+  }
+
+  .clubDescription {
+    margin: calc(8rem / 16) 0 calc(26rem / 16);
+    color: var(--purple-2);
+  }
+
+  .clubDescription br {
+    display: inline;
+  }
+
+  .codey {
+    right: auto;
+    z-index: -1;
+    height: calc(120rem / 16);
+  }
+
+  .cards {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: calc(8rem / 16);
+
+    padding: calc(36rem / 16) calc(40rem / 16);
+  }
+
+  .cardsHeading {
+    margin: 0;
+    font-size: calc(18rem / 16);
+    font-weight: 600;
+  }
+
+  .cardsDescription br {
+    display: inline;
+  }
+
+  .cardsDividingLine {
+    display: block;
+    margin: 1rem 0 calc(34rem / 16);
+    height: calc(1rem / 16);
+    border: none;
+    background-color: var(--purple-2);
+  }
+}

pages/index.tsx

@@ -25,14 +25,17 @@ export default function Home() {
   return (
     <>
       <main className={styles.intro}>
-        <div className={styles.clubTitleWrapper}>
-          <Image src="/images/logo-icon.svg" alt="CSC Logo" />
-          <h1 className={styles.clubTitle}>Computer Science Club</h1>
+        <div className={styles.introContent}>
+          <div className={styles.clubTitleWrapper}>
+            <Image src="/images/logo-icon.svg" alt="CSC Logo" />
+            <h1 className={styles.clubTitle}>Computer Science Club</h1>
+          </div>
+          <p className={styles.clubDescription}>
+            University of Waterloo&apos;s <br />
+            student computing community
+          </p>
+          <SocialLinks color="gradient" size="big" />
         </div>
-        <p className={styles.clubDescription}>
-          University of Waterloo&apos;s student computing community
-        </p>
-        <SocialLinks color="gradient" size="big" />
         <Image
           className={styles.codey}
           src="/images/home/codey_sitting.svg"
@@ -45,6 +48,7 @@ export default function Home() {
           <section className={styles.events}>
             <h2 className={styles.cardsHeading}>Upcoming Events</h2>
             <p className={styles.cardsDescription}>See past events here</p>
+            <hr className={styles.cardsDividingLine} />
             <div className={styles.eventCards}>
               {events.map(({ metadata }) => (
                 <EventDescriptionCard
@@ -57,8 +61,10 @@ export default function Home() {
           <section className={styles.news}>
             <h2 className={styles.cardsHeading}>News</h2>
             <p className={styles.cardsDescription}>
-              Updates from our execs! See past news here
+              Updates from our execs! <br />
+              See past news here
             </p>
+            <hr className={styles.cardsDividingLine} />
             <NewsCard {...unavailableMetadata}>
               <UnavailableContent />
             </NewsCard>