From b027f1f4fb3f3240f64774e993787e4d4c0c6f0b Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Tue, 1 Oct 2024 11:03:06 -0500
Subject: [PATCH] wip nonjs mobile dropdown

---
 index.html | 22 +++++++++------
 style.css  | 82 +++++++++++++++++++++++++++++++-----------------------
 2 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/index.html b/index.html
index 6922a75..167427f 100644
--- a/index.html
+++ b/index.html
@@ -26,14 +26,20 @@
 <!-- top navbar -->
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
-    <div class="mobile-dropdown">
-        <button onclick="mobileDropdown()" class="nav-base nav-baselink-mobile"><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</button>
-        <div id="dropdown-box" class="dropdown-content">
-            <a href="/"><i class="ph-bold ph-house"></i> home</a>
-            <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
-            <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
-        </div>
-    </div>
+    <details class="nav-base nav-baselink-mobile">
+        <summary><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</summary>
+        <ul>
+            <li>
+                <a href="/"><i class="ph-bold ph-house"></i> home</a>
+            </li>
+            <li>
+                <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
+            </li>
+            <li>
+                <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+            </li>
+        </ul>
+    </details>
     <nav class="nav-base nav-links">
         <a href="/"><i class="ph-bold ph-house"></i> home</a>
         <i class="ph-bold ph-dot"></i>
diff --git a/style.css b/style.css
index 31642c7..1e8f8d1 100644
--- a/style.css
+++ b/style.css
@@ -171,7 +171,7 @@ body {
         color: var(--crust);
         margin-left: .5em !important;
     }
-    .mobile-dropdown {
+    .nav-baselink-mobile {
         display: none;
     }
     .nav-links {
@@ -633,48 +633,60 @@ footer {
         .nav-baselink {
             display: none !important;
         }
-        .mobile-dropdown {
-          position: relative !important;
-          display: inline-block !important;
-        }
-        .dropdown-content {
-          display: none;
-          position: absolute;
-          margin: .5em 0px 0px .4em !important;
-          background-color: var(--base);
-          min-width: 2em;
-          border-radius: 8px;
-          box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
-          z-index: 1;
-          a {
-            display: inline-flex;
-            align-items: center;
-            color: var(--text);
-            padding: .6em .7em;
-            text-decoration: none;
-          }
-          a:hover {
-            color: var(--green);
-            text-decoration: underline;
-          }
-          i {
-            padding-right: .4em;
-          }
-        }
-        .show-dropdown {
-          display: block;
-        }
         .nav-baselink-mobile {
             display: block !important;
+            position: absolute;
+            margin: 2em 0px 0px .4em !important;
+            min-width: 2em;
+            border-radius: 8px;
+            z-index: 9999;
+            padding: unset !important;
+            box-shadow: unset !important;
+            top: -2em;
+
+            a {
+                display: inline-flex;
+                align-items: center;
+                color: var(--text);
+                padding: .6em .7em;
+                text-decoration: none;
+            }
+
+            a:hover {
+                color: var(--green);
+                text-decoration: underline;
+            }
+
+            i {
+                padding-right: .4em;
+            }
+
+            ul {
+                background-color: var(--base);
+                box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
+                border-radius: 8px;
+
+                li {
+                    list-style-type: none;
+                    margin-left: -2em;
+                    padding-bottom: unset !important;
+                }
+            }
+        }
+        .nav-baselink-mobile summary {
+            display: block !important;
+            margin-top: 0px !important;
             font-family: 'Lexend Deca', system-ui, sans-serif;
             background-color: var(--green);
+            box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
             text-decoration: unset !important;
             color: var(--crust);
-            margin-left: .4em !important;
-            border: unset !important;
+            padding: .3em;
+            border-radius: 8px;
+
             i:not(:first-child) {
                 margin-left: -.5em;
-                margin-right: -.5em;
+                margin-right: -.9em;
                 opacity: .6;
             }
         }