Standardize h1, h2, h3, h4, p margins (#90)

Reviewed-on: #90
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

components/ConnectWithUs.module.css

@@ -2,7 +2,6 @@
   color: var(--blue-2);
   font-weight: 600;
   font-size: calc(36rem / 16);
-  margin-bottom: calc(12rem / 16);
 }
 
 .socialLinks {

components/EmailSignup.module.css

@@ -6,7 +6,6 @@
   color: var(--blue-2);
   font-weight: 600;
   font-size: calc(36rem / 16);
-  margin-bottom: calc(12rem / 16);
 }
 
 .button {

pages/_app.css

@@ -35,6 +35,10 @@ body {
   margin: 0;
 }
 
+input {
+  font-family: "Poppins", "sans-serif";
+}
+
 /* FIXME: Dark theme is the same as light theme right now */
 .dark {
   --white: #ffffff;
@@ -67,6 +71,12 @@ h6 {
   color: var(--purple-2);
 }
 
+h1,
+h2 {
+  margin-top: calc(32rem / 16);
+  margin-bottom: calc(16rem / 16);
+}
+
 h1 {
   font-size: calc(48rem / 16);
   font-weight: 700;
@@ -74,19 +84,45 @@ h1 {
 
 h2 {
   font-size: calc(36rem / 16);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 h3 {
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(16rem / 16);
+
   font-size: calc(24rem / 16);
   font-weight: 600;
 }
 
 h4 {
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(8rem / 16);
+
   font-size: calc(18rem / 16);
   font-weight: 600;
 }
 
-input {
-  font-family: "Poppins", "sans-serif";
+p {
+  margin: 1rem 0;
+}
+
+/* 
+ * A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
+ * We need to make sure that the next item has an 8px margin-top.
+ */
+h4 + * {
+  margin-top: calc(8rem / 16);
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  /* h1, h2 = h3 on mobile */
+  h1,
+  h2 {
+    margin-top: calc(24rem / 16);
+    margin-bottom: calc(16rem / 16);
+
+    font-size: calc(24rem / 16);
+    font-weight: 600;
+  }
 }

pages/about/index.module.css

@@ -1,6 +1,4 @@
 .title {
-  color: var(--purple-2);
-  font-size: calc(48rem / 16);
   height: calc(80rem / 16);
   margin-top: auto;
   padding-left: calc(20rem / 16);
@@ -11,11 +9,6 @@
   background-color: white;
 }
 
-.content h2 {
-  color: var(--purple-2);
-  font-weight: 600;
-}
-
 .content span {
   color: var(--blue-2);
 }
@@ -77,13 +70,7 @@
   }
 
   .title {
-    font-size: calc(24rem / 16);
-    font-weight: 600;
-    padding-left: calc(0rem / 16);
-  }
-
-  .content h2 {
-    font-size: calc(24rem / 16);
+    padding-left: 0;
   }
 
   .content ul {
@@ -95,8 +82,8 @@
   }
 
   .codey {
-    width: calc(140.21rem / 16);
-    height: calc(124.65rem / 16);
+    width: calc(140rem / 16);
+    height: calc(124rem / 16);
     padding-left: calc(30rem / 16);
   }
 }

pages/about/our-supporters.module.css

@@ -8,16 +8,13 @@
 
 .header {
   color: var(--purple-2);
-  font-size: calc(48rem / 16);
   margin: 0 1rem 0 0;
   text-align: center;
 }
 
 .content h2 {
-  font-weight: 600;
   font-size: calc(24rem / 16);
   color: var(--blue-2);
-  margin-top: calc(35rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
@@ -27,10 +24,6 @@
     border: none;
   }
 
-  .header {
-    font-size: calc(24rem / 16);
-  }
-
   .codey {
     width: calc(100rem / 16);
   }

pages/get-involved.module.css

@@ -1,15 +1,19 @@
-.headerContainer {
+.page {
+  margin: calc(50rem / 16) 0;
+}
+
+.page > header {
   display: flex;
   flex-direction: row;
   border-bottom: calc(1rem / 16) solid var(--purple-2);
 }
 
-.headerText h1 {
+.headerText > h1 {
   color: var(--purple-2);
   margin: 0 0 calc(8rem / 16) 0;
 }
 
-.headerText p {
+.headerText > p {
   color: var(--black);
   margin: 0 0 calc(22rem / 16) 0;
 }
@@ -23,29 +27,13 @@
 }
 
 .content h2 {
-  font-weight: 600;
   color: var(--blue-2);
-  margin-top: calc(30rem / 16);
-}
-
-.content h3 {
-  font-weight: 600;
-  color: var(--purple-2);
-  margin-top: calc(30rem / 16);
-  margin-bottom: 1rem;
-}
-
-.content h4 {
-  margin-bottom: 0;
-}
-
-.content h4 + * {
-  margin-top: calc(8rem / 16);
 }
 
 .content strong {
   font-weight: 600;
 }
+
 .content details > * {
   padding-left: 1rem;
 }
@@ -58,20 +46,8 @@
   padding-left: 2rem;
 }
 
-.connectWithUs {
-  margin-bottom: calc(21rem / 16);
-}
-
-.emailSignup {
-  margin-bottom: calc(58rem / 16);
-}
-
-.pageContainer {
-  margin-top: calc(50rem / 16);
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
-  .headerContainer {
+  .page > header {
     display: flex;
     flex-direction: column-reverse;
     align-content: center;
@@ -83,13 +59,13 @@
     text-align: center;
   }
 
-  .headerText h1 {
+  .headerText > h1 {
     color: var(--purple-2);
     font-size: calc(24rem / 16);
     margin-bottom: (12rem / 16);
   }
 
-  .headerText p {
+  .headerText > p {
     margin: 0;
   }
 
@@ -101,12 +77,4 @@
   .content h2 {
     font-size: calc(24rem / 16);
   }
-
-  .connectWithUs {
-    margin-bottom: calc(46rem / 16);
-  }
-
-  .emailSignup {
-    margin-bottom: calc(104rem / 16);
-  }
 }

pages/get-involved.tsx

@@ -7,8 +7,8 @@ import styles from "./get-involved.module.css";
 
 export default function GetInvolved() {
   return (
-    <div className={styles.pageContainer}>
-      <div className={styles.headerContainer}>
+    <div className={styles.page}>
+      <header>
         <div className={styles.headerText}>
           <h1>Get Involved!</h1>
           <p>
@@ -17,7 +17,7 @@ export default function GetInvolved() {
           </p>
         </div>
         <Image src="images/get-involved/codey.svg" className={styles.codey} />
-      </div>
+      </header>
       <main className={styles.content}>
         <Content />
       </main>