components/Bubble.module.css

@@ -1,11 +1,14 @@
 .bubble {
   padding: calc(36rem / 16) 0;
   margin: calc(64rem / 16) 0;
+}
+
+.bubble:nth-child(odd) {
   background-color: var(--blue-1-20);
-  max-width: 5000px !important;
 }
 
 .bubble > * {
   margin: 2rem auto;
   max-width: calc(800rem / 16);
+  padding: 0 calc(24rem / 16);
 }

components/Bubble.tsx

@@ -1,10 +1,11 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import { DefaultLayout } from "./DefaultLayout";
 import styles from "./Bubble.module.css";
 
 export default function Bubble(props: { children: React.ReactNode }) {
-  return <DefaultLayout> {props.children} </DefaultLayout>;
-}
-
-function DefaultLayout(props: { children: React.ReactNode }) {
-  return <div className={styles.bubble}>{props.children}</div>;
+  return (
+    <div className={styles.bubble}>
+      <DefaultLayout>{props.children}</DefaultLayout>
+    </div>
+  );
 }

components/DefaultLayout.module.css

@@ -0,0 +1,6 @@
+.defaultLayout {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: 0 calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}

components/DefaultLayout.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./DefaultLayout.module.css";
+
+export function DefaultLayout(props: { children: React.ReactNode }) {
+  return <div className={styles.defaultLayout}>{props.children}</div>;
+}

content/about/index.mdx

@@ -6,7 +6,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
 
 </Bubble>
 
-<div>
+<Bubble>
 
 ## Our Vision
 
@@ -16,7 +16,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
 
 3. Community: Encouraging interpersonal relationships through community building and social events for all computing students.
 
-</div>
+</Bubble>
 
 <Bubble>
 
@@ -28,13 +28,13 @@ By recreating what CS Club means for our community, we're passionate about helpi
 
 </Bubble>
 
-<div>
+<Bubble>
 
 ## Our Mission
 
 The CS Club team is devoted to providing you with all the resources you could need as a student. We want to create a community that members can call home, to make it a place where you can reach out for career advice, for academic help, or even just to socialize. To fulfil this mission, we'll be running events and initiatives throughout the term, so please check out our Events page to stay updated!
 
-</div>
+</Bubble>
 
 <Bubble>
 

pages/_app.module.css

@@ -10,10 +10,3 @@
 .contentContainer {
   flex-grow: 1;
 }
-
-.defaultLayout {
-  margin: 0 auto;
-  max-width: calc(800rem / 16);
-  padding: 0 calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
-}

pages/_app.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { Link } from "../components/Link";
+import { DefaultLayout } from "../components/DefaultLayout";
 import styles from "./_app.module.css";
 
 import "./_app.css";
@@ -32,10 +33,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   );
 }
 
-function DefaultLayout(props: { children: React.ReactNode }) {
-  return <div className={styles.defaultLayout}>{props.children}</div>;
-}
-
 type PageComponent = NextComponentType<
   NextPageContext,
   unknown,

pages/about/index.module.css

@@ -20,11 +20,6 @@
   color: black;
 }
 
-.text > * {
-  margin: 2rem auto;
-  max-width: calc(806rem / 16);
-}
-
 .flexBox {
   margin: 2rem auto;
   max-width: calc(806rem / 16);
@@ -74,6 +69,7 @@
   color: var(--blue-2);
   font-size: 24px;
 }
+/*for temp mailing list components*/
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .bubble:nth-child(odd) {