snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs): keep mobile header controls visible

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-06-07 12:52:21 +02:00
parent a73bcebbd6
commit 25d8188970
9 changed files with 189 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/mobile-docs-header-controls.md
+5
View File
@@ -0,0 +1,5 @@
---
"@jmfederico/pi-web": patch
---
Keep the documentation site's GitHub and theme controls visible in mobile portrait layouts.
docs/404.html
+4
View File
@@ -28,11 +28,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="/" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="/remote-first.html">Remote-first</a>
<a href="/machines.html">Fleet</a>
<a href="/install.html">Install</a>
<a href="/plugins.html">Plugins</a>
<a href="/faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -47,6 +50,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/faq.html
+4
View File
@@ -27,11 +27,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html">Remote-first</a>
<a href="machines.html">Fleet</a>
<a href="install.html">Install</a>
<a href="plugins.html">Plugins</a>
<a href="faq.html" aria-current="page">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -46,6 +49,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/index.html
+4
View File
@@ -34,11 +34,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html">Remote-first</a>
<a href="machines.html">Fleet</a>
<a href="install.html">Install</a>
<a href="plugins.html">Plugins</a>
<a href="faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -53,6 +56,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/install.html
+4
View File
@@ -27,11 +27,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html">Remote-first</a>
<a href="machines.html">Fleet</a>
<a href="install.html" aria-current="page">Install</a>
<a href="plugins.html">Plugins</a>
<a href="faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -46,6 +49,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/machines.html
+4
View File
@@ -30,11 +30,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html">Remote-first</a>
<a href="machines.html" aria-current="page">Fleet</a>
<a href="install.html">Install</a>
<a href="plugins.html">Plugins</a>
<a href="faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -49,6 +52,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/plugins.html
+4
View File
@@ -27,11 +27,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html">Remote-first</a>
<a href="machines.html">Fleet</a>
<a href="install.html">Install</a>
<a href="plugins.html" aria-current="page">Plugins</a>
<a href="faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -46,6 +49,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/remote-first.html
+4
View File
@@ -30,11 +30,14 @@
<nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links">
<div class="nav-pages">
<a href="remote-first.html" aria-current="page">Remote-first</a>
<a href="machines.html">Fleet</a>
<a href="install.html">Install</a>
<a href="plugins.html">Plugins</a>
<a href="faq.html">FAQ</a>
</div>
<div class="nav-actions">
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
<path
@@ -49,6 +52,7 @@
<span data-theme-label>Theme</span>
</button>
</div>
</div>
</nav>
</header>
docs/styles.css
+30 -17
View File
@@ -197,16 +197,29 @@ video {
background: var(--brand-2);
}
.nav-links {
.nav-links,
.nav-pages,
.nav-actions {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.nav-links {
color: var(--muted);
font-size: 0.95rem;
white-space: nowrap;
}
.nav-pages {
flex: 0 1 auto;
}
.nav-actions {
flex: 0 0 auto;
}
.nav-links a,
.theme-toggle {
display: inline-flex;
@@ -1081,19 +1094,23 @@ html[data-theme="light"] .comment {
}
.nav-links {
flex-wrap: nowrap;
overflow-x: auto;
overflow: visible;
width: 100%;
}
.nav-pages {
flex: 1 1 auto;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nav-links a:not(.github-link) {
.nav-pages a {
flex: 0 0 auto;
}
.nav-links::-webkit-scrollbar {
.nav-pages::-webkit-scrollbar {
display: none;
}
@@ -1103,26 +1120,22 @@ html[data-theme="light"] .comment {
padding: 0 10px;
}
.nav-links .github-link,
.nav-links .theme-toggle {
.nav-actions {
position: absolute;
top: 14px;
right: 0;
}
.nav-actions .github-link,
.nav-actions .theme-toggle {
justify-content: center;
width: 38px;
min-width: 38px;
padding: 0;
}
.nav-links .github-link {
right: 44px;
}
.nav-links .theme-toggle {
right: 0;
}
.nav-links .github-link span,
.nav-links .theme-toggle [data-theme-label] {
.nav-actions .github-link span,
.nav-actions .theme-toggle [data-theme-label] {
display: none;
}
}