From e68f7784f06cdf1d5d5252bdf09c7d1dade733d1 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Tue, 31 May 2022 15:20:04 -0700
Subject: [PATCH] Changed timeline responsiveness

---
 css/general.css | 363 ++++++++++++++++++++++++------------------------
 index.html      |   6 +-
 2 files changed, 185 insertions(+), 184 deletions(-)

diff --git a/css/general.css b/css/general.css
index a9ed898..9296143 100644
--- a/css/general.css
+++ b/css/general.css
@@ -530,206 +530,207 @@ input::before, input::after {
     top: 50%;
     transform: translateY(-50%);
     background-color: #2C3E50;
-    width: 6vw;
+    width: 80px;
+    /* width: 6vw; */
     height: 5px;
   }
-  input::before {
-    right: calc(2vw);
-  }
-  input::after {
-    left: calc(1vw);
-  }
-  input:checked {
-    background-color: #2C3E50;
-  }
-  input:checked::before {
-    background-color: #2C3E50;
-  }
-  input:checked::after {
-    background-color: #AEB6BF;
-  }
-  input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
-    background-color: #AEB6BF;
-  }
-  input:checked + .dot-info span {
-    font-size: 13px;
-    color: rgb(243, 174, 252);
-    font-weight: bold;
-  }
-  
-  .dot-info {
-    width: 25px;
-    height: 25px;
-    display: block;
-    visibility: hidden;
-    position: relative;
-    z-index: -1;
-    left: calc((((80vw - 25px) / 20) * -1) - 1px);
-  }
-  .dot-info span {
-    visibility: visible;
-    position: absolute;
-    font-size: 12px;
-  }
-  .dot-info span.year {
-    bottom: -30px;
-    right: -0.2vw;
-    /* transform: translateX(-60%); */
-  }
-  .dot-info span.label {
-    top: -56px;
-    left: -10px;
-    transform: rotateZ(-45deg);
-    width: 70px;
-    text-indent: -10px;
-  }
-  
-  #timeline-descriptions-wrapper {
-    width: 100%;
-    margin-top: 70px;
-    font-size: 22px;
-    font-weight: 400;
-    margin-bottom: 200px;
-    text-align: left;
-  }
-  #timeline-descriptions-wrapper div {
-    margin-top: 0;
-    display: none;
-  }
-  
-  .timeline-description {
-    font-size: 16px;
-    font-weight: normal;
-  }
+input::before {
+  right: calc(2vw);
+}
+input::after {
+  left: calc(1vw);
+}
+input:checked {
+  background-color: #2C3E50;
+}
+input:checked::before {
+  background-color: #2C3E50;
+}
+input:checked::after {
+  background-color: #AEB6BF;
+}
+input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
+  background-color: #AEB6BF;
+}
+input:checked + .dot-info span {
+  font-size: 13px;
+  color: rgb(243, 174, 252);
+  font-weight: bold;
+}
 
-  .timeline-description-subtitle {
-    font-size: 18px;
-    color: rgb(121, 120, 120);
-  }
+.dot-info {
+  width: 25px;
+  height: 25px;
+  display: flex;
+  visibility: hidden;
+  position: relative;
+  z-index: -1;
+  left: calc((((80vw - 25px) / 20) * -1) - 1px);
+}
+.dot-info span {
+  visibility: visible;
+  position: absolute;
+  font-size: 12px;
+}
+.dot-info span.year {
+  bottom: -30px;
+  right: -0.2vw;
+  /* transform: translateX(-60%); */
+}
+.dot-info span.label {
+  top: -56px;
+  left: -10px;
+  transform: rotateZ(-45deg);
+  width: 70px;
+  text-indent: -10px;
+}
 
-  .timeline-description-list li {
-    margin: 10px 40px;
-    font-size: 16px;
-  }
+#timeline-descriptions-wrapper {
+  width: 100%;
+  margin-top: 70px;
+  font-size: 22px;
+  font-weight: 400;
+  margin-bottom: 200px;
+  text-align: left;
+}
+#timeline-descriptions-wrapper div {
+  margin-top: 0;
+  display: none;
+}
 
-  .important-text {
-    color: rgb(255, 126, 126);
-  }
+.timeline-description {
+  font-size: 16px;
+  font-weight: normal;
+}
 
-  input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
-    display: block;
-  }
+.timeline-description-subtitle {
+  font-size: 18px;
+  color: rgb(121, 120, 120);
+}
+
+.timeline-description-list li {
+  margin: 10px 40px;
+  font-size: 16px;
+}
+
+.important-text {
+  color: rgb(255, 126, 126);
+}
+
+input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
+  display: block;
+}
+
+input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
+  display: block;
+}
+
+input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
+  display: block;
+}
+
+input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
+  display: block;
+}
+
+input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
+  display: block;
+}
   
