Added mobile responsiveness to nav

css/general.css

@@ -88,14 +88,10 @@ html {
 
 .nav-container .menu-btn:checked ~ .nav-menu {
   max-height: 300px;
-  background-color: rgb(24, 24, 24);
+  background-color: rgba(24, 24, 24, 0.988);
   transition: 0.5s;
 }
 
-.nav-container .menu-btn:not(:checked) ~ .nav-menu {
-  animation: slow-fade 1s ease;
-}
-
 .nav-container .menu-btn:checked ~ .menu-icon .navicon {
   background: transparent;
 }
@@ -145,6 +141,9 @@ html {
   #sign-up {
     right: 50px !important;
   }
+  .nav-container .menu-btn:not(:checked) ~ .nav-menu {
+    animation: slow-fade 1s ease;
+  }
 }
 
 nav {
@@ -1478,11 +1477,42 @@ li .splide__pagination__page.is-active {
 .button-close-modal {
 	display: block;
   float: right;
-  color: white;
   background-color: unset;
   border: none;
   cursor: pointer;
-  margin: 5px 10px 0 0;
+  margin-right: 5px;
+  display: block;
+  height: 2px;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  padding: 15px 20px 10px 10px;
+  cursor: pointer;
+}
+
+.button-close-modal:before,
+.button-close-modal:after {
+  background: rgb(200, 200, 200);
+  content: '';
+  display: block;
+  height: 2px;
+  position: absolute;
+  transition: all .2s ease-out;
+  width: 13px;
+}
+
+.button-close-modal:hover {
+  transform: scale(1.2);
+  filter: brightness(1.1);
+  transition: 0.3s;
+}
+
+.button-close-modal:before {
+  transform: rotate(-45deg);
+}
+
+.button-close-modal:after {
+  transform: rotate(45deg);
 }
 
 #modal-overlay {

index.html

@@ -87,7 +87,7 @@
                     <span id="timer">---</span></div>
                 </p>
             </div>
-            <input class="menu-btn" type="checkbox" id="menu-btn" />
+            <input class="menu-btn" onclick="CheckNavOpen()" 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('menu-btn')" href="#event">Event</a></li>
@@ -402,7 +402,7 @@
             </div>
             <div id="modal-overlay">
                 <div class="modal logistics-border" id="check-in">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header logistics">
                         <h2>Check In</h2>
                     </div>
@@ -413,7 +413,7 @@
                     </div>
                 </div>
                 <div class="modal logistics-border" id="opening-ceremony">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header logistics">
                         <h2>Opening Ceremony</h2>
                     </div>
@@ -428,7 +428,7 @@
                     </div>
                 </div>
                 <div class="modal hacking-border" id="hacking-starts">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header hacking">
                         <h2>Hacking starts</h2>
                     </div>
@@ -447,7 +447,7 @@
                     </div>
                 </div>
                 <div class="modal food-border" id="lunch">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header food">
                         <h2>Lunch</h2>
                     </div>
@@ -458,7 +458,7 @@
                     </div>
                 </div>
                 <div class="modal workshop-border" id="workshop1">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header workshop">
                         <h2>Web Dev Workshop</h2>
                     </div>
@@ -469,7 +469,7 @@
                     </div>
                 </div>
                 <div class="modal workshop-border" id="workshop2">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header workshop">
                         <h2>[REDACTED] Workshop</h2>
                     </div>
@@ -480,7 +480,7 @@
                     </div>
                 </div>
                 <div class="modal game-border" id="activity1">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header game">
                         <h2>Kahoot</h2>
                     </div>
@@ -491,7 +491,7 @@
                     </div>
                 </div>
                 <div class="modal hacking-border" id="hacking-ends">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header hacking">
                         <h2>Hacking ends</h2>
                     </div>
@@ -509,7 +509,7 @@
                     </div>
                 </div>
                 <div class="modal logistics-border" id="project-presentations">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header logistics">
                         <h2>Project Presentations</h2>
                     </div>
@@ -529,7 +529,7 @@
                     </div>
                 </div>
                 <div class="modal logistics-border" id="judging">
-                    <button class="button-close-modal">x</button>
+                    <button class="button-close-modal"></button>
                     <div class="modal-header logistics">
                         <h2>Judging</h2>
                     </div>

js/general.js

@@ -411,6 +411,7 @@ function showModal(id) {
   currentModal = id;
 }
 
+// Check if user clicks outside of modal
 document.addEventListener(
   "click",
   function (event) {
@@ -425,6 +426,30 @@ document.addEventListener(
   false
 ); 
 
+var openNavClick = false;
+var nav_is_open = false;
+function CheckNavOpen() {
+  if (document.getElementById('menu-btn').checked == true) {
+    nav_is_open = true;
+    openNavClick = true;
+  }
+}
+// Check if user clicks outside of navbar menu
+document.addEventListener(
+  "click",
+  function (event) {
+    // If user either clicks X button OR clicks outside the modal window, then close modal
+    if (!openNavClick && nav_is_open == true) {
+      if (event.target.matches(".menu-btn") || !event.target.closest(".nav-container")) {
+        uncheck('menu-btn');
+        nav_is_open = false;
+      }
+    }
+    openNavClick = false;
+  },
+  false
+);
+
 var splide = new Splide( '.splide', {
   type   : 'loop',
   focus  : 'center',