From e8ce17fd8284df6e15895967bdd78b2813447e8a Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Sun, 2 Oct 2022 13:39:26 -0400
Subject: [PATCH] Position fronpage items

---
 components/Timeline.tsx    |  2 +-
 pages/frontpage.module.css | 45 +++++++++++++++++++++++++++++++++-----
 pages/index.tsx            |  5 +++--
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index b977414..6cb810c 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -32,7 +32,7 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  timeWidth = 300,
+  timeWidth = 1000,
   textWidth = 500,
   gap = 50,
   className,
diff --git a/pages/frontpage.module.css b/pages/frontpage.module.css
index e1f27c9..4622f36 100644
--- a/pages/frontpage.module.css
+++ b/pages/frontpage.module.css
@@ -4,12 +4,47 @@
   align-items: center;
 }
 
+.title {
+  position: relative;
+  width: 1300px;
+  height: 900px;
+  border: 1px solid orange;
+}
+
+.titleImage {
+  position: absolute;
+  top: 20px;
+}
+
+.bubble {
+  position: absolute;
+  bottom: 10px;
+  left: 200px;
+  background-color: var(--pink);
+  opacity: 50%;
+  border-radius: 50px;
+}
+
+.decoratorSolid {
+  position: absolute;
+  top: 40px;
+  right: 40px;
+  background-color: var(--primary-accent-light);
+  width: 250px;
+  height: 180px;
+  opacity: 50%;
+  border-radius: 50px;
+}
+
+.decoratorDots {
+  position: absolute;
+  right: 10px;
+  background-color: var(--link);
+  width: 180px;
+  height: 280px;
+}
+
 .main > * {
   margin-top: 65px;
   margin-bottom: 65px;
 }
-
-.left {
-  align-self: flex-start;
-  margin-left: 100px;
-}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 7bcee92..973a349 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -20,6 +20,7 @@ export default function Home() {
           alt="A picture of the University of Waterloo campus"
           width={720}
           height={480}
+          className={styles.titleImage}
         />
         <div className={styles.bubble}>
           <h1>Computer Science 2022</h1>
@@ -58,8 +59,8 @@ export default function Home() {
           you see!
         </p>
       </CenterWrapper>
-      <Sections data={sectionsData} className={styles.left} />
-      <Timeline data={mockTimelineData} className={styles.left} />
+      <Sections data={sectionsData} />
+      <Timeline data={mockTimelineData} />
       <p>
         Click <Link href="/playground">here</Link> to visit the playground
         <br />