diff --git a/docs/static/style.css b/docs/static/style.css
index 0abaec3..b7a6ad0 100644
--- a/docs/static/style.css
+++ b/docs/static/style.css
@@ -373,10 +373,42 @@ th {
background: var(--bg-sidebar);
}
+/* Navigation toggle (hidden by default) */
+.nav-toggle {
+ display: none;
+}
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 24px;
+ height: 18px;
+ cursor: pointer;
+ padding: 0;
+ user-select: none;
+}
+
+.hamburger span {
+ display: block;
+ width: 100%;
+ height: 2px;
+ background: var(--fg);
+ border-radius: 1px;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ transform-origin: center;
+}
+
/* Responsive */
@media (max-width: 768px) {
+ html {
+ overflow-x: hidden;
+ }
+
body {
grid-template-columns: 1fr;
+ max-width: 100vw;
+ overflow-x: hidden;
}
.sidebar {
@@ -384,9 +416,75 @@ th {
height: auto;
border-right: none;
border-bottom: 1px solid var(--border);
+ padding: 1rem 1.5rem;
+ }
+
+ .sidebar header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ }
+
+ .sidebar .tagline {
+ display: none;
+ }
+
+ /* Position hamburger on right side of header */
+ .sidebar header {
+ position: relative;
+ }
+
+ .hamburger {
+ display: flex;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .sidebar nav {
+ flex-direction: column;
+ padding-top: 0;
+ margin-top: 0;
+ border-top: 1px solid var(--border);
+ max-height: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
+ }
+
+ /* Show nav when checkbox is checked - checkbox is inside header now */
+ .sidebar:has(.nav-toggle:checked) nav {
+ max-height: 500px;
+ opacity: 1;
+ margin-top: 1rem;
+ padding-top: 1rem;
+ }
+
+ /* Hamburger → X morph animation */
+ .nav-toggle:checked~.hamburger span:nth-child(1) {
+ transform: translateY(8px) rotate(45deg);
+ }
+
+ .nav-toggle:checked~.hamburger span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .nav-toggle:checked~.hamburger span:nth-child(3) {
+ transform: translateY(-8px) rotate(-45deg);
+ }
+
+ .sidebar-footer {
+ display: none;
}
main {
- padding: 2rem 1.5rem;
+ padding: 1.5rem 1rem;
+ max-width: 100%;
+ }
+
+ pre {
+ max-width: calc(100vw - 2rem);
}
}
\ No newline at end of file
diff --git a/docs/templates/base.html b/docs/templates/base.html
index 54a43e8..3bb63be 100644
--- a/docs/templates/base.html
+++ b/docs/templates/base.html
@@ -4,12 +4,17 @@
- {% if page.description %}{% endif %}
+ {% if page.description %}
+ {% endif %}
{{ title }} | {{ config.title }}
-
-
+
+
@@ -21,6 +26,12 @@
sukr
suckless static sites
+
+