twisla/roro9stack
Public Access
1
0
Fork 0
Code Issues 46 Pull Requests 2 Actions Packages Releases 20 Activity

Site: search over the documentation (#60)
Site / build (pull_request) Successful in 12s
Details

Browse Source 
A search page whose index is the page itself: one item for each page and
each heading of the guide, the how-tos, the FAQ and the developer docs,
written by Zola from the pages' own content. A small script filters and
ranks them as you type. Nothing is fetched, so the Content-Security-Policy
needs nothing new; without JavaScript the page is a list of every heading.

The navigation gets a link, and the documentation's index pages a box that
is a plain form to /search/?q=. The devlog is not searched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EhqxQ49eCju4CzKYNjZzwT
This commit is contained in:
twisla
2026-10-07 18:50:33 +02:00
co-authored by Claude Opus 5.5
parent 5823584bfd
commit 834c6eb0f2
10 changed files with 251 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/static/css/site.css
+23
View File
@@ -263,3 +263,26 @@ footer small { display: block; max-width: 760px; }
.prose .keys td { padding: 4px 8px 4px 0; border-bottom: 0; font-size: 15px; }
.prose .keys td:first-child { white-space: nowrap; width: 1%; padding-right: 16px; }
.prose .keys kbd { white-space: pre; }
/* Search (issue #60): the search page's box, its results and its index; the small box on the
documentation's index pages. */
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 8px; max-width: 720px; }
.search-form label { flex-basis: 100%; font: 400 14px/20px var(--mono); color: var(--muted); }
.search-form input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; font: 400 16px/24px var(--sans); color: var(--ink); background: var(--s2); border: 1px solid var(--line); }
.search-form input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.search-mini { margin: 16px 0 32px; max-width: 520px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.s-status { min-height: 24px; margin: 8px 0; }
.s-results, .s-index ul { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.s-results li { padding: 16px 0; border-top: 1px solid var(--line); }
.s-results a { font: 500 18px/24px var(--sans); }
.s-results p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.s-results mark { background: none; color: var(--orangetext); font-weight: 600; }
.s-where { display: block; font: 400 12px/16px var(--mono); color: var(--muted); }
.s-index section { margin: 0 0 32px; }
.s-index h2 { font: 500 14px/20px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyantext); }
.s-index li { padding: 2px 0; }
.s-index li.s-part { padding-left: 20px; }
.s-index .s-where, .s-index .s-text { display: none; }
.s-index a:hover { text-decoration: underline; text-underline-offset: 4px; }
.js .s-nojs { display: none; }