opacify the background when the columnar menu is showed

Author: carlosjorger

css/navbar.css

@@ -66,11 +66,11 @@
     position: absolute;
     margin-top: 0;
     padding-left: 0;
-    height: 50vh;
+    height: 40vh;
     background-color: rgb(38, 26, 50);
     width: 100%;
     z-index: 2;
-    top: -50vh;
+    top: -40vh;
     transition: all 0.3s ease-in;
 
 }

css/styles.css

@@ -13,7 +13,10 @@ body {
   margin: 0;
 }
 
-/* elements */
+main {
+  transition: all 0.8s ease-in;
+}
+
 p {
   color: var(--default-font-color);
   font-family: var(--default-font-family);
@@ -25,9 +28,6 @@ p {
 h1,
 h2,
 h3 {
-  /* for guide */
-  /* border: solid 3px aqua; */
-
   font-family: 'Raleway', sans-serif !important;
 }
 
@@ -45,6 +45,9 @@ section {
 
 }
 
+.opacity-effect {
+  filter: opacity(20%) grayscale(70%);
+}
 
 
 article {
@@ -228,9 +231,11 @@ i {
   .navbar {
     display: none !important;
   }
+
   .navbar-compressed {
     display: block !important;
   }
+
   section,
   footer {
     width: 83%;
@@ -245,12 +250,15 @@ i {
   :root {
     font-size: 10px;
   }
+
   .navbar {
-    display: none !important ;
+    display: none !important;
   }
+
   .navbar-compressed {
     display: block !important;
   }
+
   p {
     max-width: 90%;
   }

index.html

@@ -72,6 +72,7 @@
       </ul>
     </nav>
   </header>
+ <main>
   <section>
     <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>
@@ -155,8 +156,8 @@ <h1 class="subtitle contacts-item">Contact</h1>
         </p>
       </div>
     </div>
-
   </footer>
+ </main>
 </body>
 
 </html>

index.js

@@ -21,23 +21,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
         const navColumnarMenu = document.getElementById('nav-columnar-menu');
         if (navColumnarMenu.classList.contains('active')) {
           navColumnarMenu.classList.remove("active");
+          document.getElementsByTagName("main")[0].classList.remove('opacity-effect')
         }
         else if(element.id==='show-nav-columnar-menu'){
           navColumnarMenu.classList.add("active");
+          document.getElementsByTagName("main")[0].classList.add('opacity-effect')
         }
 
       })
     }
   )
-  // Your code to run since DOM is loaded and ready
-})
-// ([...document.getElementsByTagName('a')]).forEach(
-//     // (a)=>{
-
-//     // }
-//     // (element=>{
-//     //   element.addEventListener('click',function(){
-//     //     console.log('aaaaaaaaa')
-//     //   })
-//     // })
-// )
+})