Standardize text container styles, fix gradiant background

src/app/Home.module.css

@@ -1,33 +1,14 @@
-.landingBackground h1 {
-    font-size: 2em;
-    margin-bottom: 1rem;
-    margin-left: 1em;
-    margin-right: 1em;
-}
-
-.landingBackground h2 {
-    font-size: 1.5em;
-    margin-bottom: 0.5rem;
-    margin-left: 1em;
-    margin-right: 1em;
-}
-
-.landingBackground p {
-    margin-bottom: 0.5rem;
-    margin-left: 1em;
-    margin-right: 1em;
-}
-
-.centerText {
+.content {
+    margin: 0 auto;
+    max-width: 800px;
     text-align: center;
 }
-  
+
 .landingBackground {
+    padding: 1px; /* hack to prevent margin collapse */
     background-image: url("/landing-background.jpg");
     background-position: center;
     background-size: cover;
     width: 100vw;
     height: 100vh;
 }
-
-

src/app/about/About.module.css

@@ -1,22 +1,9 @@
-.about {
+.content {
+    margin: 0 auto;
+    max-width: 800px;
     text-align: center;
 }
 
-/* CSS Modules recommends camelCase
-See: https://github.com/css-modules/css-modules#naming */
-.imageContainer {
-    display: flex;
-    justify-content: center;
-    margin-top: 2rem;
-}
-
-.title {
-    margin-bottom: 5rem;
-    font-size: 3rem;
-}
-
-
-.description {
-    margin: 0 auto;
-    max-width: 1000px;
+.image {
+    margin: auto;
 }

src/app/about/page.tsx

@@ -3,10 +3,10 @@ import styles from "./About.module.css";
 
 export default function About() {
   return (
-    <main className={styles.about}>
-      <h1 className={styles.title}>About</h1>
-      <div className={styles.descriptionContainer}>
-        <p className={styles.description}>
+    <main className={styles.content}>
+      <h1>About</h1>
+      <div>
+        <p>
           We are an organization that helps students learn and apply software
           engineering principles to real-world applications. We host weekly
           workshops on topics like software design to help bridge the gap
@@ -16,15 +16,13 @@ export default function About() {
           careers in software development.
         </p>
       </div>
-
-      <div className={styles.imageContainer}>
-        <Image
-          src="fall_2022_planning_meeting.jpg"
-          alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
-          height={600}
-          width={600}
-        />
-      </div>
+      <Image
+        className={styles.image}
+        src="fall_2022_planning_meeting.jpg"
+        alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
+        height={600}
+        width={600}
+      />
     </main>
   );
 }

src/app/globals.css

@@ -13,11 +13,26 @@
 }
 
 body {
+  width: 100vw;
+  height: 100vh;
   color: var(--theme-color-text);
   background: linear-gradient(
     to bottom right,
     var(--background-gradiant-dark),
     var(--background-gradiant-light)
-  )
+  ) fixed;
 }
 
+h1 {
+  margin: 0.75em 4px;
+  font-size: 2em;
+}
+
+h2 {
+  margin: 0.75em 4px;
+  font-size: 1.5em;
+}
+
+p {
+  margin: 0.75em 4px;
+}

src/app/page.tsx

@@ -2,20 +2,22 @@ import styles from "./Home.module.css";
 
 export default function Home() {
   return (
-    <main className={`${styles.centerText} ${styles.landingBackground}`}>
-      <h1>Society of Software Developers</h1>
-      <h2>Software Development & Design</h2>
-      <p>
-        We are an organization that helps students learn and apply software
-        engineering principles to real-world applications. We host weekly
-        workshops on topics like software design to help bridge the gap between
-        what students need to know for industry and what they&apos;re taught in
-        classes. These concepts help with building complex software systems and
-        better prepare members for team projects, internships, and careers in
-        software development.
-      </p>
-      <h2>Fall 2023 Meetings</h2>
-      <p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
-    </main>
+    <div className={styles.landingBackground}>
+      <main className={styles.content}>
+        <h1>Society of Software Developers</h1>
+        <h2>Software Development & Design</h2>
+        <p>
+          We are an organization that helps students learn and apply software
+          engineering principles to real-world applications. We host weekly
+          workshops on topics like software design to help bridge the gap
+          between what students need to know for industry and what they&apos;re
+          taught in classes. These concepts help with building complex software
+          systems and better prepare members for team projects, internships, and
+          careers in software development.
+        </p>
+        <h2>Fall 2023 Meetings</h2>
+        <p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
+      </main>
+    </div>
   );
 }