-  input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
-    display: block;
-  }
-  
-  input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
-    display: block;
-  }
-  
-  input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
-    display: block;
-  }
-  
-  input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
-    display: block;
-  }
-  
-  @media (min-width: 1250px) {
+@media (min-width: 1250px) {
     input::before {
       left: -37.5px;
     }
     input::after {
       right: -37.5px;
     }
-  
+
     .dot-info {
       left: calc((((1000px - 25px) / 20) * -1) - 1px);
     }
-  
+
     #timeline-descriptions-wrapper {
       margin-left: -37.5px;
     }
+}
+@media (max-width: 630px) {
+  .flex-parent {
+    justify-content: initial;
   }
-  @media (max-width: 630px) {
-    .flex-parent {
-      justify-content: initial;
-    }
-  
-    .input-flex-container {
-      flex-wrap: wrap;
-      justify-content: center;
-      width: 400px;
-      height: auto;
-      margin-top: 7vh;
-      margin-left: 0;
-      padding-bottom: 30px;
-    }
-  
-    input, .dot-info {
-      width: 60px;
-      height: 60px;
-      margin: 0 10px 50px;
-    }
-  
-    input {
-      background-color: transparent !important;
-      z-index: 1;
-    }
-    input::before, input::after {
-      content: none;
-    }
-    input:checked + .dot-info {
-      background-color: #2C3E50;
-    }
-    input:checked + .dot-info span.year {
-      font-size: 14px;
-    }
-    input:checked + .dot-info span.label {
-      font-size: 12px;
-    }
-  
-    .dot-info {
-      visibility: visible;
-      border-radius: 50%;
-      z-index: 0;
-      left: 0;
-      margin-left: -70px;
-      background-color: #AEB6BF;
-    }
-    .dot-info span.year {
-      top: 0;
-      left: 0;
-      transform: none;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #ECF0F1;
-    }
-    .dot-info span.label {
-      top: calc(100% + 5px);
-      left: 50%;
-      transform: translateX(-50%);
-      text-indent: 0;
-      text-align: center;
-    }
-  
-    #timeline-descriptions-wrapper {
-      margin-top: 30px;
-      margin-left: 0;
-      text-align: center;
-    }
+
+  .input-flex-container {
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 400px;
+    height: auto;
+    margin-top: 7vh;
+    margin-left: 0;
+    padding-bottom: 30px;
   }
-  @media (max-width: 480px) {
-    .input-flex-container {
-      width: 340px;
-    }
+
+  input, .dot-info {
+    width: 60px;
+    height: 60px;
+    margin: 0 10px 50px;
   }
-  @media (max-width: 400px) {
-    .input-flex-container {
-      width: 300px;
-    }
-  }
\ No newline at end of file
+
+  input {
+    background-color: transparent !important;
+    z-index: 1;
+  }
+  input::before, input::after {
+    content: none;
+  }
+  input:checked + .dot-info {
+    background-color: #2C3E50;
+  }
+  input:checked + .dot-info span.year {
+    font-size: 14px;
+  }
+  input:checked + .dot-info span.label {
+    font-size: 12px;
+  }
+
+  .dot-info {
+    visibility: visible;
+    border-radius: 50%;
+    z-index: 0;
+    left: 0;
+    margin-left: -70px;
+    background-color: #AEB6BF;
+  }
+  .dot-info span.year {
+    top: 0;
+    left: 0;
+    transform: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ECF0F1;
+  }
+  .dot-info span.label {
+    top: calc(100% + 5px);
+    left: 50%;
+    transform: translateX(-50%);
+    text-indent: 0;
+    text-align: center;
+  }
+
+  #timeline-descriptions-wrapper {
+    margin-top: 30px;
+    margin-left: 0;
+    text-align: left;
+  }
+}
+@media (max-width: 480px) {
+  .input-flex-container {
+    width: 340px;
+  }
+}
+@media (max-width: 400px) {
+  .input-flex-container {
+    width: 300px;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9dc04c8..ba67bc1 100644
--- a/index.html
+++ b/index.html
@@ -126,7 +126,7 @@
                                     <div data-description="1">
                                         <h4>Opening Ceremony</h4>
                                         <h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
-                                        <p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the final teams, prompts, rules, and timeline.<br>
+                                        <p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.<br>
                                             <ul class="timeline-description-list">
                                                 <li>You are required to attend this portion of the hackathon to participate</li>
                                                 <li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
@@ -210,9 +210,9 @@
                                 <div class="info">
                                   <p class="title">Start discussing ideas for a project</p>
                                   <p>
-                                      - Between now and the start of the hackathon is a great time to come up with project ideas w/ your team
+                                      - Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
                                       <br>
-                                      - However, you can't start working on the project before the hackathon
+                                      - However, you can't start working on the project until the hackathon begins
                                   </p>
                                 </div>
                               </div>