/*
doc.css styles the six static document pages: about.html, privacy.html,
terms.html and experimental.html, which the home page's footer links to,
and add.html and search-engine.html, which Experimental lists. Cloudflare
serves it as-is from web/public at /doc.css. It loads no web fonts.
The type and spacing follow the simple-blog reference in bashroom
(/rooms/design/notes/simple-blog-style.md, the Long Lake Labs blog). Body
text is system sans at 15px with a 1.45 line height in a 42em column. The
title is 26px and section headings are 20px, both at weight 600. An italic
grey byline sits under the title. Paragraphs are 18px apart, and the footer
sits under one hairline. The colours come from the home page
(web/src/search/style.css :root), and the name at the top of each page uses
the home page's serif. The home page has no dark mode, so these pages have
none either.
Page structure:
flâneur the name, linking to "/"
src/search-footer.test.mjs checks that each page's footer links match the
home page's, that a footer page marks its own link with aria-current, and
that Experimental lists what the footer leaves out.
WCAG contrast on white: ink 15.2, link 6.5, muted 5.3. The link green is
only about 1.4:1 against the body text, so links keep their underline.
*/
:root {
--paper: #ffffff; /* the page, white as on the home page */
--ink: #262624; /* text */
--muted: #6f6b64; /* the byline, small print, and the footer */
--link: #1e6b47; /* links, the home page's green */
--hair: rgba(38, 38, 36, .07); /* the footer hairline, ink at 7% */
--faint: #9c988f; /* quiet marks that carry no words: a file tree's connectors (the search page's) */
--shadow-pop: 0 8px 24px rgba(38, 38, 36, .1); /* a menu over the page, as on the search page */
--vine-ink: var(--link); /* the only colour vine.js draws in, with --paper for veins */
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
--serif: "Iowan Old Style", "Iowan Old Style BT", Georgia, serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
max-width: 650px;
margin: 50px auto;
padding: 0 10px;
background: var(--paper);
color: var(--ink);
font: 400 15px/1.45 var(--sans);
font-feature-settings: "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
}
main, .foot { max-width: 42em; margin: 15px auto; }
::selection { color: var(--paper); background: var(--ink); }
/* The name at the top of the column, in the home page's serif. It links to
"/". The simple blog puts its logo here. */
.home {
display: inline-block;
margin: 0 0 32px;
color: var(--ink);
font: 400 26px/1 var(--serif);
letter-spacing: -0.01em;
text-decoration: none;
view-transition-name: name;
}
h1, h2, h3 { color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { margin: 0 0 30px; font-size: 26px; line-height: 1.15; }
h2 { margin: 34px 0 16px; font-size: 20px; line-height: 1.2; }
h3 { margin: 24px 0 8px; font-size: 15px; line-height: 1.3; }
h1 + .muted { margin: -22px 0 30px; font-style: italic; } /* the byline */
p, li, blockquote { text-wrap: pretty; }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 28px 34px; padding: 0; }
li { margin: 8px 0; }
li > ul { margin: 8px 0 0 22px; }
strong, b { font-weight: 600; }
code { font: 0.86em/1 var(--mono); overflow-wrap: anywhere; }
.muted { color: var(--muted); font-size: 14px; }
/* An index (experimental.html): the simple blog's list of italic names at
18px, each with what it is under it in .muted. The link's hit area grows
by 8px above and below without moving the line. */
.index { margin-left: 0; list-style: none; }
.index li { margin: 0 0 14px; }
.index a { display: inline-block; padding: 8px 0; margin: -8px 0; font-size: 18px; font-style: italic; }
/* Links keep a 1px underline in their own colour at 45%. The hover colour
appears at once, and leaving hover fades back over 150ms. */
a {
color: var(--link);
text-decoration: underline 1px;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 0.15em;
text-decoration-skip-ink: auto;
transition: color 150ms ease, text-decoration-color 150ms ease;
}
a:hover { text-decoration-color: currentColor; transition-duration: 0ms; }
a.home, a.home:hover { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
/* The Add a page form (add.html, add.js): a label, one field and a button,
after Google's old Add URL page. It adds and does not search, so it has
none of the search bar's shape: a plain field and an outlined button.
What came back sits under it in .add-out. */
.add-form { margin: 26px 0 0; }
.add-form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.add-row { display: flex; gap: 8px; }
.add-row input {
flex: 1 1 auto;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--muted);
border-radius: 2px;
background: var(--paper);
color: var(--ink);
font: 400 15px/1.3 var(--sans);
}
.add-row button {
flex: 0 0 auto;
padding: 8px 16px;
border: 1px solid var(--muted);
border-radius: 2px;
background: var(--paper);
color: var(--ink);
font: 400 15px/1.3 var(--sans);
cursor: pointer;
}
.add-row button:hover { border-color: var(--ink); }
.add-row button:disabled { color: var(--muted); border-color: var(--hair); cursor: default; }
:is(.add-row input, .add-row button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.add-out { min-height: 20px; margin: 14px 0 26px; }
.add-out p { margin: 0 0 4px; }
.add-why { color: var(--muted); } /* a refusal: the Worker's reason, as the results page shows it */
/* The page that came back, as a search result (add.js row, after .r in
web/src/search/style.css): the title, in ink, is the link to the page
itself; under it the site's icon, the green address and Google 2014's ▾,
whose menu holds Cached, flâneur's own page for it. The icon sits on the
address line, as on the search page at phone width. */
.add-r { margin: 6px 0 10px; }
.add-rt { margin: 0; font-size: 17px; font-weight: 400; line-height: 22px; }
.add-rt a { color: var(--ink); text-decoration: none; }
.add-rt a:hover { text-decoration: underline; }
.add-rs { display: flex; align-items: center; gap: 6px; height: 20px; margin-top: 2px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.add-fav { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px; overflow: hidden; }
.add-fav img { display: block; width: 16px; height: 16px; }
.add-fav.blank { box-shadow: inset 0 0 0 1px var(--hair); } /* a site with no icon anywhere */
.add-ru { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--link); }
.add-rm { position: relative; flex: 0 0 auto; margin-left: -4px; }
.add-rm summary { display: block; width: 16px; height: 20px; color: var(--link); font-size: 11px; text-align: center; list-style: none; cursor: pointer; }
.add-rm summary::-webkit-details-marker { display: none; }
.add-rm summary::after { content: ""; position: absolute; inset: -4px; } /* a 24 x 28 px hit area */
.add-rm summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 2px; }
.add-rmi {
position: absolute;
top: 22px;
left: -8px;
z-index: 1;
padding: 6px 14px;
border: 1px solid var(--hair);
border-radius: 2px;
background: var(--paper);
box-shadow: var(--shadow-pop);
color: var(--ink);
font-size: 13px;
line-height: 20px;
white-space: nowrap;
text-decoration: none;
}
.add-rmi:hover { text-decoration: underline; }
/* The crawl's pages as a file tree (web/src/site-tree.js), under the added
page's row, as the results page draws them under its own: a name links
its page, a folder flâneur has no page for is muted, and the connectors
are borders in --faint. One 22px line per name, in the page's 14px. */
.tree { margin: 10px 0 0; font-size: 14px; line-height: 22px; }
.tree-l { margin: 0; padding: 0; list-style: none; }
.tree-l li { position: relative; margin: 0; padding-left: 16px; }
.tree-l li::before { content: ""; position: absolute; left: 4px; top: 0; width: 8px; height: 11px; border-left: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.tree-l li::after { content: ""; position: absolute; left: 4px; top: 11px; bottom: 0; border-left: 1px solid var(--faint); }
.tree-l li:last-child::after { content: none; }
.tree-l a, .tree-d { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.tree-l a { text-decoration: none; }
.tree-l a:hover { text-decoration: underline; }
.tree-d { color: var(--muted); }
.tree-n { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
/* The footer: the home page's four links under one hairline. vine.js grows
a meadow in .vine, up from the hairline, when the footer scrolls into
view. A link's hit area reaches 12px above and below and 8px to each side,
as the simple blog's footer links do, without moving the word. */
.foot { margin-top: 44px; }
.vine { position: relative; height: 112px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: 14px; border-top: 1px solid var(--hair); }
.foot a { padding: 12px 8px; margin: -12px -8px; color: var(--muted); font-size: 14px; text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot a[aria-current] { color: var(--ink); }
/* vine.js adds .garden to the body when the margins have room. It grows
each garden (one per margin, one in .vine) on a canvas a little larger
than its box, placed in page coordinates, and the canvases ignore the
pointer. */
.garden { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; }
:is(.vine, .garden) canvas { position: absolute; pointer-events: none; }
/* Between the document pages, a cross-document view transition keeps the name
in place. A browser without view transitions navigates as usual. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* At 520px and narrower, the simple blog's phone sizes. */
@media (max-width: 520px) {
body { margin-top: 28px; }
h1 { font-size: 24px; margin-bottom: 26px; }
h1 + .muted { margin: -18px 0 26px; }
h2 { font-size: 19px; }
.index a { font-size: 17px; }
.vine { height: 96px; }
}