@morphemecms/cms 0.7.1 → 0.8.0

package/theme/components/PostMeta.tsx

@@ -1,9 +1,19 @@
-// Date and reading time for a blog post: "12. marts 2024 · 5 min. læsetid" in Danish (posts.ts makes them).
+// Date and reading time for a blog post, then its tags as links: "12. marts 2024 · 5 min. læsetid · News, Tips" in Danish
+// (posts.ts makes them). Props: post, optional tags and className. A theme may replace this file.
+import { Fragment } from 'react';
 import { Svg } from '@morphemecms/cms/src/icon';
 import type { PostView } from '@theme/components/posts';
 import { siteT } from '@morphemecms/cms/src/i18n';
 
-export default function PostMeta({ post, className }: { post: PostView; className?: string }) {
+export default function PostMeta({
+  post,
+  tags,
+  className,
+}: {
+  post: PostView;
+  tags?: { label: string; href: string }[];
+  className?: string;
+}) {
   return (
     <p className={['flex flex-wrap items-center gap-x-2 type-body-medium text-muted', className].filter(Boolean).join(' ')}>
       <time dateTime={post.date}>{post.dateText}</time>
@@ -12,6 +22,21 @@ export default function PostMeta({ post, className }: { post: PostView; classNam
         <Svg name="clock" size={15} />
         {siteT.theme.readingTime(post.minutes)}
       </span>
+      {tags && tags.length > 0 && (
+        <>
+          <span aria-hidden="true">·</span>
+          <span>
+            {tags.map((tag, i) => (
+              <Fragment key={tag.href}>
+                {i > 0 && ', '}
+                <a href={tag.href} className="underline hover:text-accent">
+                  {tag.label}
+                </a>
+              </Fragment>
+            ))}
+          </span>
+        </>
+      )}
     </p>
   );
 }

package/theme/components/RelatedPosts.astro

@@ -0,0 +1,29 @@
+---
+// A "Related posts" section under a blog post: up to three PostCard components in a responsive grid. A theme may replace
+// this file to redesign the section.
+import Container from '@theme/components/Container.astro';
+import PostCard from '@theme/components/PostCard';
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { PostView } from '@theme/components/posts';
+
+interface Props {
+  posts: PostView[];
+}
+
+const { posts } = Astro.props;
+---
+
+{posts.length > 0 && (
+  <Container class="mt-12 medium:mt-16" aria-labelledby="related-posts">
+    <h2 id="related-posts" class="type-headline-small">
+      {siteT.theme.relatedPosts}
+    </h2>
+    <ul class="mt-6 grid gap-6 medium:grid-cols-3">
+      {posts.map((post) => (
+        <li>
+          <PostCard post={post} />
+        </li>
+      ))}
+    </ul>
+  </Container>
+)}

package/theme/components/ShareRow.astro

@@ -0,0 +1,48 @@
+---
+// The share buttons under a blog post: plain links to Facebook, X, LinkedIn and Pinterest, and a button that copies the
+// post's address (theme/ui/copyLink.script.ts). Props: the post's address, title and picture, and which buttons are on
+// (site.social.share). Draws nothing without buttons. Uses shareLinks (site/social.mjs), Icon and IconButton's classes.
+import { shareLinks, type ShareId } from '@morphemecms/cms/site/social.mjs';
+import Icon from '@theme/components/Icon.astro';
+import { iconButtonClass } from '@theme/ui/IconButton';
+import { siteT } from '@morphemecms/cms/src/i18n';
+
+interface Props {
+  url: string;
+  title: string;
+  picture?: string;
+  share: ShareId[];
+}
+const { url, title, picture, share } = Astro.props;
+
+const links = shareLinks({ url, title, picture }, share);
+const networks: Record<string, { name: string; icon: string }> = {
+  facebook: { name: 'Facebook', icon: 'facebook-logo' },
+  x: { name: 'X', icon: 'x-logo' },
+  linkedin: { name: 'LinkedIn', icon: 'linkedin-logo' },
+  pinterest: { name: 'Pinterest', icon: 'pinterest-logo' },
+};
+const buttonClass = iconButtonClass('standard');
+---
+
+{links.length > 0 && (
+  <div role="group" aria-label={siteT.theme.share} class="flex items-center gap-x-2">
+    {links.map(({ id, href }) =>
+      id === 'copy-link' ? (
+        <button
+          type="button"
+          class={buttonClass}
+          aria-label={siteT.theme.copyLink}
+          data-copy-link={url}
+          data-copied={siteT.theme.linkCopied}
+        >
+          <Icon name="link-simple" size={22} />
+        </button>
+      ) : (
+        <a href={href} class={buttonClass} aria-label={siteT.theme.shareOn(networks[id].name)} target="_blank" rel="noopener">
+          <Icon name={networks[id].icon} size={22} />
+        </a>
+      ),
+    )}
+  </div>
+)}

package/theme/layouts/PostLayout.astro

@@ -1,16 +1,18 @@
 ---
-// Blog post template. A narrow reading column, the site's owner as author; related posts in the footer.
+// Blog post template. A narrow reading column, the site's owner as author. Order: PostHeader (back link, title, author,
+// byline with tags, share row), the lead (the text's first paragraph), the featured picture, the rest of the text, the
+// end block, RelatedPosts. Without a lead the picture comes before the text.
 // 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 picture and the text. The text goes through RichText (blocks={false}: a post draws no blocks, but its coloured sections are panels).
+// packages/editor/src/pagePreview.tsx): the heading, the lead, the picture and the text. The text goes through RichText (blocks={false}: a post draws no blocks, but its coloured sections are panels).
+import { splitLead } from '@morphemecms/cms/lib/lead.mjs';
 import { firstImage, heroImage, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import Base from '@theme/layouts/Base.astro';
-import Icon from '@theme/components/Icon.astro';
 import Img from '@theme/components/Img.astro';
 import EndBlock from '@theme/components/EndBlock.astro';
 import RichText from '@theme/components/RichText.astro';
 import { categoryName, getPosts, postPath, stateOf, type Post } from '@morphemecms/cms/site/content';
-import PostMeta from '@theme/components/PostMeta';
-import Chip from '@theme/ui/Chip';
+import PostHeader from '@theme/components/PostHeader.astro';
+import RelatedPosts from '@theme/components/RelatedPosts.astro';
 import { postViewOf } from '@theme/components/loadPosts';
 import { site } from '@morphemecms/cms/site/site';
 import { isBlogCategory } from '@morphemecms/cms/site/categories';
@@ -24,11 +26,20 @@ const { post } = Astro.props;
 const { title, description, date, updated, categories } = post.data;
 // A decorative picture (imageDecorative) has no alternative text.
 const imageAlt = post.data.imageDecorative ? undefined : post.data.imageAlt;
-// The pills under the post: only the blog categories (the others have no page).
+// The tags in the byline: only the blog categories (the others have no page).
 const onBlog = categories.filter(isBlogCategory);
 // Some posts also have their featured image (or another version of it) inside the text; never show it twice.
 const image = heroImage(post.data.image, post.body);
 
+// The picture a share to Pinterest pins: the one chosen for sharing, else the post's own, with the site's address in front.
+const sharePicture = post.data.shareImage || post.data.image || firstImage(post.body);
+const picture = sharePicture?.startsWith('/') ? site.url + sharePicture : sharePicture || undefined;
+
+// The text's first paragraph is the lead, drawn before the featured picture; without one the picture comes first.
+const { lead, rest } = splitLead(await Astro.slots.render('default'));
+// The lead has the text's class too (the editor's preview copies the text's class to the lead) and post-lead.
+const textClass = 'prose mx-auto mt-10 max-w-3xl px-5 medium:mt-14 medium:px-8';
+
 // Related: most shared categories first, then newest.
 const related = (await getPosts())
   .filter((p) => p.id !== post.id)
@@ -69,23 +80,14 @@ const related = (await getPosts())
   ]}
 >
   <article>
-    <header class="mx-auto max-w-3xl px-5 pt-8 medium:px-8 medium:pt-14">
-      <a href="/blog/" class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
-        <Icon name="arrow-left" size={16} /> {siteT.theme.blog}
-      </a>
-      <h1 data-editor="heading" class="theme-title mt-3">
-        {title}
-      </h1>
-      <div class="mt-6 flex items-center gap-3">
-        {site.portrait && (
-          <Img src={site.portrait} alt="" loading="eager" class="size-11 rounded-full object-cover object-[50%_20%]" sizes="44px" />
-        )}
-        <div class="leading-snug">
-          <span class="block font-medium">{site.name}</span>
-          <PostMeta post={postViewOf(post)} />
-        </div>
-      </div>
-    </header>
+    <PostHeader
+      title={title}
+      post={postViewOf(post)}
+      tags={onBlog.map((c) => ({ label: categoryName(c), href: `/blog/kategori/${c}/` }))}
+      share={{ url: site.url + postPath(post), title, picture, share: site.social.share }}
+    />
+
+    {lead && <div data-editor="lead" class={`${textClass} post-lead`} set:html={lead} />}
 
     {image && (
       <div data-editor="image" class="mx-auto mt-8 max-w-5xl px-5 medium:mt-12 medium:px-8">
@@ -99,40 +101,12 @@ const related = (await getPosts())
       </div>
     )}
 
-    <div data-editor="text" class="prose mx-auto mt-10 max-w-3xl px-5 medium:mt-14 medium:px-8">
-      <RichText html={await Astro.slots.render('default')} blocks={false} />
+    <div data-editor="text" class={textClass}>
+      <RichText html={rest} blocks={false} />
     </div>
-
-    <footer class="mx-auto mt-12 max-w-3xl px-5 medium:px-8">
-      {onBlog.length > 0 && (
-        <ul class="flex flex-wrap gap-2" aria-label="Tags">
-          {onBlog.map((c) => (
-            <li>
-              <Chip href={`/blog/kategori/${c}/`} label={categoryName(c)} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </footer>
   </article>
 
   {site.postEnd && <EndBlock type={site.postEnd} />}
 
-  {related.length > 0 && (
-    <Fragment slot="footer-column">
-      <p class="footer-heading font-medium">{siteT.theme.relatedPosts}</p>
-      <ul class="mt-3 space-y-2.5 text-muted">
-        {related.map((p) => (
-          <li>
-            <a href={postPath(p)} class="hover:text-accent">
-              {p.data.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-      <a href="/blog/" class="mt-4 inline-flex items-center gap-1.5 font-medium text-accent">
-        {siteT.theme.seeAll} <Icon name="arrow-right" size={16} />
-      </a>
-    </Fragment>
-  )}
+  <RelatedPosts posts={related.map(postViewOf)} />
 </Base>

package/theme/styles/base.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+/* Material's rules sit in the last layer, fallback: a theme's own unlayered rules beat them, whatever their specificity. */
+@layer theme, base, components, utilities, fallback;
 /* The theme's UI components, as Material 3 names them (buttons, icon buttons), and the standard blocks of the editor,
    in this site's design (their variables below). */
 @import './ui.css';
@@ -8,6 +10,9 @@
 @import './components.css';
 
 /*
+  Material is every theme's fallback: its rules that set more than custom properties sit in @layer fallback (declared last in
+  base.css), so a theme's own unlayered rules win over them, whatever the specificity. Custom properties stay unlayered.
+
   The standard theme's base: what every theme builds on, plain and neutral. The system's own font, a small radius on
   panels, a light shadow, full pills on controls; the classes the standard theme's components use (.link, .prose,
   the motion …) besides the UI components (ui.css: buttons, icon buttons, chips, snackbars). The standard theme's own look is over it, in global.css; a theme with a look of its
@@ -31,7 +36,6 @@
   --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18);
   /* The motion scheme's curve (blocks.css, lib/motion.ts). */
   --ease: var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
-  color-scheme: light;
 
   /* The standard blocks (blocks.css) in this design; in dark mode too, as they
      follow the tokens above. */
@@ -53,17 +57,34 @@
   /* The same for a chip set that scrolls (ui.css). */
   --chip-set-bleed: 1.25rem;
 }
+@layer fallback {
+  :root {
+    color-scheme: light;
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
-    color-scheme: dark;
+  }
+}
+
+@layer fallback {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      color-scheme: dark;
+    }
   }
 }
 
 :root[data-theme='dark'] {
   --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 20px 40px -24px rgb(0 0 0 / 0.7);
-  color-scheme: dark;
+}
+
+@layer fallback {
+  :root[data-theme='dark'] {
+    color-scheme: dark;
+  }
 }
 
 @theme inline {
@@ -176,152 +197,168 @@
   --tw-prose-th-borders: var(--line);
   --tw-prose-td-borders: var(--line);
   --tw-prose-code: var(--ink);
-  font-size: var(--type-body-large-size);
-  line-height: var(--type-body-large-line-height);
-  font-weight: var(--type-body-large-weight);
-  letter-spacing: var(--type-body-large-tracking);
-}
-/* The text's headings: a headline, a title under it and a smaller title under that (the type scale, ui.css). */
-.prose :where(h2) {
-  font-size: var(--type-headline-medium-size);
-  line-height: var(--type-headline-medium-line-height);
-  font-weight: var(--type-headline-medium-weight);
-  letter-spacing: var(--type-headline-medium-tracking);
-}
-.prose :where(h3) {
-  font-size: var(--type-title-large-size);
-  line-height: var(--type-title-large-line-height);
-  font-weight: var(--type-title-large-weight);
-  letter-spacing: var(--type-title-large-tracking);
-}
-.prose :where(h4) {
-  font-size: var(--type-title-medium-size);
-  line-height: var(--type-title-medium-line-height);
-  font-weight: var(--type-title-medium-weight);
-  letter-spacing: var(--type-title-medium-tracking);
-}
-/* Code in a line (cookie names in the privacy policy): on a tint, without the plugin's backticks. */
-.prose :where(:not(pre) > code):not(:where(.not-prose code)) {
-  background: var(--tint);
-  border-radius: 0.3em;
-  padding: 0.1em 0.35em;
-  font-weight: 500;
 }
-.prose :where(:not(pre) > code):not(:where(.not-prose code))::before,
-.prose :where(:not(pre) > code):not(:where(.not-prose code))::after {
-  content: none;
-}
-/* Not the links of a block in the text (not-prose): their look is the block's. */
-.prose :where(a):not(:where(.not-prose a)) {
-  font-weight: 500;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.2em;
-}
-/* Pictures in the text; not those in a block of the site in it (not-prose, RichText.astro). */
-.prose :where(img):not(:where(.not-prose img)) {
-  border-radius: var(--radius);
-  width: 100%;
-  height: auto;
-}
-/* A picture in the text cut to a format in the editor (packages/editor/lib/crop.mjs): the box is the format, the
+@layer fallback {
+  .prose {
+    font-size: var(--type-body-large-size);
+    line-height: var(--type-body-large-line-height);
+    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). */
+  .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);
+  }
+  /* 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). */
+  .prose.post-lead + .prose {
+    margin-top: 1.25em;
+  }
+  /* The text's headings: a headline, a title under it and a smaller title under that (the type scale, ui.css). */
+  .prose :where(h2) {
+    font-size: var(--type-headline-medium-size);
+    line-height: var(--type-headline-medium-line-height);
+    font-weight: var(--type-headline-medium-weight);
+    letter-spacing: var(--type-headline-medium-tracking);
+  }
+  .prose :where(h3) {
+    font-size: var(--type-title-large-size);
+    line-height: var(--type-title-large-line-height);
+    font-weight: var(--type-title-large-weight);
+    letter-spacing: var(--type-title-large-tracking);
+  }
+  .prose :where(h4) {
+    font-size: var(--type-title-medium-size);
+    line-height: var(--type-title-medium-line-height);
+    font-weight: var(--type-title-medium-weight);
+    letter-spacing: var(--type-title-medium-tracking);
+  }
+  /* Code in a line (cookie names in the privacy policy): on a tint, without the plugin's backticks. */
+  .prose :where(:not(pre) > code):not(:where(.not-prose code)) {
+    background: var(--tint);
+    border-radius: 0.3em;
+    padding: 0.1em 0.35em;
+    font-weight: 500;
+  }
+  .prose :where(:not(pre) > code):not(:where(.not-prose code))::before,
+  .prose :where(:not(pre) > code):not(:where(.not-prose code))::after {
+    content: none;
+  }
+  /* Not the links of a block in the text (not-prose): their look is the block's. */
+  .prose :where(a):not(:where(.not-prose a)) {
+    font-weight: 500;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+  }
+  /* Pictures in the text; not those in a block of the site in it (not-prose, RichText.astro). */
+  .prose :where(img):not(:where(.not-prose img)) {
+    border-radius: var(--radius);
+    width: 100%;
+    height: auto;
+  }
+  /* A picture in the text cut to a format in the editor (packages/editor/lib/crop.mjs): the box is the format, the
    picture in it as large and as far moved as the part chosen. */
-.picture-crop {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius);
-  margin-block: 2em;
-}
-.picture-crop > img {
-  position: absolute;
-  inset: 0 auto auto 0;
-  max-width: none;
-  height: auto;
-  margin: 0;
-  border-radius: 0;
-}
-/* Video embeds (an embed that needs another size, an app's calendar, sets its own). */
-.prose :where(iframe) {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  height: auto;
-  border: 0;
-  border-radius: var(--radius);
-  margin-block: 2em;
-}
+  .picture-crop {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius);
+    margin-block: 2em;
+  }
+  .picture-crop > img {
+    position: absolute;
+    inset: 0 auto auto 0;
+    max-width: none;
+    height: auto;
+    margin: 0;
+    border-radius: 0;
+  }
+  /* Video embeds (an embed that needs another size, an app's calendar, sets its own). */
+  .prose :where(iframe) {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    height: auto;
+    border: 0;
+    border-radius: var(--radius);
+    margin-block: 2em;
+  }
 
-/* Motion.
+  /* Motion.
    [data-reveal]: sections fade up once when scrolled into view (packages/editor/theme/scripts/motion.ts).
    The top of a page stands still from the first paint; from another page of the site it fades in (components.css).
    Off for visitors who prefer reduced motion, and with the calm motion scheme ("Bevægelse", data-motion-scheme). */
-@media (prefers-reduced-motion: no-preference) {
-  .js:not([data-motion-scheme='calm']) [data-reveal] {
-    opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    .js:not([data-motion-scheme='calm']) [data-reveal] {
+      opacity: 0;
+    }
   }
-}
 
-/* The site's logo (public/logo.svg), colored by background-color via a mask. */
-.logo-mark {
-  display: inline-block;
-  -webkit-mask: url('/logo.svg') center / contain no-repeat;
-  mask: url('/logo.svg') center / contain no-repeat;
-}
+  /* The site's logo (public/logo.svg), colored by background-color via a mask. */
+  .logo-mark {
+    display: inline-block;
+    -webkit-mask: url('/logo.svg') center / contain no-repeat;
+    mask: url('/logo.svg') center / contain no-repeat;
+  }
 
-/* A block the theme places outside the text (Block.astro in EndBlock.astro and on the prices page): its
+  /* A block the theme places outside the text (Block.astro in EndBlock.astro and on the prices page): its
    place gives the space around it, not the text's (.block-in-text). */
-.block-place > .block-in-text {
-  margin-block: 0;
-}
-/* The heading of a block placed outside the text (a front-page section): as the theme's other section headings
+  .block-place > .block-in-text {
+    margin-block: 0;
+  }
+  /* The heading of a block placed outside the text (a front-page section): as the theme's other section headings
    (SectionHeading.tsx), not the text's; with a label or a subheading (.block-head, blocks.css) the space under the
    whole head. */
-.block-place > h2,
-.block-place > .block-head {
-  margin-block: 0 2rem;
-}
-.block-place > h2,
-.block-place > .block-head > h2 {
-  font-size: var(--type-headline-large-size);
-  line-height: var(--type-headline-large-line-height);
-  font-weight: var(--type-headline-large-weight);
-  letter-spacing: var(--type-headline-large-tracking);
-}
-@media (width >= theme(--breakpoint-medium)) {
+  .block-place > h2,
+  .block-place > .block-head {
+    margin-block: 0 2rem;
+  }
   .block-place > h2,
   .block-place > .block-head > h2 {
-    font-size: var(--type-display-medium-size);
-    line-height: var(--type-display-medium-line-height);
-    font-weight: var(--type-display-medium-weight);
-    letter-spacing: var(--type-display-medium-tracking);
+    font-size: var(--type-headline-large-size);
+    line-height: var(--type-headline-large-line-height);
+    font-weight: var(--type-headline-large-weight);
+    letter-spacing: var(--type-headline-large-tracking);
   }
-}
-/* Cards placed in the page's full width (a front-page section, PageBlock.astro): three in a row on a computer, as
+  @media (width >= theme(--breakpoint-medium)) {
+    .block-place > h2,
+    .block-place > .block-head > h2 {
+      font-size: var(--type-display-medium-size);
+      line-height: var(--type-display-medium-line-height);
+      font-weight: var(--type-display-medium-weight);
+      letter-spacing: var(--type-display-medium-tracking);
+    }
+  }
+  /* Cards placed in the page's full width (a front-page section, PageBlock.astro): three in a row on a computer, as
    there is room for (in the text, two). */
-@media (width >= theme(--breakpoint-expanded)) {
-  .block-place .block-cards {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  @media (width >= theme(--breakpoint-expanded)) {
+    .block-place .block-cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
   }
-}
 
-/* The mark before the name on a testimonial (the standard block's card): a small dot in the accent, which the standard
+  /* The mark before the name on a testimonial (the standard block's card): a small dot in the accent, which the standard
    theme's own look (global.css) makes an avatar with the initial. Another mark (e.g. a logo) is that
    theme's own (its global.css), not the standard theme's. */
-.block-testimonial-mark {
-  display: inline-block;
-  flex-shrink: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  background-color: var(--accent);
-}
+  .block-testimonial-mark {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--accent);
+  }
 
-/* Boxes side by side ("Links", an app's boxes): the site's panels (outlined cards, ui.css, without a shadow), with
+  /* Boxes side by side ("Links", an app's boxes): the site's panels (outlined cards, ui.css, without a shadow), with
    more room on a computer and the heading of a section in it. */
-.block-panels .block-panel-title {
-  font-size: var(--type-headline-small-size);
-  line-height: var(--type-headline-small-line-height);
-  font-weight: var(--type-headline-small-weight);
-  letter-spacing: var(--type-headline-small-tracking);
+  .block-panels .block-panel-title {
+    font-size: var(--type-headline-small-size);
+    line-height: var(--type-headline-small-line-height);
+    font-weight: var(--type-headline-small-weight);
+    letter-spacing: var(--type-headline-small-tracking);
+  }
 }
 @media (width >= theme(--breakpoint-medium)) {
   .block-panels > .block-panel {