From 489785ed60b3d5c7c0406f02446f4189fea1e3f8 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@protonmail.com>
Date: Tue, 7 Jun 2022 12:12:50 -0700
Subject: [PATCH] Fixed timeline arrows

---
 css/general.css | 24 ++++++++++--------------
 index.html      |  4 ++--
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/css/general.css b/css/general.css
index b643949..d01b474 100644
--- a/css/general.css
+++ b/css/general.css
@@ -514,7 +514,6 @@ section {
   width: 100%;
   height: 100%;
   margin-top: 200px;
-  padding-left: 50px;
 }
   
 .input-flex-container {
@@ -526,30 +525,26 @@ section {
   max-width: 1000px;
   position: relative;
   z-index: 0;
-}
-
-#timeline-left-arrow {
-  position: absolute;
-  float: left;
+  margin-left: 30px;
 }
 
 #timeline-right-arrow {
-  width: fit-content;
+  width: 0px;
   height: fit-content;
   position: relative;
-  top: 232px;
-  left: 48px;
+  right: 24px;
+  top: 2px;
 }
 #timeline-left-arrow {
-  width: fit-content;
+  width: 0px;
   height: fit-content;
   position: relative;
-  top: 198px;
-  left: 600px;
+  right: 58px;
+  top: 2px;
 }
 @media (max-width: 740px) {
-  #timeline-left-arrow {
-    left: calc(80vw);
+  #timeline-right-arrow {
+    right: calc(3vw);
   }
 }
 
@@ -597,6 +592,7 @@ section {
   content: "<";
   color: white;
   font-size: 30px;
+  position: relative;
 } */
 
 .timeline-input::after {
diff --git a/index.html b/index.html
index 3e13e2e..7556e61 100644
--- a/index.html
+++ b/index.html
@@ -101,10 +101,9 @@
                     <div id="timeline">
                         <h2 id="timeline-heading">Timeline</h2>
                         <span class="caption">Click on each dot for more info</span>
-                        <div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
-                        <div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
                         <div class="flex-parent">
                             <div class="input-flex-container">
+                                <div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
                                 <input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
                                 <div onclick="checkt('t1')" class="dot-info" data-description="1">
                                     <span class="year">8/12 4:00pm</span>
@@ -130,6 +129,7 @@
                                     <span class="year">8/14 3:30pm</span>
                                     <span class="label">Awards Ceremony</span>
                                 </div>
+                                <div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
                                 <div id="timeline-descriptions-wrapper">
                                     <div data-description="1">
                                         <h3>Opening Ceremony</h3>