Added Responsiveness

css/general.css

@@ -153,12 +153,12 @@ nav li a:focus::after{
 #banner {
   height: 100%;
   /* width: 50%; */
-  width: 500px;
+  width: 380px;
   margin: auto;
   font-size: 20px;
   display: inline-flex;
   position: relative;
-  justify-content: center;
+  justify-content: left;
   overflow: hidden;
   align-items: center;
 }
@@ -171,7 +171,14 @@ nav li a:focus::after{
 
 #timer {
   color: rgb(184, 184, 184);
-  animation: blinking 2s infinite;
+  animation: blinking 3s infinite;
+  background-color: rgb(57, 57, 57);
+  border-radius: 10px;
+  padding: 2px 5px;
+}
+
+.tooltip-nav {
+  text-decoration: none;
 }
 
 @keyframes blinking {
@@ -179,13 +186,13 @@ nav li a:focus::after{
     opacity: 1;
   }
   50% {
-    opacity: 0.7;
+    opacity: 0.8;
   }
   100% {
     opacity: 1;
   }
 }
-@keyframes headline {
+/* @keyframes headline {
   0% {
     transform: translateX(600px);
   }
@@ -195,7 +202,7 @@ nav li a:focus::after{
   100% {
     transform: translateX(-600px);
   }
-}
+} */
 
 /* .notification {
   position: absolute;
@@ -223,7 +230,7 @@ nav li a:focus::after{
 }
 
 /* Responsive Functions */
-@media (max-width: 1250px) {
+@media (max-width: 1150px) {
   #banner {
     display: none;
   }
@@ -272,6 +279,15 @@ nav li a:focus::after{
     height: 300px !important;
     width: 300px !important;
   }
+  #banner {
+    display: inline-flex;
+    width: 300px;
+  }
+}
+@media (max-width: 750px) {
+  #banner {
+    display: none;
+  }
 }
 @media (max-width: 500px) {
   #event, #rules, #prizes, #team {
@@ -295,19 +311,18 @@ nav li a:focus::after{
     transform: scale(0.9);
   }
 }
-@media (max-height: 500px) {
+@media (max-height: 600px) {
   #logo {
-    height: 200px !important;
+    transform: scale(0.8);
-    width: 200px !important;
   }
   #header-subtitle-date {
-    height: 25px;
+    transform: translateY(-50px);
-    font-size: 15px;
   }
-  #header-subtitle-spots {
+  #spots-container {
-    height: 25px;
+    transform: translateY(-50px);
-    font-size: 15px;
+  }
-    padding: 3px !important;
+  #line-header {
+    transform: translateY(-50px);
   }
   #entrance-arrow {
     visibility: hidden;
@@ -1780,7 +1795,7 @@ section {
   }
 }
 
-abbr[title] {
+.tooltip {
   text-decoration: underline dotted;
   cursor: help;
 }

index.html

@@ -62,7 +62,7 @@
                 <li><a onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
             <div id="banner">
-                <p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer"></span></p>
+                <p id="banner-text">Next event:<br>Opening Ceremony <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
             </div>
         </div>
     </nav>
@@ -419,7 +419,7 @@
                         </div>
                     </article>
                     <article id="map-div">
-                        <h2 class="map-title">Map</h2>
+                        <h2 class="map-title">Location</h2>
                         <div id="map-container">
                             <div id="map"></div>
                         </div>
@@ -448,7 +448,7 @@
                               <div class="rules-card" id="rules-2">
                                 <p class="rules-title">Do not plagiarize</p>
                                 <p>
-                                    - You are allowed to use existing libraries and packages with a valid license and give credit when credit is due (required, unless under Creative Commons or <abbr title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Licensing</abbr>)
+                                    - You are allowed to use existing libraries and packages with a valid license and give credit when credit is due (required, unless under Creative Commons or <abbr class="tooltip" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Licensing</abbr>)
                                     <br>
                                     - You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
                                 </p>