Make frontpage responsive

components/About.module.css

@@ -57,3 +57,9 @@
   bottom: 0;
   right: 0;
 }
+
+@media screen and (max-width: 900px) {
+  .about {
+    flex-direction: column;
+  }
+}

components/CenterWrapper.module.css

@@ -1,7 +1,15 @@
 .textbox {
+  display: flex;
+  flex-direction: column;
   width: 80%;
   padding: calc(80rem / 16);
   background-color: var(--secondary-background);
   border-radius: calc(20rem / 16);
   margin: 0 auto;
 }
+
+@media screen and (max-width: 900px) {
+  .textbox {
+    align-items: center;
+  }
+}

components/Sections.module.css

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: row;
   gap: calc(15rem / 16);
+  width: 70vw;
+  max-width: 1000px;
 }
 
 .sections h1 {
@@ -57,4 +59,14 @@
 .nav li .linkName {
   margin: 0;
   display: inline;
+}
+
+@media screen and (max-width: 900px) {
+  .sections {
+    flex-direction: column;
+  }
+
+  .sections h1 {
+    text-align: left;
+  }
 }

components/Sections.tsx

@@ -15,7 +15,6 @@ interface SectionsProps {
 export function Sections({
   data,
   showHeader = true,
-  width = 800,
   className,
 }: SectionsProps) {
   return (
@@ -23,7 +22,6 @@ export function Sections({
       className={
         className ? `${className} ${styles.sections}` : `${styles.sections}`
       }
-      style={{ width: width }}
     >
       {showHeader ? (
         <>

components/Timeline.module.css

@@ -72,4 +72,21 @@
 .timelineSection:hover .text {
   border: calc(2rem / 16) solid var(--secondary-accent-light);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
+}
+
+.timelineSection .timeText {
+  display: none;
+}
+
+@media screen and (max-width: 900px) {
+  .timelineSection .time {
+    display: none;
+  }
+
+  .timelineSection .timeText {
+    display: block;
+    font-size: calc(26rem / 16);
+    color: var(--secondary-accent);
+    margin-bottom: calc(8rem /16)
+  }
 }

components/Timeline.tsx

@@ -119,6 +119,7 @@ function TimelineSection({
           flex: `0 0 calc(${textWidth}rem / 16)`,
         }}
       >
+        <div className={styles.timeText}>{datum.time}</div>
         {datum.text}
       </div>
     </div>

pages/frontpage.module.css

@@ -18,15 +18,21 @@
 .titleImage {
   position: absolute;
   top: 10vh;
-  left: 10vw;
+  margin: auto;
+  max-width: 800px;
+}
+
+.titleImage img {
+  max-width: 100%;
+  height: auto;
 }
 
 .blurb {
   position: absolute;
   bottom: 0vh;
   right: 7vw;
-  width: 43vw;
-  height: 33vh;
+  width: fit-content;
+  height: fit-content;
   padding: calc(30rem / 16);
   background-color: var(--translucent-accent);
   border: calc(2rem / 16) solid var(--primary-text);
@@ -73,3 +79,13 @@
   background-size: calc(25rem / 16) calc(25rem / 16);
   z-index: -1;
 }
+
+@media screen and (max-width: 700px) {
+  .decoratorDots {
+    display: none;
+  }
+
+  .decoratorSolid {
+    display: none;
+  }
+}

pages/index.tsx

@@ -1,4 +1,3 @@
-import { mockTimelineData } from "data/mocks";
 import { pageRoutes } from "data/routes";
 import Link from "next/link";
 import React from "react";
@@ -6,7 +5,6 @@ import React from "react";
 import { About } from "@/components/About";
 import { CenterWrapper } from "@/components/CenterWrapper";
 import { Sections } from "@/components/Sections";
-import { Timeline } from "@/components/Timeline";
 import { Title } from "@/components/Title";
 
 import styles from "./frontpage.module.css";
@@ -20,8 +18,6 @@ export default function Home() {
           <img
             src="/images/frontPageTitle.png"
             alt="A picture of the University of Waterloo campus"
-            width={720}
-            height={480}
           />
         </div>
         <div className={styles.blurb}>
@@ -62,7 +58,6 @@ export default function Home() {
         </p>
       </CenterWrapper>
       <Sections data={pageRoutes} />
-      <Timeline data={mockTimelineData} />
       <p>
         Click <Link href="/playground">here</Link> to visit the playground
         <br />