* { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); font-size: var(--font-size-editor); color: var(--text-normal); background: var(--bg-primary); line-height: var(--line-height-relaxed); } /* Full-width header, above the sidebar/main grid rather than inside the sidebar's 16rem column — a site title and a home link read as belonging to the whole page, not to the navigation panel. Absent when the settings give canopy neither a title, a logo, nor a home link (see shell.ts), so a site with none of those keeps today's chrome-free top edge. */ .canopy-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-weight: var(--font-weight-semibold); } /* Every other link the shell draws (sidebar, content, outline, backlinks, page-nav) sets its own rest/hover colors; the topbar's two links — the site title and .canopy-home — were the one place nothing did, so both rendered in the browser's own default link blue with a permanent underline instead of reading as chrome. .canopy-home's own rule below still wins on specificity for color at rest (two classes beat one class plus a type), so this only supplies the site-title link's rest color and the underline reset shared by both; :hover here (two classes plus this pseudo-class) outranks .canopy-home's plain rule, so hover still reaches it too. */ .canopy-topbar > a { color: var(--text-normal); text-decoration: none; } .canopy-topbar > a:hover { color: var(--accent); text-decoration: underline; } .canopy-topbar > a:not(.canopy-home) { display: flex; align-items: center; gap: var(--sp-2); } /* A definite height, not max-height: a brand file supplies whatever it has, and a tall logo must not grow the bar past a single line — max-height would say that more precisely (cap, don't force), but it makes the logo's inline contribution to .canopy-topbar > a's own intrinsic width indefinite, and that indefinite replaced-element size is what the title text wraps around despite room to spare: measured live, the anchor's computed width came out equal to gap + text alone, as if the logo contributed zero, even though it paints at its correct capped size right next to that too-narrow box (a flex-basis:auto sizing gap most engines have for max-height-constrained replaced children, not anything specific to this logo or this text). A definite height gives the logo a definite aspect-ratio-derived width up front, which the anchor's intrinsic-size pass can add in like any other child — the trade is that a logo shorter than 1.75rem now scales up to fill it instead of sitting at its own smaller natural size. */ .canopy-logo { height: 1.75rem; max-width: 100%; width: auto; } /* Specificity beats .canopy-topbar a without !important, which would also override a caller's own stylesheet. */ .canopy-topbar .canopy-home { font-weight: 400; font-size: 0.9em; color: var(--text-muted); } .canopy-home::before { content: "← "; } /* home.url can name a page outside the site entirely (settings lets it be any URL, not just an internal path) — and it sits right after the breadcrumb, which never leaves the site, so a reader has every reason to expect the same here unless told otherwise. The icon is the telling: isExternalUrl already decides this in shell.ts, so nothing here re-derives it. currentColor (not a fixed var(--text-muted), unlike this file's other mask icons) is deliberate: it's what lets the icon dim/light up together with .canopy-home's own hover color change above, with no second rule needed to keep the two in sync. */ .canopy-home-external::after { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.25em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6M15%203h6v6M10%2014L21%203'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6M15%203h6v6M10%2014L21%203'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } /* The ancestor trail (renderBreadcrumb): an
    laid out as a row, a "/" between each pair of entries rather than after every one (:not(:last-child) guards that), and no bullet — a breadcrumb reads as a path, not a list. No width/overflow handling of its own: a trail with nowhere left to fit wraps to its own line the same way everything else in .canopy-topbar already does (flex-wrap: wrap, above), rather than this duplicating that with a second, competing overflow strategy. font-weight resets .canopy-topbar's own semibold (set for the site title) back to normal — a trail of equally-bold entries would fight the title for visual weight instead of reading as secondary to it. */ .canopy-breadcrumb { font-weight: 400; font-size: 0.9em; color: var(--text-muted); } .canopy-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .canopy-breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 var(--sp-2); color: var(--text-faint); } /* The trail's own last crumb (the page a reader is already on) is never a link — the same reasoning aria-current="page" already gives the sidebar's own current entry, restated as a plain
  1. here (see renderBreadcrumb) rather than a second attribute a