fredag

Nadix92 · Nadix92 · commit 302bdfd7c270 · 2021-11-05T15:58:23.000+01:00
diff --git a/starter/07-Omnifood-Desktop/css/queries.css b/starter/07-Omnifood-Desktop/css/queries.css
@@ -123,10 +123,11 @@ Insted, 1rem = 1em = 16px */
   /* MOBILE NAVIGATION */
   .btn-mobile-nav {
     display: block;
+    z-index: 100;
   }
 
   .main-nav {
-    background-color: rgba(255, 255, 255, 0.95);
+    background-color: rgba(255, 255, 255, 0.9);
     position: absolute;
     top: 0;
     left: 0;
@@ -148,7 +149,7 @@ Insted, 1rem = 1em = 16px */
   }
 
   .nav-open .main-nav {
-    z-index: 100;
+    z-index: 20;
     opacity: 1;
     pointer-events: auto;
     visibility: visible;
diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html
@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="css/general.css" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/queries.css" />
+
+    <script src="js/script.js" defer></script>
+
     <title>Omnifood</title>
   </head>
   <body>
@@ -510,7 +513,9 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
             </li>
           </ul>
 
-          <p class="copyright">Copyright &copy; 2021 by Omnifood, Inc. All rights reserved</p>
+          <p class="copyright">
+            Copyright &copy; <span id="year">2027</span> by Omnifood, Inc. All rights reserved
+          </p>
         </div>
 
         <!-- Adress -->
diff --git a/starter/07-Omnifood-Desktop/js/script.js b/starter/07-Omnifood-Desktop/js/script.js
@@ -0,0 +1,30 @@
+///////////////////////////////////////////////////////////
+// Fixing flexbox gap property missing in some Safari versions
+function checkFlexGap() {
+  var flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px';
+
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div'));
+
+  document.body.appendChild(flex);
+  var isSupported = flex.scrollHeight === 1;
+  flex.parentNode.removeChild(flex);
+  console.log(isSupported);
+
+  if (!isSupported) document.body.classList.add('no-flexbox-gap');
+}
+checkFlexGap();
+
+// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js
+
+//  get and set current year in footer copy right
+document.getElementById('year').textContent = new Date().getFullYear();
+
+// Make mobile navigation work
+const btnNav = document.querySelector('.btn-mobile-nav');
+btnNav.addEventListener('click', () => {
+  document.querySelector('.header').classList.toggle('nav-open');
+});
