markupress 0.1.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupress",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Versioned Markdown documentation built on HTMLKit and native declarative components.",
   "license": "MIT",
   "type": "module",
@@ -45,8 +45,10 @@
     "vitest": "5.0.4",
     "playwright": "1.64.0",
     "@axe-core/playwright": "4.13.0",
-    "@nextwebwg/html-next": "1.0.0-alpha.51",
-    "@threadlabs/looma": "0.28.5"
+    "@nextwebwg/html-next": "1.0.0-alpha.57",
+    "@threadlabs/looma": "0.29.12",
+    "@types/markdown-it": "14.2.0",
+    "jsdom": "30.1.2"
   },
   "publishConfig": { "access": "public" },
   "repository": {
@@ -58,8 +60,7 @@
     "url": "https://github.com/threadlabs-studio/markupress/issues"
   },
   "dependencies": {
-    "@nextwebwg/htmlkit": "1.0.0-alpha.51",
-    "marked": "18.1.1",
+    "@nextwebwg/htmlkit": "1.0.0-alpha.57",
     "parse5": "8.0.1",
     "yaml": "2.9.1",
     "postcss": "8.5.30",
@@ -67,8 +68,8 @@
     "shiki": "4.5.0"
   },
   "peerDependencies": {
-    "@nextwebwg/html-next": "1.0.0-alpha.51",
-    "@threadlabs/looma": "^0.28.5"
+    "@nextwebwg/html-next": "1.0.0-alpha.57",
+    "@threadlabs/looma": "0.29.12"
   },
   "bin": {
     "markupress": "./dist/cli.js"

package/styles/prose.css

@@ -12,3 +12,34 @@ img, svg { max-width: 100%; }
 table { border-collapse: collapse; display: block; max-width: 100%; overflow: auto; }
 th, td { border: 1px solid var(--ui-border, #8885); padding: .4rem .75rem; }
 :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
+/* Looma Markdown's inline elements and blocks, drawn with the tokens LoomaEditor uses for them. */
+[data-looma-chip] {
+  --_chip-surface: var(--ui-surface-subtle); --_chip-text: var(--ui-text-secondary);
+  padding: .08em .45em; border: var(--ui-border-width, 1px) solid color-mix(in srgb, var(--_chip-surface) 75%, var(--_chip-text) 25%);
+  border-radius: var(--ui-radius-round, 999px); background: var(--_chip-surface); color: var(--_chip-text);
+  font-size: var(--ui-font-size-sm, .85em); font-weight: var(--ui-font-medium, 500); box-decoration-break: clone;
+}
+[data-looma-chip][data-color="blue"] { --_chip-surface: var(--ui-info-soft); --_chip-text: var(--ui-info-subtle-text); }
+[data-looma-chip][data-color="green"] { --_chip-surface: var(--ui-success-soft); --_chip-text: var(--ui-success-subtle-text); }
+[data-looma-chip][data-color="yellow"] { --_chip-surface: var(--ui-warning-soft); --_chip-text: var(--ui-warning-subtle-text); }
+[data-looma-chip][data-color="red"] { --_chip-surface: var(--ui-danger-soft); --_chip-text: var(--ui-danger-subtle-text); }
+[data-looma-chip][data-color="purple"] { --_chip-surface: var(--ui-accent-soft); --_chip-text: var(--ui-accent-subtle-text); }
+.looma-mention { padding: .08em .28em; border-radius: var(--ui-radius-sm, 4px); background: var(--ui-accent-soft); color: var(--ui-accent-active, var(--ui-accent)); font-weight: var(--ui-font-medium, 500); white-space: nowrap; }
+ul[data-type="taskList"] { padding-left: .25rem; list-style: none; }
+ul[data-type="taskList"] input { margin: 0 .5rem 0 0; accent-color: var(--ui-accent-solid, var(--ui-accent)); }
+nav[data-looma-toc] { margin: 1rem 0; }
+nav[data-looma-toc] :is(ol, ul, div)[role="list"] { margin: .25rem 0; padding-left: 1.25rem; }
+nav[data-looma-toc] > [role="list"] { padding-left: 0; }
+nav[data-looma-toc][data-format="numbered"] > ol, nav[data-looma-toc][data-format="bulleted"] > ul { padding-left: 1.25rem; }
+figure:not(.code) { margin: 1.5rem 0; }
+figure:not(.code) > figcaption { margin-top: .5rem; font-size: .9rem; color: var(--ui-text-muted, inherit); }
+img[data-placement="center"] { display: block; margin-inline: auto; }
+img[data-placement="wrap-left"] { float: left; margin: 0 1rem 1rem 0; }
+img[data-placement="wrap-right"] { float: right; margin: 0 0 1rem 1rem; }
+/* A home page's hero: its title, tagline and actions, beside its image on wide screens. */
+.hero { display: grid; gap: 2rem; align-items: center; padding-block: 2rem 3rem; }
+@media (min-width: 769px) { .hero:has(.hero-image) { grid-template-columns: 3fr 2fr; } }
+.hero h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 6vw, 3.5rem); }
+.hero p { margin: 0 0 1rem; font-size: 1.25rem; color: var(--ui-text-secondary, inherit); }
+.hero .actions { margin-top: 1.5rem; }
+.hero-image img { display: block; margin-inline: auto; max-block-size: min(18rem, 40vh); }

package/theme/chrome.html

@@ -0,0 +1,38 @@
+<link rel="component" href="@threadlabs/looma/components/ui-button/ui-button.html">
+<link rel="component" href="@threadlabs/looma/components/ui-badge/ui-badge.html">
+<template component="markupress-header">
+<defs>
+<prop name="title" type="string" required>Site title</prop>
+<prop name="home" type="string" required>Home URL</prop>
+<prop name="logo" type="object({ light: string, dark: string })" nullable>Logo images for the light and dark themes</prop>
+<prop name="badge" type="string" default="">Badge beside the title</prop>
+<prop name="nav" type="list(object({ label: string, href: string, current: string, icon: string }))" required>Top navigation: the sections, then the configured links, each with an icon URL or ""</prop>
+<prop name="dark" type="boolean" default="false">Whether the dark theme is on, which the layout's controller sets</prop></defs>
+<header><slot name="menu"></slot>
+<a class="brand" from:href="$home"><template $if="$logo"><img class="logo logo-light" from:src="$logo.light" alt=""><img class="logo logo-dark" from:src="$logo.dark" alt=""></template>{$title}</a>
+<ui-badge $if="$badge" tone="accent">{$badge}</ui-badge>
+<nav class="top" $if="$nav.length" aria-label="Main"><ul><li $each="item of $nav">
+<a from:href="$item.href" from:aria-current="$item.current"><template $match><img $when="$item.icon" from:src="$item.icon" from:alt="$item.label"><template $else>{$item.label}</template></template></a>
+</li></ul></nav>
+<div class="actions"><ui-button variant="ghost" tone="neutral" data-action="theme" from:aria-pressed="$dark">Dark theme</ui-button></div></header>
+<style>
+:host { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-bottom: 1px solid var(--ui-border, #8885); padding: .75rem max(1rem, calc((100vw - 90rem) / 2)); background: var(--ui-surface); }
+.brand { display: flex; align-items: center; gap: .5rem; color: inherit; font-size: 1.15rem; font-weight: 700; text-decoration: none; } .logo { block-size: 2rem; inline-size: auto; }
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-inline-start: auto; }
+ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
+a { color: inherit; text-decoration: none; } a:hover, a[aria-current="page"], a[aria-current="true"] { color: var(--ui-accent); } a[aria-current="page"] { font-weight: 700; }
+.top img { display: block; block-size: 1.25rem; inline-size: auto; }
+:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
+@media (max-width: 768px) { :host { position: static; } }
+@media (max-width: 640px) { :host { padding-inline: 1rem; } }
+</style></template>
+<template component="markupress-footer">
+<defs><prop name="footer" type="object({ columns: list(object({ title: string, items: list(object({ label: string, href: string, current: string })) })), copyright: string })" required>Footer link columns and copyright</prop></defs>
+<footer><div class="footer-columns" $if="$footer.columns.length"><div $each="column of $footer.columns"><strong>{$column.title}</strong><ul><li $each="link of $column.items"><a from:href="$link.href" from:aria-current="$link.current">{$link.label}</a></li></ul></div></div>
+<p $if="$footer.copyright">{$footer.copyright}</p></footer>
+<style>
+:host { display: block; border-top: 1px solid var(--ui-border, #8885); padding: 2rem max(1.5rem, calc((100vw - 90rem) / 2)); color: var(--ui-text-muted, inherit); font-size: .9rem; }
+.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; } ul { margin: .5rem 0 0; padding: 0; list-style: none; } li { margin: .25rem 0; } strong { color: var(--ui-text); }
+p { margin: 1.5rem 0 0; }
+a { color: var(--ui-accent); text-underline-offset: .2em; } a[aria-current="page"] { font-weight: 700; } :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
+</style></template>

package/theme/home.html

@@ -0,0 +1,28 @@
+<link rel="component" href="./chrome.html">
+<!-- The home layout (front matter layout: home): the shell's top navigation and footer around a full-width page, which
+     Markupress reads as a hero and feature cards. A site's app/layouts/home.html replaces it. -->
+<template component="markupress-home" controller="../dist/controllers/shell.js">
+<defs>
+<title>{$title}</title>
+<!-- A null favicon leaves the link out. -->
+<link rel="icon" from:href="$favicon">
+<prop name="title" type="string" required>Site title</prop>
+<prop name="home" type="string" required>Home URL</prop>
+<prop name="logo" type="object({ light: string, dark: string })" nullable>Logo images for the light and dark themes</prop>
+<prop name="favicon" type="string" nullable>Site icon URL</prop>
+<prop name="badge" type="string" default="">Badge beside the title</prop>
+<prop name="nav" type="list(object({ label: string, href: string, current: string, icon: string }))" required>Top navigation: the sections, then the configured links</prop>
+<prop name="footer" type="object({ columns: list(object({ title: string, items: list(object({ label: string, href: string, current: string })) })), copyright: string })" required>Footer link columns and copyright</prop>
+<state name="dark" type="boolean" value="false"></state></defs>
+<div class="site"><a class="skip" href="#documentation-content">Skip to content</a>
+<markupress-header from:title="$title" from:home="$home" from:logo="$logo" from:badge="$badge" from:nav="$nav" from:dark="$dark"></markupress-header>
+<main id="documentation-content" tabindex="-1"><slot name="page"></slot></main>
+<markupress-footer $if="$footer.columns.length or $footer.copyright" from:footer="$footer"></markupress-footer></div>
+<style>
+:host { display: block; background: var(--ui-surface); color: var(--ui-text); font: 1rem/1.7 system-ui, sans-serif; min-height: 100vh; }
+.site { display: flex; flex-direction: column; min-height: 100vh; }
+main { flex: 1; inline-size: 100%; max-inline-size: 75rem; margin-inline: auto; padding: 2rem 1.5rem 4rem; }
+.skip { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .5rem 1rem; background: var(--ui-surface); color: var(--ui-accent); z-index: 3; } .skip:focus { transform: none; }
+:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
+@media (max-width: 768px) { main { padding: 1rem 1rem 3rem; } }
+</style></template>

package/theme/shell.html

@@ -1,66 +1,55 @@
 <link rel="component" href="@threadlabs/looma/components/ui-button/ui-button.html">
-<link rel="component" href="@threadlabs/looma/components/ui-badge/ui-badge.html">
+<link rel="component" href="./chrome.html">
 <link rel="component" href="./outline.html">
 <template component="markupress-shell" controller="../dist/controllers/shell.js">
-<title>{$title}</title><link $if="$favicon" rel="icon" from:href="$favicon"><defs>
+<defs>
+<title>{$title}</title>
+<!-- A null favicon leaves the link out. -->
+<link rel="icon" from:href="$favicon">
 <prop name="title" type="string" required>Site title</prop>
 <prop name="home" type="string" required>Home URL</prop>
 <prop name="logo" type="object({ light: string, dark: string })" nullable>Logo images for the light and dark themes</prop>
 <prop name="favicon" type="string" nullable>Site icon URL</prop>
 <prop name="badge" type="string" default="">Badge beside the title</prop>
-<prop name="nav" type="list(object({ label: string, href: string, current: string, items: list(object({ label: string, href: string, current: string, ... })), ... }))" required>Top navigation: links, and dropdowns with items</prop>
-<prop name="social" type="list(object({ label: string, href: string, icon: string }))" required>Social links</prop>
+<prop name="nav" type="list(object({ label: string, href: string, current: string, icon: string }))" required>Top navigation: the sections, then the configured links, each with an icon URL or ""</prop>
 <prop name="sidebar" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>The section's sidebar: pages and links, and folders and groups with children, as &lt;hk-nav&gt; renders them</prop>
+<prop name="contents" type="list(object({ label: string, href: string, description: string }))" required>A generated index's pages and folders</prop>
 <prop name="outline" type="list(object({ id: string, href: string, label: string, depth: number }))" required>The page's headings</prop>
 <prop name="footer" type="object({ columns: list(object({ title: string, items: list(object({ label: string, href: string, current: string })) })), copyright: string })" required>Footer link columns and copyright</prop>
 <prop name="versions" type="list(object({ href: string, label: string, current: string, note: string }))" required>Documentation versions</prop>
 <prop name="crumbs" type="list(object({ href: string, label: string, current: string, depth: number, pageName: string, ... }))" required>Trail from the version home to this page</prop>
 <prop name="previous" type="object({ href: string, label: string, current: string, depth: number, pageName: string, ... })" nullable>The page before this one</prop>
 <prop name="next" type="object({ href: string, label: string, current: string, depth: number, pageName: string, ... })" nullable>The page after this one</prop>
+<prop name="page" type="object({ editLink?: string, lastUpdated?: string, ... })" required>The page's front matter, with its edit link and the date its file last changed in git</prop>
 <state name="dark" type="boolean" value="false"></state></defs>
 <div class="site"><a class="skip" href="#documentation-content">Skip to content</a>
-<header>
-<span class="menu"><ui-button variant="ghost" tone="neutral" popovertarget="documentation-navigation">Navigation</ui-button></span>
-<a class="brand" from:href="$home"><template $if="$logo"><img class="logo logo-light" from:src="$logo.light" alt=""><img class="logo logo-dark" from:src="$logo.dark" alt=""></template>{$title}</a>
-<ui-badge $if="$badge" tone="accent">{$badge}</ui-badge>
-<nav class="top" $if="$nav.length" aria-label="Main"><ul><li $each="item of $nav">
-<template $match><a $when="$item.href" from:href="$item.href" from:aria-current="$item.current">{$item.label}</a>
-<details $else name="markupress-nav"><summary from:data-current="$item.current">{$item.label}</summary><ul><li $each="link of $item.items"><a from:href="$link.href" from:aria-current="$link.current">{$link.label}</a></li></ul></details></template>
-</li></ul></nav>
-<div class="actions"><ul class="social" $if="$social.length"><li $each="link of $social"><a from:href="$link.href"><template $match><img $when="$link.icon" from:src="$link.icon" from:alt="$link.label"><template $else>{$link.label}</template></template></a></li></ul>
-<ui-button variant="ghost" tone="neutral" data-action="theme" from:aria-pressed="$dark">Dark theme</ui-button></div></header>
-<div class="columns"><aside id="documentation-navigation" popover>
+<markupress-header from:title="$title" from:home="$home" from:logo="$logo" from:badge="$badge" from:nav="$nav" from:dark="$dark">
+<span class="menu" slot="menu"><ui-button variant="ghost" tone="neutral" popovertarget="documentation-navigation">Navigation</ui-button></span></markupress-header>
+<div class="columns"><aside id="documentation-navigation" popover aria-label="Documentation">
 <hk-nav from:items="$sidebar" label="Documentation"></hk-nav>
-<nav class="versions" aria-label="Documentation versions"><strong>Versions</strong><ul><li $each="version of $versions"><a from:href="$version.href" from:aria-current="$version.current">{$version.label}</a><small $if="$version.note">{$version.note}</small></li></ul></nav>
-</aside><main id="documentation-content" tabindex="-1"><hk-breadcrumbs from:items="$crumbs"></hk-breadcrumbs><slot name="page"></slot><hk-pager from:previous="$previous" from:next="$next"></hk-pager></main>
-<aside class="outline" $if="$outline.length"><markupress-outline from:items="$outline"></markupress-outline></aside></div>
-<footer $if="$footer.columns.length or $footer.copyright"><div class="footer-columns" $if="$footer.columns.length"><div $each="column of $footer.columns"><strong>{$column.title}</strong><ul><li $each="link of $column.items"><a from:href="$link.href" from:aria-current="$link.current">{$link.label}</a></li></ul></div></div>
-<p $if="$footer.copyright">{$footer.copyright}</p></footer></div>
+<nav class="versions" $if="$versions.length > 1" aria-label="Documentation versions"><strong>Versions</strong><ul><li $each="version of $versions"><a from:href="$version.href" from:aria-current="$version.current">{$version.label}</a><small $if="$version.note">{$version.note}</small></li></ul></nav>
+</aside><main id="documentation-content" tabindex="-1"><hk-breadcrumbs from:items="$crumbs"></hk-breadcrumbs><slot name="page"></slot>
+<ul class="contents" $if="$contents.length"><li $each="entry of $contents"><a from:href="$entry.href">{$entry.label}</a><p $if="$entry.description">{$entry.description}</p></li></ul>
+<div class="page-meta" $if="$page.editLink or $page.lastUpdated"><a $if="$page.editLink" from:href="$page.editLink">Edit this page</a><p $if="$page.lastUpdated">Last updated <time from:datetime="$page.lastUpdated">{$page.lastUpdated}</time></p></div><hk-pager from:previous="$previous" from:next="$next"></hk-pager></main>
+<aside class="outline" $if="$outline.length" aria-label="On this page"><markupress-outline from:items="$outline"></markupress-outline></aside></div>
+<markupress-footer $if="$footer.columns.length or $footer.copyright" from:footer="$footer"></markupress-footer></div>
 <style>
 :host { display: block; background: var(--ui-surface); color: var(--ui-text); font: 1rem/1.7 system-ui, sans-serif; min-height: 100vh; }
 .site { display: flex; flex-direction: column; min-height: 100vh; }
-header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-bottom: 1px solid var(--ui-border, #8885); padding: .75rem max(1rem, calc((100vw - 90rem) / 2)); background: var(--ui-surface); }
-.brand { display: flex; align-items: center; gap: .5rem; color: inherit; font-size: 1.15rem; font-weight: 700; text-decoration: none; } .logo { block-size: 2rem; inline-size: auto; }
-.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-inline-start: auto; }
-header ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
-header a { color: inherit; text-decoration: none; } header a:hover, header a[aria-current="page"], header a[aria-current="true"], summary[data-current="true"] { color: var(--ui-accent); }
-.social img { display: block; block-size: 1.25rem; inline-size: auto; }
-.top details { position: relative; } .top summary { cursor: pointer; }
-.top details ul { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-start: 0; display: grid; gap: .25rem; min-inline-size: 12rem; padding: .5rem 1rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-md, .5rem); background: var(--ui-surface); }
 .columns { display: flex; gap: 3rem; flex: 1; inline-size: 100%; max-inline-size: 90rem; margin: auto; padding: 2rem 1.5rem; }
 #documentation-navigation { flex: 0 0 15rem; } main { min-width: 0; flex: 1; max-width: 65ch; } .outline { flex: 0 0 13rem; }
 /* Wide screens show the sidebar in the page; narrow ones open it as a native popover, which needs no script. */
 @media (min-width: 769px) { #documentation-navigation { display: block; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
   #documentation-navigation, .outline { position: sticky; top: 5rem; align-self: flex-start; max-block-size: calc(100vh - 6rem); overflow: auto; } .menu { display: none; } }
 @media (max-width: 1199px) { .outline { display: none; } }
-@media (max-width: 768px) { header { position: static; } .columns { display: block; padding: 1rem; }
+@media (max-width: 768px) { .columns { display: block; padding: 1rem; }
   #documentation-navigation { inset: 0 auto 0 0; block-size: 100%; max-block-size: none; inline-size: min(20rem, 85vw); margin: 0; padding: 1rem; border: 0; border-inline-end: 1px solid var(--ui-border, #8885); background: var(--ui-surface); color: var(--ui-text); }
   #documentation-navigation::backdrop { background: rgb(0 0 0 / .4); } }
 .versions ul { margin: 0; padding: 0; list-style: none; } .versions li { margin: .4rem 0; } .versions { margin-top: 2rem; }
 a { color: var(--ui-accent); text-underline-offset: .2em; } a[aria-current="page"] { font-weight: 700; } small { display: block; color: var(--ui-text-muted, inherit); line-height: 1.4; } :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
 .skip { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .5rem 1rem; background: var(--ui-surface); z-index: 3; } .skip:focus { transform: none; }
-footer { border-top: 1px solid var(--ui-border, #8885); padding: 2rem max(1.5rem, calc((100vw - 90rem) / 2)); color: var(--ui-text-muted, inherit); font-size: .9rem; }
-.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; } footer ul { margin: .5rem 0 0; padding: 0; list-style: none; } footer li { margin: .25rem 0; } footer strong { color: var(--ui-text); }
-footer p { margin: 1.5rem 0 0; }
-@media (max-width: 640px) { header { padding-inline: 1rem; } }
+.contents { display: grid; gap: .75rem; margin: 1.5rem 0; padding: 0; list-style: none; }
+.contents li { padding: .75rem 1rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-md, .5rem); }
+.contents a { font-weight: 600; } .contents p { margin: .25rem 0 0; color: var(--ui-text-muted, inherit); }
+.page-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 3rem; color: var(--ui-text-muted, inherit); font-size: .875rem; } .page-meta p { margin: 0; }
 </style></template>

package/theme/theme.css

@@ -47,6 +47,22 @@
 .markupress-prose pre.line-numbers code { counter-reset: line; }
 .markupress-prose pre.line-numbers .line::before { counter-increment: line; content: counter(line); display: inline-block; inline-size: 2ch; margin-inline-end: 1.5ch; text-align: end; color: var(--ui-text-muted, #888); user-select: none; }
 /* The logo for the theme in use: the head script sets data-theme before first paint, and without it the light logo shows. */
-[data-component~="markupress-shell"] .logo-dark { display: none; }
-:root[data-theme="dark"] [data-component~="markupress-shell"] .logo-dark { display: inline; }
-:root[data-theme="dark"] [data-component~="markupress-shell"] .logo-light { display: none; }
+[data-component~="markupress-header"] .logo-dark { display: none; }
+:root[data-theme="dark"] [data-component~="markupress-header"] .logo-dark { display: inline; }
+:root[data-theme="dark"] [data-component~="markupress-header"] .logo-light { display: none; }
+/* A home page's feature cards. Their Markdown is projected into Looma's card, where the page's scoped prose styles
+   never reach, so these rules set its type; the card spaces its children. */
+.markupress-prose .features { margin-block: 1rem; }
+.markupress-prose .features :is(h2, p, ul, ol, pre, figure) { margin: 0; }
+.markupress-prose .features h2 { font-size: 1.15rem; line-height: 1.3; }
+.markupress-prose .features h2 a { color: inherit; text-decoration: none; }
+.markupress-prose .features p { color: var(--ui-text-secondary, inherit); }
+.markupress-prose .features a { color: var(--ui-accent); text-underline-offset: .2em; }
+/* HTMLKit sets data-hk-navigating on <html> while a page renders in place: a bar along the top shows it, after a
+   moment, so a quick navigation never flashes. */
+html[data-hk-navigating] body::before {
+  content: ""; position: fixed; inset: 0 0 auto; z-index: 10; block-size: 3px; background: var(--ui-accent);
+  transform-origin: left; animation: markupress-navigating 2s .2s ease-out both;
+}
+@keyframes markupress-navigating { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
+@media (prefers-reduced-motion: reduce) { html[data-hk-navigating] body::before { animation: none; opacity: .6; } }