/* rookery — default styling, modelled on Forester (www.forester-notes.org). Deliberately thin: enough that the fold/permalink interaction reads correctly out of the box, and nothing that presumes a page design. No fonts, no page colors, no typographic scale — only the affordances. Nothing here is load-bearing for FUNCTION: linking, transclusion and the
/ fold all work via native HTML semantics with zero CSS. What the CSS carries is the CLICK BUDGET, and that is worth stating once, because it is the whole interaction model: - the summary of a `#window` folds and unfolds. That is all it does. - `.idea-label` — the `[idea:etal]` permalink, beside the title or alone at the top of a titleless window — is the ONLY link inside a window, and it goes to the note's standalone page. (`.idea-ref` is the other anchor this package emits, but an author asks for that one by writing `@idea:other`; it is prose, not window chrome.) Override any of it; the classes are the contract. THE THEME. Every colour below is `var(--x, )`. The default is the literal in the var() call, right here; the override arrives as an inline custom property on `.idea-box` / `.idea-window` / `.idea-ref` / a minted page's `

`, set by `#show: rookery.with(theme: (...))` (or its granular equivalents), and inherits down. So a document that never configures anything emits no properties at all and still gets exactly this, and a reader with no custom-property support gets it too: --idea-link-color link-color hover background on ANY rookery link --idea-fold-color fold-color hover background on a foldable window block --idea-id-color id-color the [idea:etal] permalink's text --idea-date-color date-color an idea's/window's date, where shown --idea-border-color border-color the left rule on `.idea-box`/`.idea-window` --idea-external-color the underline an OUTBOUND link takes on hover, where an internal one takes the fill above (defaults to the id colour) `--idea-border-color` defaults to `--idea-link-color` itself (not to a separate literal), so the rule and the link hover read as the same colour until a theme sets `border-color` on its own. The first two are the look. Both are hover BACKGROUNDS, which is what makes them comparable: the lighter blue belongs to the fold (a block that only opens and closes), the stronger purple to every link (which actually goes somewhere). Forester makes the same split with one blue at two alphas; two hues survive being read quickly. Setting them yourself in your own stylesheet works just as well, and wins nothing over the Typst-side route — they are the same properties. */ /* The permalink, in both `#idea`'s heading and `#window`'s summary — the same affordance meaning the same thing in both places. Grey and light so it reads as an id rather than as body text, and unstyled by any inherited link decoration so it does not shout inside a heading. `white-space: nowrap` keeps "[idea:etal]" from breaking mid-id. (`idea:` is the default prefix; `#show: rookery.with(prefix: ...)` changes the TEXT, never the class.) The padding is on the element, NOT on :hover — a padding that appeared only on hover would shift the surrounding line every time the pointer crossed it. Only the background changes. */ .idea-label { margin-left: 0.5em; padding: 0 2px; white-space: nowrap; color: var(--idea-id-color, gray); font-weight: 200; /* Metadata, not content — explicitly smaller than the title beside it (`.idea-window-title` and a heading's own text both stay at their ambient size), rather than differing only by weight/colour as before. `.idea-window-date`/`.idea-date` read this same property, so a window's date reads as the same kind of thing as the id it follows. `rem`, NOT `em` — and this is the whole point of the rule. An id is ONE thing wherever it appears, and `em` made it three different sizes: 0.57 of an `

` in an `#idea` heading, 0.57 of an `

` on a minted page, 0.57 of body text in a `#window` summary (smaller again inside the footer, which scales down). MEASURED on rookery.ohrg.org: the same id came out visibly larger in a heading than in a window beside it. Root-relative, it comes out identical in all of them, at the window's size — the smallest of the three, which is the one that reads as machinery rather than as part of the heading it sits in. */ font-size: var(--idea-label-size, 0.57rem); text-decoration: none; border-radius: 3px; } /* The 0.5em separates the permalink from a TITLE. A titleless note has none — the permalink is the first thing in the heading or summary — and the margin then reads as a stray indent, leaving titleless notes visibly further right than titled ones in the same list. */ .idea-label:first-child { margin-left: 0; } /* THE LINK HOVER — every link rookery is responsible for, which is what makes the permalink and an `@idea:other` reference read as the same kind of thing: .idea-label the [idea:etal] permalink, in a heading or a window summary; .idea-ref a an `@idea:other` reference rendered by `ref-rule`; .idea-box a an author's own link inside a note; .idea-window a ...and inside a transcluded copy of one; .idea-outline a a row of a page's own table of contents. Deliberately NOT a bare `a:hover`: this stylesheet is injected into every page of a rheo project, and a package has no business restyling a site's nav. It reaches the links in rookery's own blocks and nothing else. INTERNAL LINKS ONLY. The fill is how a rookery says "this goes somewhere else in the rookery" — a permalink, a reference, an outline row, a backlink. An outbound link is a different promise, and washing it in the same colour claims a continuity that is not there: the reader is leaving. So the fill is withheld from anything whose href starts a URL scheme, and those links get their own quieter treatment below. `[href^="http"]` catches the case that exists in practice. rheo emits every in-project link as a depth-relative path, so "has a scheme" and "leaves the rookery" are the same set here. A site that writes its OWN pages as absolute urls opts them out of the fill; write them relative, which is what rheo's own link rewriting produces anyway. */ .idea-label:hover, .idea-ref a:not([href^="http"]):hover, .idea-box a:not([href^="http"]):hover, .idea-window a:not([href^="http"]):hover, .idea-outline a:not([href^="http"]):hover, .idea-footnotes a:not([href^="http"]):hover, .idea-references a:not([href^="http"]):hover, .idea-page-refs a:not([href^="http"]):hover, .idea-footer a:not([href^="http"]):hover { background-color: var(--idea-link-color, rgba(128, 0, 255, 0.12)); } /* ...and the outbound half of that pair. A link that leaves gets a change in its UNDERLINE rather than a fill behind it: the same information — this is live, you are pointing at it — carried by the quieter of the two channels, which is the difference a reader should feel between staying and going. Only on hover, so outbound links are not permanently marked up in the prose; an author who wants that can say so in their own stylesheet. `text-decoration-line` is set here because a site whose links are not underlined at rest has no underline to recolour otherwise, and a rule that did nothing on half of its installs would be worse than one that adds the line it needs. `--idea-external-color` defaults to the id grey rather than to the link wash: the wash is a translucent fill, and a 2px line drawn in it is close to invisible. */ .idea-ref a[href^="http"]:hover, .idea-box a[href^="http"]:hover, .idea-window a[href^="http"]:hover, .idea-outline a[href^="http"]:hover, .idea-footnotes a[href^="http"]:hover, .idea-references a[href^="http"]:hover, .idea-page-refs a[href^="http"]:hover, .idea-footer a[href^="http"]:hover { text-decoration-line: underline; text-decoration-color: var(--idea-external-color, var(--idea-id-color, gray)); text-decoration-thickness: 2px; text-underline-offset: 0.15em; } /* Radius only, no padding, on links that are ordinary prose — padding would change inline metrics of body text. The permalink pads because it is a bracketed id sitting apart from the words around it. */ .idea-ref a, .idea-box a, .idea-window a, .idea-outline a, .idea-footnotes a, .idea-references a, .idea-page-refs a, .idea-footer a { border-radius: 3px; } /* ---- The footer of a minted note page ------------------------------------ Two sections of equal standing, either of which may be absent: .idea-context the page the note was written in, linked to the note's own anchor there — the way back to the argument it was written inside, which a minted page strips away; .idea-backlinks the notes that point AT this one, as folded windows. They share a markup shape (heading first, then content) and every rule below, because they are two answers to the same question about where a note sits, not one main thing and one afterthought. Ruled off and set small: apparatus, not part of the note. The date colour is reused rather than given a knob of its own, since both are the same kind of thing — muted metadata about the note rather than the note. That colour goes on the footer's OWN parts (below), never on this box. A `#window` in Backlinks is a NOTE, and has to read as one — the same thing it is anywhere else — but an inherited `color` here reaches inside the transcluded copy and tints its title. MEASURED on rookery.ohrg.org: backlink titles came out `--idea-date-color` amber where every other window's title is the ambient text colour. Per-part is also the only fix that stays theme agnostic: a package cannot name the colour a window's title should revert TO, only decline to override it. */ .idea-footer { margin-top: 2em; padding-top: 0.5em; /* Neutral grey rather than black-at-low-alpha, so the rule stays visible on a dark page as well as a light one. */ border-top: 1px solid rgba(128, 128, 128, 0.3); font-size: 0.85em; } /* Both sections have the same shape — a heading, then rows flowing down from it — so they take the same spacing and need no rules of their own. REJECTED, do not reinstate: (1) the two sections side by side in a grid, which gave a one-line fact half the footer's width and a list of unknown length the other half, and needed a container query to flip a divider between vertical and horizontal; (2) Context as a tinted one-line banner across the top, which made the two sections look like different kinds of thing when they are the same kind — places this note is reachable from. */ .idea-footer > * + * { margin-top: 1.5em; } /* A row naming a PAGE — the origin under Context, and any page under Backlinks. A page cannot be a `#window`, having no note to fold open, so it is a plain link wearing the row shape a `#window` gives a note: the same left rule and the same indent. Within one list these are peer entries, and a page row hanging flush left beside a ruled, indented note row reads as a different list rather than the rest of the same one. No bullets: the list is structure, not enumeration. */ .idea-page-list { list-style: none; margin: 0; padding: 0; } .idea-page-row { border-left: 1px solid rgba(128, 128, 128, 0.4); padding: 2px 10px 2px 1.25em; margin-bottom: 0.4em; color: var(--idea-date-color, gray); } /* Typst wraps every `#window` in a
, and the browser default for that is `margin: 1em 40px` — which would push every backlink row 40px off the label above it, and off the page rows beside it, which carry no such margin. Scoped to the footer deliberately: on an ordinary page that indent is a reasonable way for a transclusion to read, and undoing it there would be a look this package has no business choosing. The rows bring their own vertical spacing (`.idea-window-details`), so the wrapper needs none. */ .idea-footer figure { margin: 0; } /* Sized to the footer, not to the note: these are labels on an index, not sections of the document. Light and letterspaced so they read as a label for what follows without competing with the folded rows, which are bold. The bottom margin is the gap between the label and the rows under it. */ .idea-footer-title { margin: 0 0 0.5em 0; font-size: 1em; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--idea-date-color, gray); } /* ---- #idea — a note where it was written --------------------------------- A light left rule, blockquote-fashion, so a new note is visible as a note without a box, a background or a heading style doing the work. Same neutral grey as the footer rule, at 1px: enough to follow down the margin, not enough to compete with the text. `#idea` wraps itself in a
(the marker element the package uses to find notes again), and the BROWSER indents that by 40px on both sides by default — nothing here asked for it, and nested notes compound it. Halved to 20px, and moved off the figure onto the note itself so the rule sits at the text margin with the body indented from it, which is what makes it read as a blockquote rather than as an indented box with a stripe. `:has()` is what lets a package stylesheet touch ONLY its own figures, with no class to hook (Typst emits a bare
). Where it is unsupported — some EPUB readers — the figure keeps its 40px and the note sits further in than intended, with the rule and everything else intact. A worse indent, not a broken layout. */ figure:has(> .idea-box), figure:has(> .idea-window) { margin-left: 0; margin-right: 0; padding-top: 0; } /* A note and a transclusion of one indent identically, from a rule in the same place: they are the same kind of thing, and a `#window` that sat further in than the note beside it would read as subordinate to it rather than as another note. Nesting still shows, because a window inside a note starts from the note's own content edge and adds its rule there — one more rule per level, rather than one ever-growing indent. */ .idea-box, .idea-window { border-left: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); padding-left: .75em; } /* An idea's heading is an

–

(`#idea`'s `level:` + 1) and would otherwise take the host site's heading margins, which are sized for section headings — a note's own name announcing itself as loudly as the section it sits in. Half that (0.75em against the ~1.5em a site typically gives a heading), which is the gap this package wants above a note. No `margin-bottom` here: the space between a note's name and its first line is the site's typography to set, and only the space ABOVE the note is about how notes sit in a column. Set `--idea-heading-margin-top` in your own stylesheet to go back to your site's scale (or anywhere else). */ h2.idea, h3.idea, h4.idea, h5.idea, h6.idea { margin-top: var(--idea-heading-margin-top, 0.75em); } /* ---- #window — a transcluded note ----------------------------------------- The block gets a faint hover tint, which is what signals "this folds"; the disclosure marker is hidden (below), so without the tint the summary would look inert. Forester does exactly this. */ /* Radius on the RIGHT corners only: the hover tint wants softening, but the left edge is now a rule that has to line up with the one on `.idea-box` above and below it, and a rounded 1px border bows away from that line. `padding-left` comes from the shared rule above — only the other three sides are set here. */ .idea-window { border-radius: 0 5px 5px 0; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; } .idea-window:hover { background-color: var(--idea-fold-color, rgba(0, 100, 255, 0.05)); } /* Marker hidden in both spellings — `::marker` for standards-mode browsers, `::-webkit-details-marker` for older WebKit, and `list-style: none` on the summary itself, which is what actually suppresses it in Safari. The summary is the click target as a WHOLE, so a triangle at one end would misdescribe where the reader may click. `flex` (+ `align-items: baseline`) is what lets `.idea-window-date` push itself to the row's far right via `margin-left: auto` below, while keeping the bold title, normal-weight id, and thin date sitting on one text baseline despite their three different weights/sizes. */ .idea-window-summary { display: flex; align-items: baseline; list-style: none; cursor: pointer; } .idea-window-summary::marker, .idea-window-summary::-webkit-details-marker { display: none; } .idea-window-title { font-weight: bold; } /* The note's minted date, after the permalink — in a `#window`'s summary (`.idea-window-date`) and in `#idea`'s own heading (`.idea-date`), both opt-in via `show-date: true`. Same grey/light treatment as `.idea-label`, and the same size through the same property: a date sits directly beside the id it follows, so the two have to be one size or the pair reads as two kinds of thing. Setting `--idea-label-size` moves both together, which is the only sane way for them to move. */ .idea-window-date, .idea-date { color: var(--idea-date-color, gray); font-weight: 200; font-size: var(--idea-label-size, 0.57rem); white-space: nowrap; } .idea-date { margin-left: 0.5em; } /* Right-aligned: `auto` soaks up the flex row's remaining space, pushing the date to the far edge while the title/id stay packed left. This is a plain CSS custom property, NOT one of `#show: rookery`'s Typst-side `theme:` colour knobs (those all set `--idea-*-color`) — there is no Typst-side equivalent, only this stylesheet default. Override `--idea-window-date-margin` in your own CSS (e.g. to `0.5em`, matching `.idea-date`'s) to go back to flowing right after the id instead. */ .idea-window-date { margin-left: var(--idea-window-date-margin, auto); } /* An open window needs more room beneath it than a closed one, or a column of folded windows reads as one undifferentiated block. */ .idea-window-details { margin-bottom: 0.2em; } .idea-window-details[open] { margin-bottom: 0.5em; } /* ---- Footnotes — an idea's own, not the page's ---------------------------- `#footnote` inside an idea numbers against THAT idea and lists its bodies here, at the end of the idea, so two notes on one page may each carry a footnote 1. The block follows the idea to every surface it appears on — its hatch page, every `#window` on it, its minted page — and each of those gets its own copy with its own anchors, because a footnote reference is a same-page fragment. Subordinate, not sectional: smaller than body text, a hairline above to separate it from the prose it belongs to, and aligned to the note's TEXT margin rather than sitting out at the note's left rule. It is apparatus for the note, not a division of the document. Nothing here is load-bearing: the reference and its body are an ordinary pair of same-page anchors and work with this stylesheet absent. */ .idea-footnotes { margin-top: 1em; padding-top: 0.4em; border-top: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); font-size: 0.85em; } /* An

for document-outline correctness, styled so it does not read as one. Size and margins are set explicitly rather than left to inherit: a site's own heading scale would otherwise make "Footnotes" compete with the note's title directly above it. */ .idea-footnotes-title { font-size: 1em; font-weight: 600; margin: 0 0 0.3em; } /* The
    numbers itself, and each
  1. carries the id its reference points at — so no ::marker games and no hand-drawn numbers. `padding-left` keeps the digits inside the block rather than hanging into the rule at its left. */ .idea-footnote-list { margin: 0; padding-left: 1.5em; } .idea-footnote { margin: 0.15em 0; } /* The inline reference. `line-height: 0` stops the superscript from opening up the line it sits in, which is the usual defect of a raw in body text. */ .idea-fn-ref { line-height: 0; } /* The way back up to the reference. Grey and light like the permalink, because it is the same kind of thing: a small navigational mark beside content rather than part of it. It takes the shared link hover above, so it is not restyled here. */ .idea-fn-backlink { color: var(--idea-id-color, gray); text-decoration: none; margin-right: 0.3em; } /* ---- References — one bibliography per idea, and the page's own ----------- Typst partitions citations positionally, so rookery emits one bibliography per idea (`.idea-references`) and, where a page cites outside any idea, one for the page (`.idea-page-refs`). Every rule here is scoped under one of those two classes, never under a bare `section[role="doc-bibliography"]`: this stylesheet is injected into every page of a rheo project, and a project may have a bibliography of its own that this package has no business restyling. Typst renders the
    , its heading and its
      , and adds `class="hanging-indent"` under some styles — all of that is left alone. An idea's block is apparatus for that idea, exactly like its footnotes above: smaller than body text, hairline above, aligned to the note's text margin. */ .idea-references { margin-top: 1em; padding-top: 0.4em; border-top: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); font-size: 0.85em; } /* Typst emits an

      . Sized explicitly so a site's own heading scale cannot let "References" compete with the note's title above it — the same reason `.idea-footnotes-title` is pinned. */ .idea-references h2, .idea-page-refs h2 { font-size: 1em; font-weight: 600; margin: 0 0 0.3em; } /* `padding-left: 0` because the entries carry no markers (Typst sets `list-style-type: none` inline) and an author-date style has no numbers to hang — indenting would leave the list floating away from the rule above it. */ .idea-references ul, .idea-page-refs ul { margin: 0; padding-left: 0; } .idea-references li, .idea-page-refs li { margin: 0.15em 0; } /* THE SWEEP BLOCK, and why this is `:has(li)`. `#idea` emits a title-less `.idea-page-refs` BEFORE itself, unconditionally, to claim prose citations written above it. It cannot know whether there are any — an idea never sees the prose around it, and asking by query is circular (see `_sweep-block` in lib.typ). Almost every one is therefore empty, and an empty one must occupy NO vertical space, or every idea on the page gains a phantom gap above it. So the wrapper carries nothing by default and `:has(li)` adds the spacing and the rule only when the block lists something. One rule covers all three users of the class: an empty sweep (invisible), a sweep that did catch a prose citation, and the page's own trailing-citation block. Where `:has()` is unsupported the block renders flush and its entries stay readable — the same bargain the `figure:has(> .idea-box)` rule above makes. */ .idea-page-refs { margin: 0; font-size: 0.85em; } .idea-page-refs:has(li) { margin-top: 1.5em; padding-top: 0.4em; border-top: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); } /* ---- #ideas-outline — a page's own notes, as a tree ------------------------ Wears the same left rule as `.idea-box`/`.idea-window`, from the same custom property, so a page's table of contents reads as part of the same apparatus as the notes it lists rather than as a stray browser list above them. Nesting works the way it does for notes, too: each level adds its own rule at the previous level's content edge — one more rule per level, not one ever-growing indent. The theme reaches this via inline custom properties on the OUTERMOST
        only (see `_nest-outline` in lib.typ). An outline is a sibling of the notes, not a descendant of one, so it is the only thing this package emits that has no themed ancestor to inherit from. `padding-left` is larger than `.idea-box`'s `.75em` because the row's marker lives in it: 0.75em of hairline plus 0.5em of gap before the text. */ /* "Contents", above an outline. Pinned to the same size and weight as `.idea-footnotes-title` and for the same reason: both label a block of apparatus rather than open a section, and left to a site's heading scale they announce themselves louder than the writing they belong to. The two are deliberately identical — a reader meeting "Contents" at the top of a page and "Footnotes" at the foot of a note should recognise them as the same kind of thing. */ .idea-outline-title { /* `0.85em`, not the `1em` that `.idea-footnotes-title` carries, and the two land on the same size: that rule's `1em` is relative to `.idea-footnotes`, which is itself `0.85em`. This heading has no such wrapper to inherit from, so it applies the same reduction directly. Change one and change the other — the whole point is that they agree. */ font-size: 0.85em; font-weight: 600; margin: 0 0 0.3em; } .idea-outline { list-style: none; margin: 0.4em 0; padding-left: 1.25em; border-left: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); } /* A nested list is already indented by its parent row; it needs separating from the row above it, not from the list as a whole. */ .idea-outline-row > .idea-outline { margin: 0.25em 0 0.4em 0; } .idea-outline-row { margin-bottom: 0.25em; } /* THE BULLET, at every level: a hairline rather than a disc, in the same colour as the rule it grows out of. The negative `margin-left` is the negation of the list's `padding-left`, which puts the hairline's own left end exactly ON that rule — so the marker reads as a tick off the rule, the two cannot drift apart when the padding changes, and a row that wraps hangs its later lines at the text edge rather than under the marker. Drawn as a `border-top` on a zero-height box rather than as a glyph in `::marker`: a "hairline" is 1px whatever the font, `::marker` accepts `content` in far fewer readers than `::before`, and a disc scaled down to look like a rule is at the mercy of the font's own bullet metrics. Where `::before` is unsupported the rows simply lose their markers — the rule and the indent still carry the structure. IN FLOW, not `position: absolute`, and that is what `vertical-align: middle` buys: it puts a zero-height box at the parent's baseline plus half its x-height, i.e. exactly through the middle of a lowercase letter, from the FONT's metrics rather than from a guessed `top` offset that a host page's line-height would throw off. */ .idea-outline-row::before { content: ""; display: inline-block; vertical-align: middle; width: 0.75em; height: 0; margin-left: -1.25em; margin-right: 0.5em; border-top: 1px solid var(--idea-border-color, var(--idea-link-color, rgba(128, 0, 255, 0.12))); }