From 189802f82b987f79b86f680b0143dfec5c6a961d Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Tue, 28 Apr 2026 10:35:59 +0200
Subject: [PATCH] mobile nav

---
 style.css | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index 3c7ee49..60e8a74 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,6 @@ nav {
     backdrop-filter: blur(var(--backdrop-blur));
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
-    height: var(--nav-height);
 }
 
 nav > div {
@@ -24,17 +23,40 @@ nav > div {
     /* content inside */
     display: grid;
     grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: 1fr;
     align-items: center;
 
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 1rem;
+    }
+
     & :last-child {
         justify-self: end
     }
 
+
+    & > .btn {
+        @media (max-width: 768px) {
+            grid-column: 2;
+            grid-row: 1;
+        }
+    }
+
     & > div {
         display: flex;
         align-items: center;
         gap: 2rem;
 
+        @media (max-width: 768px) {
+            grid-row: 2;
+            grid-column: 1/ span 2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
         & > a {
             font-size: 1.25rem;
             color: var(--on-background);
@@ -56,6 +78,7 @@ nav > div {
                 padding-bottom: 8px;
                 border-bottom: 2px solid var(--primary);
             }
+
         }
     }
 }
@@ -63,10 +86,6 @@ nav > div {
 .hero {
     max-width: var(--max-content-width);
     height: 800px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
 
     & > div {
         display: grid;