Allowing more social lists, wrapping within buttons!

assets/js/main.js

@@ -0,0 +1,18 @@
+window.addEventListener("load", () => {
+    let menu = document.querySelector(".navbar-menu");
+    let nav = document.querySelector("nav");
+    // Toggle display of the menu for mobile;
+    document.querySelector("#navbar-toggler").addEventListener("click", () => {
+        menu.classList.toggle('shown');
+        nav.classList.toggle('menu-shown');
+    })
+    document.querySelectorAll(".menu-with-sub").forEach(menu => {
+        menu.querySelector("a[role=button]").addEventListener("click", () => {
+            menu.classList.toggle('toggled');
+        })
+    })
+    // Basic mail protection
+    for(let emailLink of document.querySelectorAll("a[alt=Mail]")) {
+        emailLink.href = "mail" + "to" + String.fromCharCode(58) + "mail" + String.fromCharCode(64) + "ad5001.eu"
+    }
+})

assets/scss/components/common/button.scss

@@ -21,13 +21,16 @@
     color: black;
     cursor: pointer;
     
+    width: fit-content;
+    height: fit-content;
+    
     &.primary, &.secondary {
         padding: 0.5em;
+        margin: 0.1em;
         text-transform: uppercase;
         font-size: larger;
         box-shadow: 0px 0px 2px 0px #000000;
         transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
-        line-height: 3em;
         filter: brightness(100%);
     
         &:active {
@@ -40,11 +43,8 @@
             filter: brightness(90%);
         }
     }
-    
-    &.primary {
-    }
 }
 
-.text-white [role=button]:not(.primary), [role=button]:not(.primary).text-white {
+.text-white [role=button]:not(.primary) a, [role=button]:not(.primary).text-white a, nav.text-white [role=button]:not(.primary) {
     color: white;
 }

assets/scss/footer.scss

@@ -30,7 +30,7 @@ footer {
     }
 }
 
-.footer-social-list {
+.social-list {
     display: flex;
     font-size: 30px;
     a {