Changed timeline responsiveness

css/general.css

@@ -530,113 +530,114 @@ input::before, input::after {
     top: 50%;
     transform: translateY(-50%);
     background-color: #2C3E50;
-    width: 6vw;
+    width: 80px;
+    /* width: 6vw; */
     height: 5px;
   }
-  input::before {
+input::before {
   right: calc(2vw);
-  }
+}
-  input::after {
+input::after {
   left: calc(1vw);
-  }
+}
-  input:checked {
+input:checked {
   background-color: #2C3E50;
-  }
+}
-  input:checked::before {
+input:checked::before {
   background-color: #2C3E50;
-  }
+}
-  input:checked::after {
+input:checked::after {
   background-color: #AEB6BF;
-  }
+}
-  input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
+input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
   background-color: #AEB6BF;
-  }
+}
-  input:checked + .dot-info span {
+input:checked + .dot-info span {
   font-size: 13px;
   color: rgb(243, 174, 252);
   font-weight: bold;
-  }
+}
 
-  .dot-info {
+.dot-info {
   width: 25px;
   height: 25px;
-    display: block;
+  display: flex;
   visibility: hidden;
   position: relative;
   z-index: -1;
   left: calc((((80vw - 25px) / 20) * -1) - 1px);
-  }
+}
-  .dot-info span {
+.dot-info span {
   visibility: visible;
   position: absolute;
   font-size: 12px;
-  }
+}
-  .dot-info span.year {
+.dot-info span.year {
   bottom: -30px;
   right: -0.2vw;
   /* transform: translateX(-60%); */
-  }
+}
-  .dot-info span.label {
+.dot-info span.label {
   top: -56px;
   left: -10px;
   transform: rotateZ(-45deg);
   width: 70px;
   text-indent: -10px;
-  }
+}
 
-  #timeline-descriptions-wrapper {
+#timeline-descriptions-wrapper {
   width: 100%;
   margin-top: 70px;
   font-size: 22px;
   font-weight: 400;
   margin-bottom: 200px;
   text-align: left;
-  }
+}
-  #timeline-descriptions-wrapper div {
+#timeline-descriptions-wrapper div {
   margin-top: 0;
   display: none;
-  }
+}
 
-  .timeline-description {
+.timeline-description {
   font-size: 16px;
   font-weight: normal;
-  }
+}
 
-  .timeline-description-subtitle {
+.timeline-description-subtitle {
   font-size: 18px;
   color: rgb(121, 120, 120);
-  }
+}
 
-  .timeline-description-list li {
+.timeline-description-list li {
   margin: 10px 40px;
   font-size: 16px;
-  }
+}
 
-  .important-text {
+.important-text {
   color: rgb(255, 126, 126);
-  }
+}
 
-  input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
+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"] {
+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"] {
+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"] {
+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"] {
+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;
     }
@@ -651,8 +652,8 @@ input::before, input::after {
     #timeline-descriptions-wrapper {
       margin-left: -37.5px;
     }
-  }
+}
-  @media (max-width: 630px) {
+@media (max-width: 630px) {
   .flex-parent {
     justify-content: initial;
   }
@@ -720,16 +721,16 @@ input::before, input::after {
   #timeline-descriptions-wrapper {
     margin-top: 30px;
     margin-left: 0;
-      text-align: center;
+    text-align: left;
   }
-  }
+}
-  @media (max-width: 480px) {
+@media (max-width: 480px) {
   .input-flex-container {
     width: 340px;
   }
-  }
+}
-  @media (max-width: 400px) {
+@media (max-width: 400px) {
   .input-flex-container {
     width: 300px;
   }
-  }
+}

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>