Fix more spacing shenanigans

components/DefaultLayout.module.css

@@ -2,5 +2,4 @@
   margin: 0 auto;
   max-width: calc(800rem / 16);
   padding: 0 calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
 }

pages/index.module.css

@@ -1,3 +1,7 @@
+.page {
+  padding-bottom: calc(60rem / 16);
+}
+
 .intro {
   display: flex;
   flex-direction: column;
@@ -5,11 +9,9 @@
   align-items: center;
   position: relative;
 
-  margin: 0 auto;
   height: 65vh;
   min-height: calc(420rem / 16);
   max-height: calc(580rem / 16);
-  max-width: calc(800rem / 16);
 }
 
 .introTop {
@@ -108,12 +110,6 @@
   gap: 1rem;
 }
 
-.contact {
-  margin: 0 auto;
-  max-width: calc(800rem / 16);
-  padding: calc(30rem / 16) calc(40rem / 16) calc(80rem / 16);
-}
-
 /* On a smaller desktop screen, make the events/new flow vertically */
 @media only screen and (max-width: calc(1100rem / 16)) {
   .cards {
@@ -128,16 +124,25 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
+  .page {
+    padding-bottom: calc(30rem / 16);
+  }
+
   .intro {
     height: calc(330rem / 16);
+    min-height: unset;
+    max-height: unset;
   }
 
   .introContent {
-    margin-bottom: calc(100rem / 16);
     padding: 1rem;
     max-width: calc(260rem / 16);
   }
 
+  .introBottom {
+    min-height: calc(100rem / 16);
+  }
+
   .clubTitleWrapper img {
     display: none;
   }
@@ -169,7 +174,7 @@
     align-items: center;
     gap: calc(8rem / 16);
 
-    padding: calc(36rem / 16) calc(30rem / 16) calc(20rem / 16);
+    padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
   }
 
   .cardsHeading {
@@ -189,9 +194,4 @@
     border: none;
     background-color: var(--purple-2);
   }
-
-  .contact {
-    padding: calc(30rem / 16);
-    padding-bottom: calc(80rem / 16);
-  }
 }

pages/index.tsx

@@ -5,6 +5,7 @@ import { EventDescriptionCard } from "../components/EventDescriptionCard";
 import { NewsCard } from "../components/NewsCard";
 import { ConnectWithUs } from "../components/ConnectWithUs";
 import { EmailSignup } from "../components/EmailSignup";
+import { DefaultLayout } from "../components/DefaultLayout";
 import styles from "./index.module.css";
 
 // temporary event and news imports
@@ -26,26 +27,28 @@ export default function Home() {
 
   return (
     <>
-      <header className={styles.intro}>
-        <div className={styles.introTop} />
-        <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>
+      <DefaultLayout>
+        <header className={styles.intro}>
+          <div className={styles.introTop} />
+          <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 <br />
-            student computing community
-          </p>
-          <SocialLinks color="gradient" size="big" />
-        </div>
-        <div className={styles.introBottom} />
-        <Image
-          className={styles.codey}
-          src="/images/home/codey_sitting.svg"
-          alt="CSC mascot Codey, a blue shiba with circular glasses"
-        />
-      </header>
+          <div className={styles.introBottom} />
+          <Image
+            className={styles.codey}
+            src="/images/home/codey_sitting.svg"
+            alt="CSC mascot Codey, a blue shiba with circular glasses"
+          />
+        </header>
+      </DefaultLayout>
       <div className={styles.cardsBackground}>
         <div className={styles.cards}>
           {/* TODO: add links to past events and past news */}
@@ -75,14 +78,14 @@ export default function Home() {
           </section>
         </div>
       </div>
-      <div className={styles.contact}>
+      <DefaultLayout>
         <ConnectWithUs />
         <EmailSignup />
-      </div>
+      </DefaultLayout>
     </>
   );
 }
 
 Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
-  return <div>{props.children}</div>;
+  return <div className={styles.page}>{props.children}</div>;
 };