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
+22 -18
View File
@@ -28,24 +28,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="/" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="/" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="/remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="/machines.html">Fleet</a> <a href="/remote-first.html">Remote-first</a>
<a href="/install.html">Install</a> <a href="/machines.html">Fleet</a>
<a href="/plugins.html">Plugins</a> <a href="/install.html">Install</a>
<a href="/faq.html">FAQ</a> <a href="/plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="/faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/faq.html
+22 -18
View File
@@ -27,24 +27,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="machines.html">Fleet</a> <a href="remote-first.html">Remote-first</a>
<a href="install.html">Install</a> <a href="machines.html">Fleet</a>
<a href="plugins.html">Plugins</a> <a href="install.html">Install</a>
<a href="faq.html" aria-current="page">FAQ</a> <a href="plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html" aria-current="page">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/index.html
+22 -18
View File
@@ -34,24 +34,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="machines.html">Fleet</a> <a href="remote-first.html">Remote-first</a>
<a href="install.html">Install</a> <a href="machines.html">Fleet</a>
<a href="plugins.html">Plugins</a> <a href="install.html">Install</a>
<a href="faq.html">FAQ</a> <a href="plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/install.html
+22 -18
View File
@@ -27,24 +27,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="machines.html">Fleet</a> <a href="remote-first.html">Remote-first</a>
<a href="install.html" aria-current="page">Install</a> <a href="machines.html">Fleet</a>
<a href="plugins.html">Plugins</a> <a href="install.html" aria-current="page">Install</a>
<a href="faq.html">FAQ</a> <a href="plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/machines.html
+22 -18
View File
@@ -30,24 +30,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="machines.html" aria-current="page">Fleet</a> <a href="remote-first.html">Remote-first</a>
<a href="install.html">Install</a> <a href="machines.html" aria-current="page">Fleet</a>
<a href="plugins.html">Plugins</a> <a href="install.html">Install</a>
<a href="faq.html">FAQ</a> <a href="plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/plugins.html
+22 -18
View File
@@ -27,24 +27,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html">Remote-first</a> <div class="nav-pages">
<a href="machines.html">Fleet</a> <a href="remote-first.html">Remote-first</a>
<a href="install.html">Install</a> <a href="machines.html">Fleet</a>
<a href="plugins.html" aria-current="page">Plugins</a> <a href="install.html">Install</a>
<a href="faq.html">FAQ</a> <a href="plugins.html" aria-current="page">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/remote-first.html
+22 -18
View File
@@ -30,24 +30,28 @@
<nav class="container nav" aria-label="Main navigation"> <nav class="container nav" aria-label="Main navigation">
<a class="brand" href="./" aria-label="PI WEB home">PI WEB</a> <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
<div class="nav-links"> <div class="nav-links">
<a href="remote-first.html" aria-current="page">Remote-first</a> <div class="nav-pages">
<a href="machines.html">Fleet</a> <a href="remote-first.html" aria-current="page">Remote-first</a>
<a href="install.html">Install</a> <a href="machines.html">Fleet</a>
<a href="plugins.html">Plugins</a> <a href="install.html">Install</a>
<a href="faq.html">FAQ</a> <a href="plugins.html">Plugins</a>
<a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub"> <a href="faq.html">FAQ</a>
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true"> </div>
<path <div class="nav-actions">
fill="currentColor" <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z" <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
/> <path
</svg> fill="currentColor"
<span>GitHub</span> d="M8 0C3.58 0 0 3.67 0 8.2c0 3.63 2.29 6.7 5.47 7.79.4.08.55-.18.55-.4 0-.2-.01-.85-.01-1.55-2.01.38-2.53-.5-2.69-.96-.09-.24-.48-.96-.82-1.16-.28-.16-.68-.56-.01-.57.63-.01 1.08.59 1.23.84.72 1.24 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.04 0-.89.31-1.62.82-2.2-.08-.2-.36-1.03.08-2.16 0 0 .67-.22 2.2.84A7.4 7.4 0 0 1 8 3.94c.68 0 1.36.09 2 .28 1.53-1.06 2.2-.84 2.2-.84.44 1.13.16 1.96.08 2.16.51.58.82 1.31.82 2.2 0 3.14-1.87 3.83-3.65 4.04.29.26.54.76.54 1.53 0 1.1-.01 1.99-.01 2.27 0 .22.15.49.55.4A8.12 8.12 0 0 0 16 8.2C16 3.67 12.42 0 8 0Z"
</a> />
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme"> </svg>
<span data-theme-icon aria-hidden="true">◐</span> <span>GitHub</span>
<span data-theme-label>Theme</span> </a>
</button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle light and dark theme">
<span data-theme-icon aria-hidden="true">◐</span>
<span data-theme-label>Theme</span>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
docs/styles.css
+30 -17
View File
@@ -197,16 +197,29 @@ video {
background: var(--brand-2); background: var(--brand-2);
} }
.nav-links { .nav-links,
.nav-pages,
.nav-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
min-width: 0; min-width: 0;
}
.nav-links {
color: var(--muted); color: var(--muted);
font-size: 0.95rem; font-size: 0.95rem;
white-space: nowrap; white-space: nowrap;
} }
.nav-pages {
flex: 0 1 auto;
}
.nav-actions {
flex: 0 0 auto;
}
.nav-links a, .nav-links a,
.theme-toggle { .theme-toggle {
display: inline-flex; display: inline-flex;
@@ -1081,19 +1094,23 @@ html[data-theme="light"] .comment {
} }
.nav-links { .nav-links {
flex-wrap: nowrap; overflow: visible;
overflow-x: auto;
width: 100%; width: 100%;
}
.nav-pages {
flex: 1 1 auto;
overflow-x: auto;
padding-bottom: 2px; padding-bottom: 2px;
scrollbar-width: none; scrollbar-width: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.nav-links a:not(.github-link) { .nav-pages a {
flex: 0 0 auto; flex: 0 0 auto;
} }
.nav-links::-webkit-scrollbar { .nav-pages::-webkit-scrollbar {
display: none; display: none;
} }
@@ -1103,26 +1120,22 @@ html[data-theme="light"] .comment {
padding: 0 10px; padding: 0 10px;
} }
.nav-links .github-link, .nav-actions {
.nav-links .theme-toggle {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 0;
}
.nav-actions .github-link,
.nav-actions .theme-toggle {
justify-content: center; justify-content: center;
width: 38px; width: 38px;
min-width: 38px; min-width: 38px;
padding: 0; padding: 0;
} }
.nav-links .github-link { .nav-actions .github-link span,
right: 44px; .nav-actions .theme-toggle [data-theme-label] {
}
.nav-links .theme-toggle {
right: 0;
}
.nav-links .github-link span,
.nav-links .theme-toggle [data-theme-label] {
display: none; display: none;
} }
} }