From 11c4c2d187d5240a793de8b2b5ba4bdce35a7cfd Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Sun, 2 Oct 2022 14:54:06 -0400
Subject: [PATCH] Align title elements

---
 components/Timeline.tsx    |  4 ++--
 pages/frontpage.module.css | 30 ++++++++++++++++++------------
 pages/index.tsx            | 15 ++++++++-------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index 01d58de..7062a1d 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -100,7 +100,7 @@ function TimelineSection({
           width: outerCircleWidth,
           height: outerCircleWidth,
           borderRadius: outerCircleWidth,
-          flex: `0 0 ${outerCircleWidth}px`,
+          flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
         }}
       >
         <div
@@ -116,7 +116,7 @@ function TimelineSection({
         className={styles.text}
         style={{
           width: textWidth,
-          flex: `0 0 ${textWidth}px`,
+          flex: `0 0 calc(${textWidth}rem / 16)`,
         }}
       >
         {datum.text}
diff --git a/pages/frontpage.module.css b/pages/frontpage.module.css
index 4622f36..229bbfe 100644
--- a/pages/frontpage.module.css
+++ b/pages/frontpage.module.css
@@ -6,45 +6,51 @@
 
 .title {
   position: relative;
-  width: 1300px;
-  height: 900px;
+  width: 80vw;
+  height: 100vh;
   border: 1px solid orange;
 }
 
 .titleImage {
   position: absolute;
-  top: 20px;
+  top: 80px;
+  left: 150px;
 }
 
 .bubble {
   position: absolute;
   bottom: 10px;
-  left: 200px;
+  right: 100px;
+  width: 750px;
+  height: 350px;
   background-color: var(--pink);
-  opacity: 50%;
+  opacity: 80%;
   border-radius: 50px;
 }
 
 .decoratorSolid {
   position: absolute;
-  top: 40px;
-  right: 40px;
-  background-color: var(--primary-accent-light);
+  top: 20px;
+  right: 250px;
   width: 250px;
   height: 180px;
+  background-color: var(--primary-accent-light);
   opacity: 50%;
   border-radius: 50px;
 }
 
 .decoratorDots {
   position: absolute;
+  top: 300px;
   right: 10px;
-  background-color: var(--link);
-  width: 180px;
-  height: 280px;
+  width: 175px;
+  height: 275px;
+  background-image: radial-gradient(var(--link) 35%, transparent 35%);
+  background-position: 0 0;
+  background-size: 25px 25px;
 }
 
 .main > * {
   margin-top: 65px;
   margin-bottom: 65px;
-}
+}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 973a349..4ff7200 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,13 +15,14 @@ export default function Home() {
   return (
     <div className={styles.main}>
       <div className={styles.title}>
-        <Image
-          src="/images/frontPageTitle.png"
-          alt="A picture of the University of Waterloo campus"
-          width={720}
-          height={480}
-          className={styles.titleImage}
-        />
+        <div className={styles.titleImage}>
+          <Image
+            src="/images/frontPageTitle.png"
+            alt="A picture of the University of Waterloo campus"
+            width={720}
+            height={480}
+          />
+        </div>
         <div className={styles.bubble}>
           <h1>Computer Science 2022</h1>
           <h1>Class Profile</h1>