Align title elements

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}

pages/frontpage.module.css

@@ -6,42 +6,48 @@
 
 .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 > * {

pages/index.tsx

@@ -15,13 +15,14 @@ export default function Home() {
   return (
     <div className={styles.main}>
       <div className={styles.title}>
+        <div className={styles.titleImage}>
           <Image
             src="/images/frontPageTitle.png"
             alt="A picture of the University of Waterloo campus"
             width={720}
             height={480}
-          className={styles.titleImage}
           />
+        </div>
         <div className={styles.bubble}>
           <h1>Computer Science 2022</h1>
           <h1>Class Profile</h1>