Stuff

3 files changed, 64 insertions, 1 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index db58044..6a669d9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4,7 +4,7 @@ body {
     background: var(--base);
     color: var(--text);
     margin: 0;
-    padding: 0;
+    padding: 0.2rem;
 }
 
 a {
@@ -93,4 +93,54 @@ footer .social {
     header h1 {
         font-size: medium;
     }
+}
+
+.mobile-menu {
+    display: none;
+}
+
+@media screen and (max-width: 500px) {
+    nav {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background-color: var(--base);
+        z-index: 10000;
+        padding: 1.5rem 0.5rem;
+        transform: scale(0%);
+        filter: saturate(0) brightness(0);
+        pointer-events: none;
+        transition: transform steps(8) 200ms 300ms,filter steps(4) 200ms 0ms;
+        overflow-y: auto;
+    }
+    .mobile-menu {
+        display: block;
+        background: none;
+        color: var(--text);
+        border: none;
+        font-weight: bold;
+        padding: 0.8rem;
+    }
+    
+    nav.open {
+        transform: scale(100%);
+        pointer-events: all;
+        filter: saturate(1) brightness(1);
+        transition: transform steps(8) 200ms,filter steps(4) 200ms 300ms;
+    }
+    nav ul {
+        flex-direction: column;
+    }
+    nav .mobile-menu {
+        width: 100%;
+        text-align: right;
+        margin-bottom: 1rem;
+    }
+    nav ul a {
+        display: block;
+        padding: 0.5rem;
+    }
 }
\ No newline at end of file
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 725bda4..d47d9b9 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -9,4 +9,7 @@ html {
 
 
     font-family: "JetBrains Mono", monospace;
+}
+* {
+    font-family: "JetBrains Mono", monospace;
 }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index bd14b0c..d32765e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,3 +1,13 @@
+const menuOpen = document.getElementById("menu-open");
+const menu = document.getElementById("menu");
+const menuClose = document.getElementById("menu-close");
+
+if (menu && menuOpen && menuClose) {
+    menuOpen.addEventListener("click", () => menu.classList.add("open"));
+    menuClose.addEventListener("click", () => menu.classList.remove("open"));
+}
+
+
 const elements = document.querySelectorAll(".my-age")
 
 const specificDate = new Date("2010-05-11T22:50:00");