From 7b9bf5e0fd08507f8fdbd0fd368d4f01e11a5021 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@protonmail.com>
Date: Tue, 7 Jun 2022 02:12:07 -0700
Subject: [PATCH] Added timeline arrows

---
 css/general.css | 28 ++++++++++++++++++++++++++++
 index.html      |  2 ++
 2 files changed, 30 insertions(+)

diff --git a/css/general.css b/css/general.css
index f66006a..b643949 100644
--- a/css/general.css
+++ b/css/general.css
@@ -514,6 +514,7 @@ section {
   width: 100%;
   height: 100%;
   margin-top: 200px;
+  padding-left: 50px;
 }
   
 .input-flex-container {
@@ -532,6 +533,26 @@ section {
   float: left;
 }
 
+#timeline-right-arrow {
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  top: 232px;
+  left: 48px;
+}
+#timeline-left-arrow {
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  top: 198px;
+  left: 600px;
+}
+@media (max-width: 740px) {
+  #timeline-left-arrow {
+    left: calc(80vw);
+  }
+}
+
 .timeline-input {
   width: 22px;
   height: 22px;
@@ -747,6 +768,13 @@ section {
     text-align: left;
     margin-bottom: 20px;
   }
+
+  #timeline-right-arrow {
+    display: none;
+  }
+  #timeline-left-arrow {
+    display: none;
+  }
 }
 @media (max-width: 480px) {
   .input-flex-container {
diff --git a/index.html b/index.html
index a973095..3e13e2e 100644
--- a/index.html
+++ b/index.html
@@ -101,6 +101,8 @@
                     <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">
                                 <input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>