Do not set vertical rhythm on body This has been causing a lot of problems. The most important thing here is vertical rhythm is for (usually long) textual content. In the context of documentation/blog website, contents inside `<main>`. Other parts, such as navigation and table of contents, are not suitable for vertical rhythm. Aesthetics and/or space effeciency is more important than the rhythm.

Changes

7 changed files (+57/-22)

• page_builder/default_theme/from_mdast/callout.tsx
  • @@ -108,7 +108,7 @@ gap: 0.25em;
    padding: calc(var(--baseline) * 0.5rem) 8px; border-bottom: 1px solid var(--_macana-callout-overlay); - margin-top: 0; + margin: 0; font-weight: 700; } summary.${c.title} {
• page_builder/default_theme/from_mdast/list.tsx
  • @@ -16,11 +16,27 @@ "taskItem",
    "checkbox", "check", "text", + "list", + "normalListItem", ]); export const listStyles = join( icons.lucideIconStyles, css` + .${c.list} { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + padding-left: 1.5em; + line-height: calc(var(--baseline) * 1rem); + } + .${c.list} .${c.list} { + margin-top: 0; + } + + .${c.text} { + line-height: calc(var(--baseline) * 1rem); + } + .${c.taskItem} { display: flex; align-items: start;
  • @@ -49,8 +65,8 @@ min-height: 0px;
    height: 100%; } - .${c.text} { - line-height: calc(var(--baseline) * 1rem); + .${c.normalListItem}::marker { + line-height: 1.5; } `, );
  • @@ -60,7 +76,7 @@
    export function listHandlers(): Handlers { return { list(state, node: Mdast.List) { - return h(node.ordered ? "ol" : "ul", {}, state.all(node)); + return h(node.ordered ? "ol" : "ul", { class: c.list }, state.all(node)); }, listItem(state, node: Mdast.ListItem) { const children = state.all(node).map((child) =>
  • @@ -70,7 +86,7 @@ : [child]
    ).flat(); if (typeof node.checked !== "boolean") { - return h("li", {}, children); + return h("li", { class: c.normalListItem }, children); } const labelId = "__macana_tcheck_lbl__" + (counter++).toString(16);
• page_builder/default_theme/from_mdast/mod.ts
  • @@ -19,16 +19,12 @@ import { listHandlers, listStyles } from "./list.tsx";
    import { mathHandlers } from "./math.ts"; import { codeHandlers, codeStyles } from "./code.tsx"; import { linkHandlers, linkStyles } from "./link.tsx"; + import { paragraphHandlers, paragraphStyles } from "./paragraph.ts"; import { quoteHandlers, quoteStyles } from "./quote.tsx"; const c = buildClasses("fm-0", ["wrapper"]); const ownStyles = css` - :where(.${c.wrapper}) p { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); - } - :where(.${c.wrapper}) time, :where(.${c.wrapper}) span, :where(.${c.wrapper}) code,
  • @@ -58,16 +54,6 @@ :where(.${c.wrapper}) i {
    font-style: italic; } - :where(.${c.wrapper}) ul { - margin: 0; - margin-top: calc(var(--baseline) * 1rem); - padding-left: 1.5em; - } - - :where(.${c.wrapper}) ul ul { - margin-top: 0; - } - :where(.${c.wrapper}) h1, :where(.${c.wrapper}) h2, :where(.${c.wrapper}) h3 {
  • @@ -84,6 +70,7 @@
    :where(.${c.wrapper}) h2 { margin: 0; margin-top: calc(var(--baseline) * 2rem); + line-height: calc(var(--baseline) * 1rem); } :where(.${c.wrapper}) h3,
  • @@ -92,6 +79,7 @@ :where(.${c.wrapper}) h5,
    :where(.${c.wrapper}) h6 { margin: 0; margin-top: calc(var(--baseline) * 1rem); + line-height: calc(var(--baseline) * 1rem); font-weight: 600; }
  • @@ -156,6 +144,7 @@ `;
    export const fromMdastStyles = joinCss( ownStyles, + paragraphStyles, calloutStyles, listStyles, codeStyles,
  • @@ -173,6 +162,7 @@ ...mathHandlers(),
    ...codeHandlers(), ...linkHandlers(), ...quoteHandlers(), + ...paragraphHandlers(), }, allowDangerousHtml: true, }));
• page_builder/default_theme/from_mdast/paragraph.ts (new)
  • @@ -0,0 +1,28 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + import type * as Mdast from "../../../deps/esm.sh/mdast/types.ts"; + import { h } from "../../../deps/esm.sh/hastscript/mod.ts"; + import { type Handlers } from "../../../deps/esm.sh/mdast-util-to-hast/mod.ts"; + + import { buildClasses, css } from "../css.ts"; + + const c = buildClasses("fm-p", ["paragraph"]); + + export const paragraphStyles = css` + .${c.paragraph} { + margin: 0; + margin-top: calc(var(--baseline) * 1rem); + font-size: 1rem; + line-height: calc(var(--baseline) * 1rem); + } + `; + + export function paragraphHandlers(): Handlers { + return { + paragraph(state, node: Mdast.Paragraph) { + return h("p", { class: c.paragraph }, state.all(node)); + }, + }; + }
• page_builder/default_theme/global_styles.ts
  • @@ -10,7 +10,6 @@ :root {
    font-size: 1em; --baseline: 1.75; - line-height: var(--baseline); --color-primary: rgb(217, 59, 133);
  • @@ -83,7 +82,7 @@ }
    body { margin: 0; - line-height: calc(var(--baseline) * 1rem); + line-height: 1.5; background: var(--color-bg); }
• page_builder/default_theme/widgets/document_tree.tsx
  • @@ -38,6 +38,7 @@ .${c.list} {
    padding: 0; padding-inline-start: calc(1em + 4px); border-inline-start: 2px solid var(--color-subtle-overlay); + line-height: 2; } .${c.directoryHeader} {
• page_builder/default_theme/widgets/toc.tsx
  • @@ -14,6 +14,7 @@
    export const tocStyles = css` .${c.root} { font-size: 0.8rem; + line-height: 1.8; } .${c.list} {