servius/sukr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): add responsive hamburger menu with animations

Browse Source 
Implement pure CSS mobile navigation with the following features:

- Collapsible sidebar nav hidden behind hamburger toggle on mobile
- Animated hamburger → X icon morph using CSS transforms
- Smooth slide-down transition for nav reveal (max-height/opacity)
- Hamburger positioned on right side of header via absolute positioning
- Uses :has() selector to detect checkbox state without JavaScript
- Overflow fixes to prevent horizontal scroll on mobile devices

The implementation follows suckless principles with zero JavaScript.
This commit is contained in:
Timothy DeHerrera
2026-02-01 08:32:24 -07:00
parent 516df62796
commit 99fc4c0fc7
2 changed files with 113 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/templates/base.html vendored
View File

@@ -4,12 +4,17 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% if page.description %}<meta name="description" content="{{ page.description }}" />{% endif %}
{% if page.description %}
<meta name="description" content="{{ page.description }}" />{% endif %}
<title>{{ title }} | {{ config.title }}</title>
<link rel="canonical" href="{{ base_url }}{{ page_path }}" />
<link rel="stylesheet" href="{{ prefix }}/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous" /></noscript>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
crossorigin="anonymous" />
</noscript>
<link rel="icon" type="image/png" href="{{ prefix }}/logo.png" />
</head>
@@ -21,6 +26,12 @@
sukr
</a>
<span class="tagline">suckless static sites</span>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<label for="nav-toggle" class="hamburger" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</label>
</header>
<nav>
{% for item in nav %}<a href="{{ prefix }}{{ item.path }}" {% if page_path==item.path %} class="active" {% endif