Improved responsiveness

css/general.css

@@ -89,7 +89,7 @@ html {
 .nav-container .menu-btn:checked ~ .nav-menu {
   max-height: 300px;
   background-color: rgb(24, 24, 24);
-  transition: 0.2s;
+  transition: 0.5s;
 }
 
 .nav-container .menu-btn:not(:checked) ~ .nav-menu {
@@ -122,10 +122,7 @@ html {
   }
 }
 
-@media (max-width: 950px) {
+@media (max-width: 1050px) {
-  /* .nav-container {
-    background-color: unset;
-  } */
   .nav-container .nav-menu {
     clear: both;
     max-height: 0;
@@ -280,10 +277,6 @@ nav * {
   text-align: center;
 }
 
-#event-name {
-  margin-right: 10px;
-}
-
 #timer {
   color: rgb(184, 184, 184);
   animation: blinking 3s infinite;
@@ -349,6 +342,7 @@ nav * {
   text-decoration: none;
   cursor: pointer;
   background: unset;
+  margin-right: 10px;
 }
 
 .link:hover {
@@ -397,37 +391,25 @@ nav * {
 }
 @media (max-width: 1200px) {
   #banner {
-    display: none;
+    display: block;
+    top: 1px;
+    max-width: 200px;
+    min-width: 150px;
+    width: auto;
+    margin-left: 300px;
+  }
+  #timer-container {
+    display: block;
+    text-align: center;
+  }
+  #timer {
+    display: inline-block;
+    position: relative;
+    margin: 3px auto 0;
+    padding: 0px 5px;
   }
 }
 @media (max-width: 900px) {
-  .checkbtn {
-    display: inline-block;
-  }
-  
-  /* nav ul {
-    position: fixed;
-    width: 100%;
-    height: 300px;
-    margin-top: 58px;
-    margin-right: 0;
-    background: rgb(24, 24, 24);
-    visibility: hidden;
-    text-align: center;
-  }
-  nav ul li {
-    display: block;
-    margin: 20px 0;
-    line-height: 30px;
-  }
-  #check:checked ~ul {
-    visibility: visible;
-    animation: dropdown 0.5s ease;
-  } */
-  .checkbtn {
-    display: inline-block;
-  }
-
   #prize-logo, .podium-label {
     transform: scale(0.9);
     font-size: 16px !important;
@@ -449,30 +431,6 @@ nav * {
   header .waviy {
     font-size: 45px;
   }
-  #banner {
-    display: inline-flex;
-    width: 310px;
-  }
-}
-@media (max-width: 750px) {
-  #banner {
-    display: block;
-    top: 1px;
-    max-width: 200px;
-    min-width: 150px;
-    width: auto;
-    margin-left: 300px;
-  }
-  #timer-container {
-    display: block;
-    text-align: center;
-  }
-  #timer {
-    display: inline-block;
-    position: relative;
-    margin: 3px auto 0;
-    padding: 0px 5px;
-  }
 }
 @media (max-width: 620px) {
   #banner {
@@ -498,7 +456,7 @@ nav * {
       height: 2300px;
       width: 230px;
   }
-  #prizes-container {
+  #prizes-container, #banner {
     transform: scale(0.9);
   }
   #banner {
@@ -520,6 +478,8 @@ nav * {
   #prizes-container {
     transform: scale(0.9);
   }
+}
+@media (max-width: 370px) {
   #banner {
     display: none;
   }
@@ -2746,4 +2706,4 @@ footer li {
 /* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and
 coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? 
 Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to 
-newcomers. If this sounds like you, then all aboard the Hackathon tra
+newcomers. If this sounds like you, then all aboard the Hackathon tra */

index.html

@@ -90,11 +90,11 @@
             <input class="menu-btn" type="checkbox" id="menu-btn" />
             <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
             <ul class="nav-menu">
-                <li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
+                <li><a class="navlink" onclick="uncheck('menu-btn')" href="#event">Event</a></li>
-                <li><a class="navlink" onclick="uncheck('check')" href="#workshops">Workshops</a></li>
+                <li><a class="navlink" onclick="uncheck('menu-btn')" href="#workshops">Workshops</a></li>
-                <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
+                <li><a class="navlink" onclick="uncheck('menu-btn')" href="#prizes">Prizes</a></li>
-                <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
+                <li><a class="navlink" onclick="uncheck('menu-btn')" href="#team">Team</a></li>
-                <li><a class="navlink" onclick="uncheck('check')" href="./rules">Rules<svg id="nav-icon" class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
+                <li><a class="navlink" onclick="uncheck('menu-btn')" href="./rules">Rules<svg id="nav-icon" class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
             </ul>
             <a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
         </div>