From 7c67cce01fd62bfb05678d864de6e04c5552a61b Mon Sep 17 00:00:00 2001
From: AW_Dev <riptidegamesceo@gmail.com>
Date: Fri, 10 May 2024 21:02:05 -0700
Subject: [PATCH] added colors to timeline thingies

---
 public/bin/landing-new/index.html | 31 ++++++++++++++++++-------------
 public/bin/landing-new/style.css  | 24 ++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/public/bin/landing-new/index.html b/public/bin/landing-new/index.html
index 80766365..7b4a44a9 100644
--- a/public/bin/landing-new/index.html
+++ b/public/bin/landing-new/index.html
@@ -40,7 +40,7 @@
 
         <img src="../images/idea.png" class="huh floaty" style="animation-delay: -3000ms;">
     </section>
-    <section class="section container timeline">
+    <section class="section container timeline" style="max-width:71em;">
         <!-- timeline of project -->
         <h1 class="timeline-header">
             What will you make
@@ -48,7 +48,8 @@
             <em>before summer break?</em>
         </h1>
         <div class="timeline-list">
-            <div class="timeline-item" onclick="smoothScroll('.gambling-section')" style="cursor: pointer;">
+            <div class="timeline-item hoverable now" onclick="smoothScroll('.gambling-section')"
+                style="cursor: pointer;">
                 <div class="timeline-info">
                     <em class="muted">Right now...</em>
                     <h2>Rummage for parts</h2>
@@ -57,18 +58,22 @@
                         for some inspiration!</p>
                 </div>
             </div>
-            <div class="timeline-item hoverable">
-                <em class="muted">over 3-4 days...</em>
-                <h2>Design your project</h2>
-                <p>Build a project in the online editor and program it! Get support from <a
-                        href="https://hackclub.com/slack" target="_blank">other high schoolers in an online
-                        community</a>.</p>
+            <div class="timeline-item hoverable later">
+                <div class="timeline-info">
+                    <em class="muted">over 3-4 days...</em>
+                    <h2>Design your project</h2>
+                    <p>Build a project in the online editor and program it! Get support from <a
+                            href="https://hackclub.com/slack" target="_blank">other high schoolers in an online
+                            community</a>.</p>
+                </div>
             </div>
-            <div class="timeline-item hoverable">
-                <em class="muted">in 1 week...</em>
-                <h2>Get it IRL</h2>
-                <p><a href="https://hack.club/bin-submit" target="_blank">Submit your design to the gallery</a> of
-                    projects so other high schoolers can learn from your project.</p>
+            <div class="timeline-item hoverable oneweek">
+                <div class="timeline-info">
+                    <em class="muted">in 1 week...</em>
+                    <h2>Get it IRL</h2>
+                    <p><a href="https://hack.club/bin-submit" target="_blank">Submit your design to the gallery</a> of
+                        projects so other high schoolers can learn from your project.</p>
+                </div>
             </div>
         </div>
     </section>
diff --git a/public/bin/landing-new/style.css b/public/bin/landing-new/style.css
index 4fa942b6..cc195f52 100644
--- a/public/bin/landing-new/style.css
+++ b/public/bin/landing-new/style.css
@@ -696,9 +696,10 @@ button {
 .timeline-list {
     margin: 2em auto;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 300px;
+    grid-template-rows: 200px;
     display: grid;
     gap: 20px;
+    width: 80%;
 }
 
 @media only screen and (max-width: 52em) {
@@ -710,14 +711,33 @@ button {
 
 .timeline-item {
     padding: 10px;
-    background-color: red;
+    background-color: black;
     border-radius: 20px;
+    box-sizing: border-box;
+}
+
+.timeline-item.now {
+    background: linear-gradient(to bottom right, #63CE61, #ADEA00);
+}
+
+.timeline-item.later {
+    background: linear-gradient(to bottom right, #7A97FC, #7AEDFC);
+}
+
+.timeline-item.oneweek {
+    background: linear-gradient(to bottom right, #FC7A7A, #FCA97A);
 }
 
 .timeline-info {
     background-color: #EEEDED;
     height: 100%;
     border-radius: 15px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.timeline-info a {
+    color: black;
 }
 
 .muted {