@morphemecms/cms 0.5.0 → 0.7.0

package/src/virtual.d.ts

@@ -1,3 +1,8 @@
+declare module 'virtual:material-symbols-ssr' {
+  const files: Record<string, string>;
+  export default files;
+}
+
 // What is in each app's folder (appFoldersPlugin in lib/apps.mjs): its files, by their paths in it, and its csp.json.
 declare module 'virtual:app-folders' {
   const folders: Record<string, { files: string[]; csp?: Partial<Record<string, string[]>> }>;

package/starter/README.md

@@ -25,4 +25,5 @@ npm run dev
 ```
 
 `npm run check` kører tjekkene (formatering, typer, indholdet efter editorens regler, editoren og Workeren), før hver
-push og før hver bygning på Cloudflare, og `npm run build` bygger sitet i `dist/`.
+push. Cloudflare bygger med `npx morpheme ci-build`: alle tjekkene, eller kun editorens egne, når kun indhold er ændret
+siden det live site; og `npm run build` bygger sitet i `dist/`.

package/starter/package.json

@@ -29,9 +29,10 @@
     "@astrojs/rss": "^4.0.19",
     "@astrojs/sitemap": "^3.7.4",
     "@fontsource-variable/roboto": "^5.3.0",
+    "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.5.0",
+    "@morphemecms/cms": "0.7.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/starter/wrangler.jsonc

@@ -22,9 +22,10 @@
   "d1_databases": [{ "binding": "CONSENT" }],
   // Builds of other branches than main run `wrangler preview`, which needs this block.
   "previews": {},
-  // The checks first, so a branch that fails them is neither built nor deployed.
+  // morpheme ci-build runs the checks first (all of them, or just the editor's when only content changed since the live
+  // commit), so a branch that fails them is neither built nor deployed.
   "build": {
-    "command": "npm run check && npm run build",
+    "command": "npx morpheme ci-build",
   },
   // Each hour, the pages and posts that are Planlagt are published once their time has come, and the apps do theirs. Each
   // minute, whether the site has been built with a save, for the notification on the phone.

package/theme/blocks/cards/LinkCards.tsx

@@ -4,11 +4,12 @@
 // theme's surface or (`background`) the accent: the standard block "Kort", and a site's own cards (this site's front
 // page).
 // `className`: the site's own classes on the list, e.g. its margin.
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { Svg } from '@morphemecms/cms/src/icon';
 import type { LinkCard } from '@morphemecms/cms/src/standard/cards/view';
 import Card from '@theme/ui/Card';
 
-const sizes = '(min-width: 640px) 352px, 100vw';
+const sizes = `(min-width: ${BREAKPOINTS.medium}px) 352px, 100vw`;
 
 export default function LinkCards({
   items,

package/theme/blocks/hero/View.tsx

@@ -7,12 +7,13 @@
 // screen may show them (data-hero-cta, Base.astro).
 import Buttons from '@theme/blocks/buttons/Buttons';
 import type { HeroView } from '@morphemecms/cms/src/standard/hero/view';
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { useInText } from '@morphemecms/cms/src/standard/view';
 
 export default function Hero({ view }: { view: HeroView }) {
   const { image } = view;
   // The widths the picture is shown in: behind the text the whole block's, beside it a part of it.
-  const sizes = view.behind ? (view.full ? '100vw' : '(min-width: 1152px) 1152px, 100vw') : '(min-width: 768px) 40vw, 100vw';
+  const sizes = view.behind ? (view.full ? '100vw' : 'min(72rem, 100vw)') : `(min-width: ${BREAKPOINTS.expanded}px) 40vw, 100vw`;
   return (
     <div
       className={useInText('block-hero', view.behind && 'block-hero-behind', !image && 'block-hero-plain', view.full && 'block-hero-full')}

package/theme/blocks/video/View.tsx

@@ -3,6 +3,7 @@
 // its title; a click puts the video in its place (Base.astro). A new link is a new video, with its own still. In the
 // editor a still the site does not have yet is YouTube's or Vimeo's, else the plain box.
 import { useState } from 'react';
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { Svg } from '@morphemecms/cms/src/icon';
 import type { VideoView } from '@morphemecms/cms/src/standard/video/view';
 import { InProse, Link, useOnSite } from '@morphemecms/cms/src/standard/view';
@@ -26,7 +27,7 @@ function Facade({ view }: { view: VideoView }) {
             className="video-facade-image"
             src={still.src}
             srcSet={still.srcset}
-            sizes={still.srcset && '(min-width: 768px) 720px, 100vw'}
+            sizes={still.srcset && `(min-width: ${BREAKPOINTS.expanded}px) 720px, 100vw`}
             alt=""
             loading="lazy"
             decoding="async"

package/theme/components/BlogIndex.astro

@@ -24,8 +24,8 @@ const categories = await getCategories();
 
 <Base {...seo} title={title} description={description} crumbs={activeCategory ? [{ name: 'Blog', href: '/blog/' }] : []}>
   <PageHeader title={title} intro={intro}>
-    <nav aria-label={siteT.theme.tags} class="-mx-5 mt-8 md:mx-0">
-      <ul class="flex gap-2 overflow-x-auto px-5 pb-2 [scrollbar-width:none] md:flex-wrap md:overflow-visible md:px-0">
+    <nav aria-label={siteT.theme.tags} class="-mx-5 mt-8 medium:mx-0">
+      <ul class="flex gap-2 overflow-x-auto px-5 pb-2 [scrollbar-width:none] medium:flex-wrap medium:overflow-visible medium:px-0">
         <li class="shrink-0">
           <Chip kind="filter" href="/blog/" label={siteT.theme.allPosts} selected={!activeCategory} className="shrink-0" />
         </li>

package/theme/components/BlogPosts.astro

@@ -13,6 +13,6 @@ interface Props {
 const { posts, class: className } = Astro.props;
 ---
 
-<Container class={className ?? (posts.length ? 'mt-10 md:mt-14' : 'mt-10')}>
+<Container class={className ?? (posts.length ? 'mt-10 medium:mt-14' : 'mt-10')}>
   <BlogPostsView posts={posts.map(postViewOf)} />
 </Container>

package/theme/components/BlogPosts.tsx

@@ -6,6 +6,7 @@ import PostList from '@theme/components/PostList';
 import PostMeta from '@theme/components/PostMeta';
 import type { PostView } from '@theme/components/posts';
 import { Link } from '@morphemecms/cms/src/standard/view';
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { siteT } from '@morphemecms/cms/src/i18n';
 
 export default function BlogPosts({ posts }: { posts: PostView[] }) {
@@ -21,25 +22,27 @@ export default function BlogPosts({ posts }: { posts: PostView[] }) {
     );
   return (
     <>
-      <Link href={featured.href} className="group grid items-center gap-6 md:grid-cols-12 md:gap-12">
+      <Link href={featured.href} className="group grid items-center gap-6 medium:gap-12 expanded:grid-cols-12">
         {featured.image && (
-          <div className="overflow-hidden rounded-(--theme-picture-radius) md:col-span-7">
+          <div className="overflow-hidden rounded-(--theme-picture-radius) expanded:col-span-7">
             <Img
               image={featured.image}
               alt={featured.imageAlt ?? ''}
               fetchPriority="high"
               className="aspect-[16/10] w-full object-cover [transition:scale_var(--motion-spatial-slow)] group-hover:scale-[1.03]"
-              sizes="(min-width: 768px) 55vw, calc(100vw - 40px)"
+              sizes={`(min-width: ${BREAKPOINTS.expanded}px) 55vw, calc(100vw - 40px)`}
             />
           </div>
         )}
-        <div className="md:col-span-5">
+        <div className="expanded:col-span-5">
           <PostMeta post={featured} />
-          <h2 className="mt-2 type-headline-medium transition-colors group-hover:text-accent md:type-headline-large">{featured.title}</h2>
+          <h2 className="mt-2 type-headline-medium transition-colors group-hover:text-accent medium:type-headline-large">
+            {featured.title}
+          </h2>
           <p className="mt-3 text-muted">{featured.description}</p>
         </div>
       </Link>
-      {rest.length > 0 && <PostList posts={rest} className="mt-12 md:mt-16" />}
+      {rest.length > 0 && <PostList posts={rest} className="mt-12 medium:mt-16" />}
     </>
   );
 }

package/theme/components/Container.astro

@@ -6,6 +6,6 @@ type Props = HTMLAttributes<'section'> & { as?: 'section' | 'div' | 'header' };
 const { as: Tag = 'section', class: className, ...rest } = Astro.props;
 ---
 
-<Tag class:list={['mx-auto max-w-6xl px-5 md:px-8', className]} {...rest}>
+<Tag class:list={['mx-auto max-w-6xl px-5 medium:px-8', className]} {...rest}>
   <slot />
 </Tag>

package/theme/components/CookieConsent.astro

@@ -34,7 +34,7 @@ const necessary = category('necessary');
   hidden
   class:list={[
     dialogClass,
-    'fixed inset-x-3 bottom-3 z-[42] max-h-[calc(100dvh-1.5rem)] max-w-md overflow-y-auto p-5 md:inset-x-auto md:bottom-6 md:left-6 md:p-6',
+    'fixed inset-x-3 bottom-3 z-[42] max-h-[calc(100dvh-1.5rem)] max-w-md overflow-y-auto p-5 medium:inset-x-auto medium:bottom-6 medium:left-6 medium:p-6',
   ]}
   style="margin-bottom: env(safe-area-inset-bottom)"
 >

package/theme/components/EndBlock.astro

@@ -16,6 +16,6 @@ interface Props {
 const { type, props = {}, ...rest } = Astro.props;
 ---
 
-<Container class="block-place mt-20 md:mt-28" data-reveal {...rest}>
+<Container class="block-place mt-20 medium:mt-28" data-reveal {...rest}>
   <Block type={type} props={props} />
 </Container>

package/theme/components/Footer.astro

@@ -21,13 +21,13 @@ const contactLinks = [
 ---
 
 <footer class="md-footer">
-  <Container as="div" class="grid gap-10 py-12 md:grid-cols-12 md:py-16">
-    <div class="md:col-span-5">
+  <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>
     </div>
-    <div class="md:col-span-4">
+    <div class="expanded:col-span-4">
       <p class="md-footer-heading">{footer.contactHeading}</p>
       <ul class="md-footer-list">
         {contactLinks.map((c) => (
@@ -47,7 +47,7 @@ const contactLinks = [
         ))}
       </ul>
     </div>
-    <div class="md-footer-column md:col-span-3">
+    <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">
@@ -61,7 +61,7 @@ const contactLinks = [
         </ul>
       </slot>
     </div>
-    <div class="md-footer-bottom md:col-span-12">
+    <div class="md-footer-bottom expanded:col-span-12">
       <span>
         © {new Date().getFullYear()} {site.name}
         {site.cvr && <> · CVR {site.cvr}</>}

package/theme/components/Header.astro

@@ -26,7 +26,7 @@ const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
 <header data-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 xl:hidden xl:group-data-crowded/header:block">
+      <div class="-ml-2 mr-1 large:hidden large:group-data-crowded/header:block">
         <MobileMenu
           client:interact
           items={nav}
@@ -48,12 +48,12 @@ const fab = !current.startsWith(site.bookingPath) && current !== '/tak/';
         />
       </div>
     )}
-    <a href="/" class="md-top-app-bar-title mr-auto xl:shrink-0 xl:whitespace-nowrap">
+    <a href="/" class="md-top-app-bar-title mr-auto large:shrink-0 large:whitespace-nowrap">
       <Logo />
     </a>
 
     {navShown && (
-      <nav aria-label={siteT.theme.mainMenu} class="hidden shrink-0 xl:block xl:group-data-crowded/header:hidden">
+      <nav aria-label={siteT.theme.mainMenu} 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>

package/theme/components/Icon.astro

@@ -1,7 +1,7 @@
 ---
 // An icon by its name, drawn by the same Svg as the blocks and the editor (@morphemecms/cms/src/icon): the theme's own
-// (icons/<name>.svg), else the icon pack in use's, else Phosphor's; one the site does not draw as the question mark
-// (MISSING), which check:screens finds on the built pages.
+// (icons/<name>.svg), else the icon pack in use's, else Phosphor's, else Material Symbols' by its Material name (listed by
+// check:screens); one none has as the question mark (MISSING), which check:screens finds on the built pages.
 import { Svg } from '@morphemecms/cms/src/icon';
 
 interface Props {

package/theme/components/MobileMenu.tsx

@@ -9,16 +9,18 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
-import { Svg } from '@morphemecms/cms/src/icon';
 import { motionSpring } from '@morphemecms/cms/lib/motion';
 import IconButton from '@theme/ui/IconButton';
 import { ExtendedFab } from '@theme/ui/Fab';
 import {
   NavigationDrawerItem,
   NavigationDrawerRow,
+  NavigationDrawerSection,
   NavigationDrawerSubitem,
   NavigationDrawerToggle,
+  focusNavigationDrawerItem,
   navigationDrawerClass,
+  navigationDrawerKeys,
   navigationDrawerScrimClass,
 } from '@theme/ui/NavigationDrawer';
 
@@ -54,7 +56,6 @@ export default function MobileMenu({
   const [mounted, setMounted] = useState(false);
   const reduce = useReducedMotion();
   const openButton = useRef<HTMLButtonElement>(null);
-  const closeButton = useRef<HTMLButtonElement>(null);
   const drawer = useRef<HTMLDivElement>(null);
   // The scheme's springs (only used in the browser, where the menu opens): in at the default spatial spring, out at the
   // fast one, and the scrim with the effects'.
@@ -65,14 +66,21 @@ export default function MobileMenu({
     fadeOut: motionSpring('effects', 'fast'),
   }));
 
-  useEffect(() => setMounted(true), []);
+  // The edge it comes from is the start edge: it slides in from the left, and from the right in right-to-left languages.
+  const [away, setAway] = useState('-100%');
+  useEffect(() => {
+    setMounted(true);
+    setAway(getComputedStyle(document.documentElement).direction === 'rtl' ? '100%' : '-100%');
+  }, []);
 
   useEffect(() => {
     if (!open) return;
     const root = document.documentElement;
     const prevOverflow = root.style.overflow;
     root.style.overflow = 'hidden';
-    closeButton.current?.focus();
+    // The focus goes to the first item; the arrow keys, Home and End move between them.
+    if (drawer.current) focusNavigationDrawerItem(drawer.current);
+    const stopKeys = drawer.current ? navigationDrawerKeys(drawer.current) : undefined;
 
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') setOpen(false);
@@ -92,6 +100,7 @@ export default function MobileMenu({
     };
     document.addEventListener('keydown', onKey);
     return () => {
+      stopKeys?.();
       document.removeEventListener('keydown', onKey);
       // Closed by "Book en tid": the booking sheet (a modal dialog) is open now and keeps the page
       // still and the focus itself.
@@ -135,10 +144,10 @@ export default function MobileMenu({
                   role="dialog"
                   aria-modal="true"
                   aria-label={texts.drawer}
-                  className={`${navigationDrawerClass} absolute inset-y-0 left-0`}
-                  initial={reduce ? false : { x: '-100%' }}
+                  className={`${navigationDrawerClass} absolute inset-y-0 start-0`}
+                  initial={reduce ? false : { x: away }}
                   animate={{ x: 0, transition: reduce ? { duration: 0 } : spring.enter }}
-                  exit={reduce ? undefined : { x: '-100%', transition: spring.leave }}
+                  exit={reduce ? undefined : { x: away, transition: spring.leave }}
                 >
                   <div className="md-drawer-head">
                     <span aria-hidden="true" className="logo-mark h-10 w-9 shrink-0 bg-accent" />
@@ -146,7 +155,7 @@ export default function MobileMenu({
                       <p className="md-drawer-name">{name}</p>
                       <p className="md-drawer-role">{role}</p>
                     </div>
-                    <IconButton ref={closeButton} icon="x" label={texts.close} onClick={() => setOpen(false)} />
+                    <IconButton icon="x" label={texts.close} onClick={() => setOpen(false)} />
                   </div>
 
                   <ExtendedFab
@@ -158,61 +167,63 @@ export default function MobileMenu({
                     onClick={() => setOpen(false)}
                   />
 
-                  <nav aria-label={texts.menu}>
-                    <ul>
-                      {items.map((item, i) => (
-                        <li key={item.href}>
-                          <NavigationDrawerRow data-active={holdsCurrent(item) || undefined}>
-                            <NavigationDrawerItem
-                              href={item.href}
-                              onClick={() => setOpen(false)}
-                              aria-current={current === item.href ? 'page' : undefined}
-                            >
-                              {item.label}
-                            </NavigationDrawerItem>
-                            {item.children && (
-                              <NavigationDrawerToggle
-                                label={texts.subpages[i]}
-                                expanded={expanded === item.href}
-                                onClick={() => setExpanded(expanded === item.href ? null : item.href)}
-                                aria-controls={`sub-${item.href}`}
-                              />
-                            )}
-                          </NavigationDrawerRow>
-                          <AnimatePresence initial={false}>
-                            {item.children && expanded === item.href && (
-                              <motion.ul
-                                id={`sub-${item.href}`}
-                                className="overflow-hidden"
-                                initial={reduce ? false : { height: 0, opacity: 0 }}
-                                animate={{ height: 'auto', opacity: 1, transition: spring.enter }}
-                                exit={reduce ? undefined : { height: 0, opacity: 0, transition: spring.leave }}
+                  <NavigationDrawerSection>
+                    <nav aria-label={texts.menu}>
+                      <ul>
+                        {items.map((item, i) => (
+                          <li key={item.href}>
+                            <NavigationDrawerRow data-active={holdsCurrent(item) || undefined}>
+                              <NavigationDrawerItem
+                                href={item.href}
+                                onClick={() => setOpen(false)}
+                                aria-current={current === item.href ? 'page' : undefined}
                               >
-                                {item.children.map((child) => (
-                                  <li key={child.href}>
-                                    <NavigationDrawerSubitem
-                                      href={child.href}
-                                      active={current === child.href}
-                                      onClick={() => setOpen(false)}
-                                      aria-current={current === child.href ? 'page' : undefined}
-                                    >
-                                      {child.label}
-                                    </NavigationDrawerSubitem>
-                                  </li>
-                                ))}
-                              </motion.ul>
-                            )}
-                          </AnimatePresence>
-                        </li>
-                      ))}
-                    </ul>
-                  </nav>
+                                {item.label}
+                              </NavigationDrawerItem>
+                              {item.children && (
+                                <NavigationDrawerToggle
+                                  label={texts.subpages[i]}
+                                  expanded={expanded === item.href}
+                                  onClick={() => setExpanded(expanded === item.href ? null : item.href)}
+                                  aria-controls={`sub-${item.href}`}
+                                />
+                              )}
+                            </NavigationDrawerRow>
+                            <AnimatePresence initial={false}>
+                              {item.children && expanded === item.href && (
+                                <motion.ul
+                                  id={`sub-${item.href}`}
+                                  className="overflow-hidden"
+                                  initial={reduce ? false : { height: 0, opacity: 0 }}
+                                  animate={{ height: 'auto', opacity: 1, transition: spring.enter }}
+                                  exit={reduce ? undefined : { height: 0, opacity: 0, transition: spring.leave }}
+                                >
+                                  {item.children.map((child) => (
+                                    <li key={child.href}>
+                                      <NavigationDrawerSubitem
+                                        href={child.href}
+                                        active={current === child.href}
+                                        onClick={() => setOpen(false)}
+                                        aria-current={current === child.href ? 'page' : undefined}
+                                      >
+                                        {child.label}
+                                      </NavigationDrawerSubitem>
+                                    </li>
+                                  ))}
+                                </motion.ul>
+                              )}
+                            </AnimatePresence>
+                          </li>
+                        ))}
+                      </ul>
+                    </nav>
+                  </NavigationDrawerSection>
 
-                  <hr className="md-divider" />
-                  <NavigationDrawerItem href={phoneHref}>
-                    <Svg name="phone" size={24} />
-                    {call} {phone}
-                  </NavigationDrawerItem>
+                  <NavigationDrawerSection>
+                    <NavigationDrawerItem href={phoneHref} icon="phone">
+                      {call} {phone}
+                    </NavigationDrawerItem>
+                  </NavigationDrawerSection>
                 </motion.div>
               </div>
             )}

package/theme/components/MobileNav.astro

@@ -13,8 +13,8 @@ const isActive = (href: string) => current === href || (href !== '/' && current.
 ---
 
 {mobileNav.length > 0 && (
-  <nav aria-label={siteT.theme.mobileMenu} data-mobile-nav class="xl:hidden xl:group-data-crowded/header:block">
-    <ul class:list={[tabsClass, 'relative mx-auto max-w-6xl px-1 md:px-4']}>
+  <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']}>
       {mobileNav.map((item) => (
         <li>
           <a href={item.href} class={tabClass} aria-current={isActive(item.href) ? 'page' : undefined}>

package/theme/components/PageHeader.astro

@@ -11,10 +11,10 @@ interface Props {
 const { title, intro } = Astro.props;
 ---
 
-<Container as="header" class="pt-8 md:pt-14">
+<Container as="header" class="pt-8 medium:pt-14">
   <h1 class="theme-title max-w-[18ch]">{title}</h1>
   {intro && (
-    <p class="type-body-large md:type-title-large mt-4 max-w-[52ch] text-muted">
+    <p class="type-body-large medium:type-title-large mt-4 max-w-[52ch] text-muted">
       <Inline text={intro} />
     </p>
   )}

package/theme/components/PageSection.astro

@@ -14,7 +14,7 @@ const { title, intro, class: className, id } = Astro.props;
 ---
 
 <Container class={className} id={id} data-reveal>
-  {title && <h2 class="type-headline-large md:type-display-small">{title}</h2>}
+  {title && <h2 class="type-headline-large medium:type-display-small">{title}</h2>}
   {intro && (
     <p class="mt-3 max-w-[52ch] text-muted">
       <Inline text={intro} />

package/theme/components/PopupButton.tsx

@@ -13,11 +13,11 @@ export default function PopupButton({ button }: { button?: PopupButtonView }) {
   return (
     <div className="block-buttons mt-6">
       {'file' in button ? (
-        <Button href={button.file.href} icon="download-simple" download="" className="w-full sm:w-auto">
+        <Button href={button.file.href} icon="download-simple" download="" className="w-full medium:w-auto">
           {button.file.label}
         </Button>
       ) : (
-        <Buttons buttons={button.buttons} className="w-full sm:w-auto" />
+        <Buttons buttons={button.buttons} className="w-full medium:w-auto" />
       )}
     </div>
   );

package/theme/components/PopupView.tsx

@@ -27,12 +27,12 @@ export default function PopupView({ popup, Part, part }: { popup: PopupBoxView;
           srcSet={popup.image.srcset}
           width={popup.image.width}
           height={popup.image.height}
-          sizes="(min-width: 480px) 448px, calc(100vw - 2rem)"
+          sizes="min(28rem, calc(100vw - 2rem))"
           alt=""
           className="block aspect-[3/2] w-full bg-tint object-cover"
         />
       )}
-      <div className="p-6 md:p-8">
+      <div className="p-6 medium:p-8">
         <h2 id={`popup-${popup.slug}`} className={popup.image ? 'type-headline-small' : 'pr-12 type-headline-small'}>
           {popup.heading}
         </h2>

package/theme/components/PostList.tsx

@@ -4,6 +4,7 @@
 import Img from '@theme/components/Img';
 import PostMeta from '@theme/components/PostMeta';
 import type { PostView } from '@theme/components/posts';
+import { BREAKPOINTS } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { Link, useOnSite } from '@morphemecms/cms/src/standard/view';
 
 // Shows the number in data-random-posts of the posts in the list just before it, picked at random.
@@ -29,16 +30,19 @@ export default function PostList({
   const onSite = useOnSite();
   return (
     <>
-      <ul className={['grid gap-x-12 md:grid-cols-2', className].filter(Boolean).join(' ')} data-random-posts={random ? count : undefined}>
+      <ul
+        className={['grid gap-x-12 expanded:grid-cols-2', className].filter(Boolean).join(' ')}
+        data-random-posts={random ? count : undefined}
+      >
         {posts.map((post, i) => (
           <li key={post.href || post.title} hidden={random && i >= count} className="border-t border-line">
-            <Link href={post.href} className="group grid grid-cols-[5.5rem_1fr] gap-4 py-5 sm:grid-cols-[8rem_1fr] sm:gap-5">
+            <Link href={post.href} className="group grid grid-cols-[5.5rem_1fr] gap-4 py-5 medium:grid-cols-[8rem_1fr] medium:gap-5">
               {post.image ? (
                 <Img
                   image={post.image}
                   alt=""
                   className="theme-post-picture aspect-square w-full object-cover"
-                  sizes="(min-width: 640px) 128px, 88px"
+                  sizes={`(min-width: ${BREAKPOINTS.medium}px) 128px, 88px`}
                 />
               ) : (
                 <span className="theme-post-picture aspect-square bg-tint" />

package/theme/components/RichText.astro

@@ -5,8 +5,9 @@
 // is in it, as a video written in the text, packages/editor/lib/video.mjs); a block hidden in the editor is left
 // out (splitBlocks). The HTML comes as `html`, or as the default slot (rendered Markdown). `path`: the
 // page's address, for the testimonials' label. `preview`: a new version of a page (/ny/), whose topics
-// show the opening of the new versions too. Each block gets its type, and its shared texts as `texts` (blockTexts).
+// show the opening of the new versions too. A section with a colour is drawn as <section class="text-section text-section-<color>"> around its parts (lib/text-sections.mjs). Each block gets its type, and its shared texts as `texts` (blockTexts).
 import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
+import { sectionClass, sectionsOf } from '@morphemecms/cms/lib/text-sections.mjs';
 import { blockSites } from '@morphemecms/cms/src/standard/sites';
 import { blockTexts } from '@morphemecms/cms/site/site';
 
@@ -14,15 +15,29 @@ interface Props {
   html?: string;
   path?: string;
   preview?: boolean;
+  // false: the text only, its blocks left as written (a blog post's text, which draws none).
+  blocks?: boolean;
 }
-const { path, preview } = Astro.props;
+const { path, preview, blocks = true } = Astro.props;
 const html = Astro.props.html ?? (await Astro.slots.render('default'));
 
-const parts = splitBlocks(html, Object.keys(blockSites));
+// A section with a colour (lib/text-sections.mjs) is a run of its own, drawn as a panel around its parts (blocks.css).
+let n = 0;
+const runs = sectionsOf(html).map((run) => ({
+  color: run.color,
+  parts: splitBlocks(run.html, blocks ? Object.keys(blockSites) : []).map((p) => ({ ...p, index: n++ })),
+}));
 ---
 
-{parts.map((p, i) => {
-  if (p.html !== undefined) return <Fragment set:html={p.html} />;
-  const Block = blockSites[p.type];
-  return <Block type={p.type} props={p.props} index={i} path={path} preview={preview} texts={blockTexts[p.type]} />;
+{runs.map((run) => {
+  const Run = run.color ? 'section' : Fragment;
+  return (
+    <Run {...(run.color ? { class: sectionClass(run.color) } : {})}>
+      {run.parts.map((p) => {
+        if (p.html !== undefined) return <Fragment set:html={p.html} />;
+        const Block = blockSites[p.type];
+        return <Block type={p.type} props={p.props} index={p.index} path={path} preview={preview} texts={blockTexts[p.type]} />;
+      })}
+    </Run>
+  );
 })}