@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/useDataFiles.ts

@@ -0,0 +1,94 @@
+// Several single data files edited on one screen (Appearance › Header: the two menus and header.json): each one's values
+// in the form and as they were saved, a change to them, whether any is changed, the field that keeps one from being saved,
+// and "Gem ændringer", which saves each changed file in its own commit, as SideColumn.tsx saves its file. Exposes
+// useDataFiles. Uses dataFileValues.ts, check.ts (problemAt), fields.tsx (useWrongField) and Env (App.tsx).
+import { useMemo, useState } from 'react';
+import type { DataFile, FilesCollection } from './schema';
+import { ConflictError, type RepoFile } from './github';
+import { problemAt } from './check';
+import { useWrongField, type Wrong } from './fields';
+import { dataFileIn, dataOf, fieldsOf, valuesOf } from './dataFileValues';
+import { asWritten } from './site';
+import { changesText, lower, savedText } from './deploy';
+import type { Env } from './App';
+import { siteT, t } from './i18n';
+
+/** A file on the screen: its collection and the file. */
+export type DataFilePart = { collection: FilesCollection; dataFile: DataFile };
+
+type Values = Record<string, unknown>;
+
+/** `onWrong`: a file's field keeps it from being saved (its place in `parts`, the field's path), before it is marked: so
+ * the screen can open what the field is in. */
+export function useDataFiles(env: Env, parts: DataFilePart[], onWrong?: (i: number, path: string) => void) {
+  const { notify } = env;
+  // The files as last saved (or loaded); an optional one the site has not got yet is empty (dataFileIn).
+  const [bases, setBases] = useState<RepoFile[]>(() =>
+    parts.map((p) => dataFileIn(env.files, p.dataFile) ?? { path: p.dataFile.file, oid: '', text: '{}\n' }),
+  );
+  const read = (i: number, text: string) => valuesOf(text, fieldsOf(parts[i].dataFile), parts[i].dataFile, parts[i].collection, env.files);
+  const initial = useMemo(() => bases.map((b, i) => read(i, b.text)), [bases]);
+  const [values, setValues] = useState<Values[]>(initial);
+  const [saving, setSaving] = useState(false);
+  // The field that keeps a file from being saved, marked in that file's fields only (the menus have the same paths).
+  const wrongField = useWrongField((text) => notify({ text, error: true }));
+  const [wrongIn, setWrongIn] = useState(-1);
+  const changed = values.flatMap((v, i) => (JSON.stringify(v) !== JSON.stringify(initial[i]) ? [i] : []));
+
+  async function save() {
+    // Every changed file is right before any is saved.
+    for (const i of changed) {
+      const problem = problemAt(fieldsOf(parts[i].dataFile), values[i]);
+      if (problem) {
+        setWrongIn(i);
+        onWrong?.(i, problem.path);
+        wrongField.stop(problem);
+        return false;
+      }
+    }
+    const texts = changed
+      .map((i) => ({ i, text: `${JSON.stringify(dataOf(fieldsOf(parts[i].dataFile), values[i], parts[i].dataFile), null, 2)}\n` }))
+      .filter(({ i, text }) => text !== bases[i].text);
+    if (!texts.length) {
+      notify({ text: t.forms.nothingToSave });
+      return false;
+    }
+    setSaving(true);
+    notify({ text: t.common.saving });
+    const done: string[] = [];
+    try {
+      for (const { i, text } of texts) {
+        const { dataFile } = parts[i];
+        const path = bases[i].path;
+        const change = t.app.changes.edited(lower(dataFile.label));
+        const message = siteT.forms.commit.edit(asWritten(dataFile).label.toLowerCase());
+        const oids = await env.commit(message, [{ path, content: text, oid: bases[i].oid || null }], change);
+        const saved = { path, oid: oids[path], text };
+        setBases((all) => all.map((b, j) => (j === i ? saved : b)));
+        setValues((all) => all.map((v, j) => (j === i ? read(i, text) : v)));
+        env.onSaved(saved);
+        done.push(change);
+      }
+      notify({ text: savedText(changesText(done)), kind: 'saved' });
+      return true;
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return {
+    /** Each file's values in the form, and as they were saved (in the same form, for what the preview changes). */
+    values,
+    initial,
+    /** Sets one file's values (by its place in `parts`). */
+    set: (i: number, v: Values) => setValues((all) => all.map((x, j) => (j === i ? v : x))),
+    dirty: changed.length > 0,
+    saving,
+    save,
+    /** The field marked in a file's fields (WrongField), or null. */
+    wrong: (i: number): Wrong | null => (wrongIn === i ? wrongField.field : null),
+  };
+}

package/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.8.0",
+    "@morphemecms/cms": "0.9.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/theme/components/Footer.astro

@@ -1,8 +1,9 @@
 ---
 // The footer in Material: a surface container with extra-large corners at the top, the business as a headline, how to
-// reach it as a list with leading icons, the practical links (footer.json, "På alle sider" › "Footer" in the editor) or
+// reach it as a list with leading icons, the practical links (footer.json, Appearance › Footer in the editor) or
 // what a page puts in the slot `footer-column` instead (a blog post's related posts), and at the bottom the cookie
-// settings and light or dark as text buttons.
+// settings and light or dark as text buttons. data-editor marks the footer and the parts its form changes (the editor's
+// preview of Appearance › Footer, src/footerPreview.mjs).
 import Icon from '@theme/components/Icon.astro';
 import Container from '@theme/components/Container.astro';
 import LogoMark from '@theme/components/LogoMark.astro';
@@ -20,15 +21,19 @@ const contactLinks = [
 ];
 ---
 
-<footer class="md-footer">
+<footer class="md-footer" data-editor="footer">
   <Container as="div" class="grid gap-10 py-12 expanded:grid-cols-12 medium:py-16">
     <div class="expanded:col-span-5">
       <LogoMark class="block h-12 w-11 bg-accent" />
       <p class="md-footer-name">{site.name}</p>
-      <p class="md-footer-text">{footer.text}</p>
+      <p class="md-footer-text" data-editor="footer-text">
+        {footer.text}
+      </p>
     </div>
     <div class="expanded:col-span-4">
-      <p class="md-footer-heading">{footer.contactHeading}</p>
+      <p class="md-footer-heading" data-editor="footer-contact-heading">
+        {footer.contactHeading}
+      </p>
       <ul class="md-footer-list">
         {contactLinks.map((c) => (
           <li>
@@ -49,8 +54,10 @@ const contactLinks = [
     </div>
     <div class="md-footer-column expanded:col-span-3">
       <slot name="footer-column">
-        <p class="md-footer-heading">{footer.linksHeading}</p>
-        <ul class="md-footer-list">
+        <p class="md-footer-heading" data-editor="footer-links-heading">
+          {footer.linksHeading}
+        </p>
+        <ul class="md-footer-list" data-editor="footer-links">
           {footer.links.map((l) => (
             <li>
               <a href={l.href} class="md-footer-item">

package/theme/components/Header.astro

@@ -6,7 +6,10 @@
 // turned off. Under it the bar of "Mobilmenu" (MobileNav.astro), when it is on. Under it, "Book en tid"
 // as an extended FAB at the bottom right of the screen (ui/Fab.tsx, m3.material.io/components/extended-fab), which shows only its
 // icon while the page scrolls down. Not on the booking page and the thank-you page; on a phone with a bar at the
-// bottom of the screen, the bar's first button is the FAB instead (global.css).
+// bottom of the screen, the bar's first button is the FAB instead (global.css). header.json (optional, site/header.mjs) can put a
+// button in place of the phone icon (shown from the medium window size up), and the menu button at the end; data-editor marks the
+// header, the menu button, the menu's items (header-nav) and the button's place (header-cta) for the editor's preview; their
+// classes are in headerParts.ts, which the preview shares.
 import Icon from '@theme/components/Icon.astro';
 import MobileMenu from '@theme/components/MobileMenu.tsx';
 import Logo from '@theme/components/Logo.astro';
@@ -15,37 +18,43 @@ import MobileNav from '@theme/components/MobileNav.astro';
 import { topAppBarClass } from '@theme/ui/TopAppBar';
 import { menuClass, menuItemClass } from '@theme/ui/Menu';
 import { extendedFabClass } from '@theme/ui/Fab';
-import { site, nav, navShown } from '@morphemecms/cms/site/site';
+import Buttons from '@theme/blocks/buttons/Buttons';
+import { headerCtaClass, headerEdge, headerMenuClass } from '@theme/components/headerParts';
+import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
+import { site, nav, navShown, header } from '@morphemecms/cms/site/site';
 import { siteT } from '@morphemecms/cms/src/i18n';
 
 const current = Astro.url.pathname;
 const isActive = (href: string) => current === href || (href !== '/' && current.startsWith(href));
+// The header's own button (header.json), in place of the phone icon from the medium window size up; none when it is off.
+const button = header.button ? (await loadButtons([{ ...header.button, kind: 'filled' }]))[0] : undefined;
+const menuEnd = header.menuSide === 'end';
+const menuProps = {
+  items: nav,
+  current,
+  bookingPath: site.bookingPath,
+  phone: site.phone,
+  phoneHref: site.phoneHref,
+  name: site.name,
+  role: site.role,
+  book: site.labels.book,
+  call: site.labels.call,
+  texts: {
+    open: siteT.theme.openMenu,
+    close: siteT.theme.closeMenu,
+    menu: siteT.theme.mainMenu,
+    drawer: siteT.theme.mobileMenu,
+    subpages: nav.map((item) => siteT.theme.subpagesOf(item.label)),
+  },
+};
 const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
 ---
 
-<header data-header class:list={[topAppBarClass, 'group/header sticky top-0 z-[43]']}>
+<header data-header data-editor="header" class:list={[topAppBarClass, 'group/header sticky top-0 z-[43]']}>
   <Container as="div" data-header-row class="flex h-16 items-center gap-1">
-    {navShown && (
-      <div class="-ml-2 mr-1 large:hidden large:group-data-crowded/header:block">
-        <MobileMenu
-          client:interact
-          items={nav}
-          current={current}
-          bookingPath={site.bookingPath}
-          phone={site.phone}
-          phoneHref={site.phoneHref}
-          name={site.name}
-          role={site.role}
-          book={site.labels.book}
-          call={site.labels.call}
-          texts={{
-            open: siteT.theme.openMenu,
-            close: siteT.theme.closeMenu,
-            menu: siteT.theme.mainMenu,
-            drawer: siteT.theme.mobileMenu,
-            subpages: nav.map((item) => siteT.theme.subpagesOf(item.label)),
-          }}
-        />
+    {navShown && !menuEnd && (
+      <div data-editor="header-menu" class={headerMenuClass('start')}>
+        <MobileMenu client:interact {...menuProps} />
       </div>
     )}
     <a href="/" class="md-top-app-bar-title mr-auto large:shrink-0 large:whitespace-nowrap">
@@ -53,7 +62,11 @@ const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
     </a>
 
     {navShown && (
-      <nav aria-label={siteT.theme.mainMenu} class="hidden shrink-0 large:block large:group-data-crowded/header:hidden">
+      <nav
+        aria-label={siteT.theme.mainMenu}
+        data-editor="header-nav"
+        class="hidden shrink-0 large:block large:group-data-crowded/header:hidden"
+      >
         <ul class="flex items-center gap-1">
           {nav.map((item, i) => (
             <li class="group relative flex items-center" data-nav-item>
@@ -102,14 +115,26 @@ const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
       </nav>
     )}
 
-    <a
-      href={site.phoneHref}
-      class="icon-button icon-button-standard -mr-2 ml-1"
-      aria-label={`${site.labels.call} ${site.phone}`}
-      title={site.phone}
-    >
-      <Icon name="phone" size={24} />
-    </a>
+    {button ? (
+      <div data-editor="header-cta" class={headerCtaClass}>
+        <Buttons buttons={[button]} />
+      </div>
+    ) : (
+      <a
+        href={site.phoneHref}
+        data-editor="header-cta"
+        class:list={['icon-button icon-button-standard', headerEdge.end]}
+        aria-label={`${site.labels.call} ${site.phone}`}
+        title={site.phone}
+      >
+        <Icon name="phone" size={24} />
+      </a>
+    )}
+    {navShown && menuEnd && (
+      <div data-editor="header-menu" class={headerMenuClass('end')}>
+        <MobileMenu client:interact {...menuProps} />
+      </div>
+    )}
   </Container>
   <MobileNav />
 </header>

package/theme/components/MobileNav.astro

@@ -3,8 +3,9 @@
 // top with it: its links on one line as scrollable tabs (m3.material.io/components/tabs), on a phone and a tablet (where
 // the menu is behind the menu button), to be swiped sideways when they do not fit, with the open page's chosen (its
 // label in its own colour) and scrolled into view: the theme's tabs (ui/Tabs.tsx, .tab in styles/ui.css). Not there when
-// it is turned off or has no links.
-import { tabsClass, tabClass } from '@theme/ui/Tabs';
+// it is turned off or has no links. data-editor marks it for the editor's preview of the header (its classes: headerParts.ts).
+import { tabClass } from '@theme/ui/Tabs';
+import { mobileNavClass, mobileNavListClass } from '@theme/components/headerParts';
 import { mobileNav } from '@morphemecms/cms/site/site';
 import { siteT } from '@morphemecms/cms/src/i18n';
 
@@ -13,8 +14,8 @@ const isActive = (href: string) => current === href || (href !== '/' && current.
 ---
 
 {mobileNav.length > 0 && (
-  <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav class="large:hidden large:group-data-crowded/header:block">
-    <ul class:list={[tabsClass, 'relative mx-auto max-w-6xl px-1 medium:px-4']}>
+  <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav data-editor="mobile-nav" class={mobileNavClass}>
+    <ul class={mobileNavListClass}>
       {mobileNav.map((item) => (
         <li>
           <a href={item.href} class={tabClass} aria-current={isActive(item.href) ? 'page' : undefined}>

package/theme/components/RelatedPosts.astro

@@ -18,7 +18,7 @@ const { posts } = Astro.props;
     <h2 id="related-posts" class="type-headline-small">
       {siteT.theme.relatedPosts}
     </h2>
-    <ul class="mt-6 grid gap-6 medium:grid-cols-3">
+    <ul class="mt-6 grid gap-(--card-gap) medium:grid-cols-3">
       {posts.map((post) => (
         <li>
           <PostCard post={post} />

package/theme/components/headerParts.ts

@@ -0,0 +1,17 @@
+// The classes of the header's parts that its settings move or put in (Header.astro, MobileNav.astro), shared with the
+// editor's preview of the header (src/headerTheme.tsx), so both draw them the same.
+// Exposes headerEdge, headerMenuClass, headerCtaClass, mobileNavClass and mobileNavListClass. Uses ui/Tabs.tsx.
+import { tabsClass } from '@theme/ui/Tabs';
+
+/** The place of a part at the start of the row (the menu button) and at its end (the phone, or the menu button). */
+export const headerEdge = { start: '-ml-2 mr-1', end: '-mr-2 ml-1' } as const;
+
+/** The menu button's box at either side: shown where the menu's items are not (below large, or when they do not fit). */
+export const headerMenuClass = (side: 'start' | 'end') => `${headerEdge[side]} large:hidden large:group-data-crowded/header:block`;
+
+/** The header's own button's box (header.json): only from the medium window size up. */
+export const headerCtaClass = 'hidden shrink-0 medium:block';
+
+/** The bar of "Mobilmenu" under the header, where the menu's items are not, and its row of tabs. */
+export const mobileNavClass = 'large:hidden large:group-data-crowded/header:block';
+export const mobileNavListClass = `${tabsClass} relative mx-auto max-w-6xl px-1 medium:px-4`;

package/theme/layouts/PageLayout.astro

@@ -1,9 +1,11 @@
 ---
-// A page (the standard theme's): back link, title and the text with its blocks (its pictures in it), in one column (with
-// the block src/data/side.json chooses in a column beside it, when there is one: sideBlock), and the booking
-// prompt across the page when the text ends with it. A wide page (`wide`, "Hele bredden"): its blocks go across the
-// page, its text keeps a readable width, and its first paragraph is the introduction under the heading (as
-// PageHeader.astro's).
+// A page (the standard theme's): back link, title and the text with its blocks (its pictures in it), in one column, or
+// with the block src/data/side.json chooses in a column beside it (sideBlock) when its template is a sidebar one
+// (`template`, lib/page-template.mjs: the theme's "templates"), and the booking prompt across the page when the text ends
+// with it. The wrapper carries data-template, so a theme can style a template; `full` is drawn like `single` here.
+// Width: with a column beside it the text is 66ch wide, blocks and all; without one (single, full) the text column is the
+// container's width, its blocks (not-prose) span it, and its other parts (paragraphs, headings) keep 66ch. Its first
+// paragraph is the lead (type-lead, ui.css: the --type-lead-* tokens), muted and 52ch wide.
 // data-editor marks what the editor's preview fills in with what is in its form ("Forhåndsvis",
 // packages/editor/src/pagePreview.tsx): the heading, the text, and the booking prompt at the end.
 import Base from '@theme/layouts/Base.astro';
@@ -15,6 +17,8 @@ import { getPages, pageHeading, pageHeadingHtml, parentPage, stateOf, withoutH1,
 import { blockTexts, nav } from '@morphemecms/cms/site/site';
 import { firstPicture, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
+import { hasSidebar, templateOf } from '@morphemecms/cms/lib/page-template.mjs';
+import { offeredTemplates } from '@morphemecms/cms/site/templates';
 import { markdownHtml } from '@morphemecms/cms/lib/inline';
 import Container from '@theme/components/Container.astro';
 import RichText from '@theme/components/RichText.astro';
@@ -36,7 +40,8 @@ const parent = parentEntry
   : parentNav
     ? { href: parentNav.href, title: parentNav.label }
     : undefined;
-const { description, path, wide } = page.data;
+const { description, path } = page.data;
+const template = templateOf(page.data, offeredTemplates);
 const heading = pageHeading(page);
 // With its colours, when a word in it has one.
 const headingHtml = pageHeadingHtml(page);
@@ -64,7 +69,7 @@ const preview = isPreview(path);
 const current = livePath(path);
 const review = (page.data.review ?? '').trim();
 // The block beside the text (sideBlock): when its type's load gives a view; else the page is drawn as without one.
-const sideType = sideBlock(page.data);
+const sideType = sideBlock(template);
 const sideText = end ? end.html : html;
 const side =
   sideType &&
@@ -89,7 +94,7 @@ const side =
   crumbs={parent ? [{ name: parent.title, href: parent.href }] : []}
   questions={questions}
 >
-  <article>
+  <article data-template={template}>
     <Container as="header" class="pt-8 medium:pt-14">
       {parent && (
         <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
@@ -102,16 +107,15 @@ const side =
       </h1>
     </Container>
 
-    <Container as="div" class:list={[wide ? 'mt-4' : 'mt-8 medium:mt-12']}>
-      <div {...(side ? { class: 'page-with-side' } : {})}>
+    <Container as="div" class="mt-8 medium:mt-12">
+      <div {...(side ? { class: 'page-with-side', 'data-side': template === 'sidebar-left' ? 'left' : 'right' } : {})}>
         <div
           data-editor="text"
-          class:list={[
-            'prose',
-            wide
-              ? 'max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:max-w-[52ch] [&>p:first-child]:type-body-large [&>p:first-child]:text-muted medium:[&>p:first-child]:type-title-large'
-              : 'max-w-[66ch]',
-          ]}
+          class={
+            side
+              ? 'prose max-w-[66ch]'
+              : 'prose max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:type-lead [&>p:first-child]:text-muted [&>p:first-child]:max-w-[52ch]'
+          }
         >
           <RichText html={sideText} path={current} preview={preview} />
         </div>

package/theme/styles/base.css

@@ -205,12 +205,13 @@
     font-weight: var(--type-body-large-weight);
     letter-spacing: var(--type-body-large-tracking);
   }
-  /* A blog post's lead: its first paragraph, one step larger than the text (the title-large size, with the body weight). */
+  /* A blog post's lead: its first paragraph, one step larger than the text (the lead tokens, ui.css: the title large's
+     unless a theme sets them). */
   .prose.post-lead {
-    font-size: var(--type-title-large-size);
-    line-height: var(--type-title-large-line-height);
-    font-weight: var(--type-body-large-weight);
-    letter-spacing: var(--type-title-large-tracking);
+    font-size: var(--type-lead-size);
+    line-height: var(--type-lead-line-height);
+    font-weight: var(--type-lead-weight);
+    letter-spacing: var(--type-lead-tracking);
   }
   /* The text right after the lead (no picture between): the space the prose puts between paragraphs (1.25em), not the
    larger space of a text under a picture. Unlayered on purpose: it must beat the mt-10 / medium:mt-14 utilities (a layer). */

package/theme/styles/blocks.css

@@ -584,11 +584,11 @@
   /* "Udtalelser" one after another (testimonials/List.tsx): two columns where there is room. */
   .block-testimonial-list {
     columns: 2 18rem;
-    column-gap: 1rem;
+    column-gap: var(--card-gap, 0.5rem);
   }
   .block-testimonial-list > * {
     break-inside: avoid;
-    margin-bottom: 1rem;
+    margin-bottom: var(--card-gap, 0.5rem);
   }
   /* Filter chips (the theme's Chip, ui.css) that filter what is under them ("Udtalelser" under hinanden). */
   .block-filters {
@@ -744,7 +744,7 @@
      two side by side from small screens (cards/LinkCards.tsx). */
   .block-cards {
     display: grid;
-    gap: 1rem;
+    gap: var(--card-gap, 0.5rem);
     padding: 0;
     list-style: none;
   }
@@ -770,7 +770,7 @@
   /* The picture fills the top of the card, out to its edges. */
   .block-card-picture {
     display: block;
-    margin: -1.5rem -1.5rem 0.25rem;
+    margin: calc(-1 * var(--card-padding, 1rem)) calc(-1 * var(--card-padding, 1rem)) 0.25rem;
     overflow: hidden;
     border-radius: calc(var(--card-radius, var(--block-radius)) - 1px) calc(var(--card-radius, var(--block-radius)) - 1px) 0 0;
     background: var(--block-tint);
@@ -862,7 +862,7 @@
     display: grid;
     /* Two side by side where there is room for 17rem each, never more. */
     grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, calc(50% - 0.5rem))), 1fr));
-    gap: 1rem;
+    gap: var(--card-gap, 0.5rem);
   }
   .block-panels.block-in-text {
     margin-block: 2.5rem;
@@ -1306,7 +1306,7 @@
   }
   .block-price-cards {
     display: grid;
-    gap: 1rem;
+    gap: var(--card-gap, 0.5rem);
   }
   /* A big price, an elevated card (.card in ui.css). */
   .block-price-card {
@@ -1459,9 +1459,6 @@
   }
 
   @media (hover: hover) {
-    a.block-card:hover {
-      --card-outlined-line: var(--block-accent);
-    }
     a.block-card:hover .block-card-arrow {
       translate: 0.25rem 0;
     }
@@ -1536,8 +1533,7 @@
       font-weight: var(--type-headline-medium-weight);
       letter-spacing: var(--type-headline-medium-tracking);
     }
-    .block-prices,
-    .block-price-cards {
+    .block-prices {
       gap: 1.25rem;
     }
     .block-price-cards {
@@ -1597,7 +1593,7 @@
   }
   .block-plans-list {
     display: grid;
-    gap: 1rem;
+    gap: var(--card-gap, 0.5rem);
     margin: 0;
     padding: 0;
     list-style: none;

package/theme/styles/components.css

@@ -202,7 +202,7 @@
   }
 
   /* A page with a block beside its text (PageLayout.astro): the text, then the column (on a phone below the text); from medium
-   two columns, the second one staying in view while the text is read. */
+   two columns, the one beside the text staying in view while the text is read; on the left for `sidebar-left`. */
   .page-with-side > .page-side {
     margin-top: 3rem;
   }
@@ -218,6 +218,13 @@
       position: sticky;
       top: 6rem;
     }
+    /* Template sidebar-left: the column first, though it comes after the text in the page. */
+    .page-with-side[data-side='left'] {
+      grid-template-columns: var(--theme-side-width) minmax(0, 1fr);
+    }
+    .page-with-side[data-side='left'] > .page-side {
+      order: -1;
+    }
   }
 
   /* A page's and a post's title (PageHeader.astro, PageLayout.astro, PostLayout.astro, Home.astro): the display role, by

package/theme/styles/global.css

@@ -194,6 +194,8 @@
   /* Cards (ui.css): 12px corners; outlined on the surface with the outline variant, elevated on a low container with
      the first elevation, filled on the highest container. */
   --card-radius: var(--md-shape-medium);
+  /* The room between cards side by side or under each other: 8px (Material 3's at most). */
+  --card-gap: 0.5rem;
   --card-filled-surface: var(--md-surface-container-highest);
   --card-outlined-surface: var(--surface);
   --card-outlined-line: var(--line);
@@ -851,13 +853,12 @@
     padding: 1rem 1.25rem;
   }
 
-  /* "Kort": filled cards, as Material 3's (their outlined cards on the highest container, without the edge or a
-     shadow, also when pointed at), with a state layer when pointed at. */
+  /* "Kort": filled cards, as Material 3's (their outlined cards on the highest container, with no edge and
+     no shadow at rest, and the first elevation when pointed at), with the card's state layer (ui.css) when pointed at or
+     focused. */
   .block-card {
     border: 0;
     --card-outlined-surface: var(--md-surface-container-highest);
-    --card-outlined-hover-shadow: var(--elevation-0);
-    transition: background-color var(--motion-effects);
   }
   .block-card-picture {
     border-radius: var(--card-radius) var(--card-radius) var(--md-shape-none) var(--md-shape-none);
@@ -865,11 +866,6 @@
   .block-card-text {
     font-weight: 400;
   }
-  @media (hover: hover) {
-    a.block-card:hover {
-      --card-outlined-surface: color-mix(in srgb, var(--ink) 8%, var(--md-surface-container-highest));
-    }
-  }
 
   /* Panels and the cards of testimonials and prices: outlined, filled and elevated cards (their variables above). A
      list in a panel reaches out to its sides, so its items' text is in line with the panel's. */