docs: a Markdown reader on the site, and the flag stays up
Two additions to docs/Website. **The reader.** docs.html renders the 29 documents in docs/ in the site's own theme -- index down the left, table of contents down the right, and links between documents rewritten so ../history/schfs.md navigates inside the reader instead of downloading a file. The parser is ~150 lines in docs.js, not a dependency: it handles exactly what docs/ uses, and a Markdown library would outweigh every other asset here combined. Everything is escaped before a tag is emitted, so the only HTML that reaches the page is HTML docs.js wrote. Verified by rendering all 30 documents (302 KB of Markdown) with zero failures, no unrestored sentinels and no runaway loops. One caveat, stated in the page itself rather than hidden: browsers block fetch() on file:// URLs, so this page needs a server. It says so, with the command, and offers the raw file as a fallback. The rest of the site is unaffected. **The flag.** A Progress Pride flag in the top bar and a line in the footer, on both pages, permanently. Support with an end date is marketing. It is deliberately small and deliberately not a page of its own -- this is an operating system, and the flag is a statement, not a subject. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VQ7Qx8E1q1M1bbCq8QLHS2
This commit is contained in:
Nexoniarz
parent
81af69bf53
commit
ef94fac4ac
6 changed files with 708 additions and 8 deletions
|
|
@ -369,3 +369,210 @@ footer .mono { font-size: 0.78rem; }
|
|||
vertical-align: -0.22em;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
The pride mark
|
||||
---------------------------------------------------------------------
|
||||
Small, and permanent. It is in the top bar in November the same way it
|
||||
is in June, which is the only version of this that means anything --
|
||||
support with an end date is marketing.
|
||||
|
||||
Deliberately not bigger than this. The site is about an operating
|
||||
system; the flag is a statement, not a subject.
|
||||
===================================================================== */
|
||||
|
||||
.pride {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
border-radius: 2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.pride img {
|
||||
width: 26px;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
/* Sits down slightly against the dark ground so it reads as part of the
|
||||
bar rather than as a sticker on top of it; full colour on hover. */
|
||||
opacity: 0.85;
|
||||
transition: opacity .18s ease, transform .18s ease;
|
||||
}
|
||||
.pride:hover img { opacity: 1; transform: translateY(-1px); }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pride img { transition: none; }
|
||||
.pride:hover img { transform: none; }
|
||||
}
|
||||
|
||||
.pride-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-basis: 100%;
|
||||
color: var(--dim);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.pride-note img { width: 20px; height: auto; border-radius: 2px; flex: none; }
|
||||
|
||||
/* =====================================================================
|
||||
The documentation reader
|
||||
===================================================================== */
|
||||
|
||||
body.reading { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
body.reading footer { margin-top: auto; }
|
||||
|
||||
.docshell {
|
||||
width: min(100% - 2.5rem, 84rem);
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 15rem minmax(0, 1fr) 13rem;
|
||||
gap: clamp(1.5rem, 3vw, 3rem);
|
||||
align-items: start;
|
||||
padding-block: 2.5rem 4rem;
|
||||
}
|
||||
@media (max-width: 72rem) { .docshell { grid-template-columns: 14rem minmax(0, 1fr); } .rail { display: none; } }
|
||||
@media (max-width: 54rem) { .docshell { grid-template-columns: 1fr; } .sidebar .sticky { position: static; max-height: none; } }
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
max-height: calc(100vh - 6rem);
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.navgroup {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
color: var(--dim);
|
||||
margin: 1.6rem 0 0.5rem;
|
||||
}
|
||||
.navgroup:first-child { margin-top: 0; }
|
||||
|
||||
#docnav ul, #toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
||||
#docnav a, #toc a {
|
||||
display: block;
|
||||
padding: 0.28rem 0.6rem;
|
||||
margin-left: -0.6rem;
|
||||
border-radius: 3px;
|
||||
color: var(--dim);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
#docnav a:hover, #toc a:hover { color: var(--fg); background: var(--surface); }
|
||||
#docnav a.on {
|
||||
color: var(--fg);
|
||||
background: var(--accent-dim);
|
||||
box-shadow: inset 2px 0 0 var(--accent);
|
||||
}
|
||||
#toc .lvl3 a { padding-left: 1.5rem; font-size: 0.8rem; }
|
||||
|
||||
/* ---- prose ---------------------------------------------------------- */
|
||||
|
||||
.prose { max-width: 46rem; }
|
||||
.prose .loading { color: var(--dim); font-family: var(--mono); font-size: 0.85rem; }
|
||||
|
||||
.prose h1 {
|
||||
font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 2.75rem 0 0.9rem;
|
||||
padding-top: 1.6rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.prose h3 { font-size: 1.1rem; font-weight: 700; margin: 2rem 0 0.6rem; }
|
||||
.prose h4, .prose h5, .prose h6 { font-size: 0.95rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--dim); }
|
||||
|
||||
.prose p, .prose li { color: #C6CAD3; }
|
||||
.prose p { margin: 0 0 1.1rem; max-width: none; }
|
||||
.prose strong { color: var(--fg); }
|
||||
.prose a { color: var(--accent); }
|
||||
|
||||
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.prose li { line-height: 1.6; }
|
||||
.prose li::marker { color: var(--accent); }
|
||||
|
||||
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.25rem 0; }
|
||||
|
||||
.prose blockquote {
|
||||
margin: 1.4rem 0;
|
||||
padding: 0.2rem 0 0.2rem 1.1rem;
|
||||
border-left: 2px solid var(--accent);
|
||||
color: var(--dim);
|
||||
}
|
||||
.prose blockquote p:last-child { margin-bottom: 0; }
|
||||
|
||||
.prose pre.code {
|
||||
background: #090B0F;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
padding: 0.95rem 1.1rem;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 1.3rem;
|
||||
position: relative;
|
||||
}
|
||||
.prose pre.code code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.815rem;
|
||||
line-height: 1.7;
|
||||
color: #CBD1DC;
|
||||
background: none;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
.prose pre.code[data-lang]::after {
|
||||
content: attr(data-lang);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.7rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--dim);
|
||||
}
|
||||
|
||||
.prose :not(pre) > code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85em;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
color: #D8DCE4;
|
||||
padding: 0.08em 0.36em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
|
||||
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
|
||||
.prose th, .prose td {
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: top;
|
||||
}
|
||||
.prose th {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.prose td { color: #C6CAD3; }
|
||||
.prose tbody tr:hover td { background: var(--surface); }
|
||||
|
||||
.prose img { max-width: 100%; height: auto; }
|
||||
|
||||
.top nav a.on { color: var(--fg); }
|
||||
|
||||
.readerlink { margin-top: 2rem; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue