@museumwnf/viewer-layout 3.3.0 → 3.5.0

package/src/dxa/testing.js

@@ -29,17 +29,28 @@ function mounter(config, sharedTexts, ownTexts) {
   return { messages, mountSite: (hash = '#/') => mountOn(config, messages, hash) }
 }
 
-// The footer's attribution and terms-of-use link come from the data package's
-// `manifest.rights`, read by the layout's own `SiteShell`.
+// The page's text nodes joined by spaces, for `checkTextsRendered`: a raw
+// entry name sits inside one text node, while the host's `textContent` glues
+// neighbouring blocks together ("… online exhibition." + "The Hijaz
+// Railway" reads as an "exhibition.T…" name).
+function spacedText(host) {
+  const walker = host.ownerDocument.createTreeWalker(host, 4 /* NodeFilter.SHOW_TEXT */)
+  const parts = []
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) parts.push(node.nodeValue)
+  return { textContent: parts.join(' ') }
+}
+
+// The footer is legacy's: the portal links, the 2004–<year> line and the
+// social-network icons, and no rights-holder line, which legacy never printed
+// (inventory-app#2233).
 function rightsTest(mountSite, manifest, messages) {
-  it('renders the rights attribution and the terms link in the footer', async () => {
+  it("renders legacy's footer: the portal links, the copyright line and the social links, no attribution", async () => {
     const { app, host } = await mountSite()
-    const attribution = host.querySelector('.mwnf-footer__attribution')
-    expect(attribution).not.toBeNull()
-    expect(attribution.textContent).toContain(manifest.rights.attribution)
-    const terms = attribution.querySelector('a.mwnf-footer__terms')
-    expect(terms.textContent).toBe(messages.en['record.source.termsOfUse'])
-    expect(terms.getAttribute('href')).toBe(manifest.rights.terms_url)
+    expect(host.querySelector('.mwnf-footer__attribution')).toBeNull()
+    expect(host.querySelector('.mwnf-footer__text').textContent)
+      .toContain(`${messages.en['core.footer.copyright']} 2004–`)
+    expect(host.querySelectorAll('.mwnf-footer__link').length).toBeGreaterThan(0)
+    expect(host.querySelectorAll('.mwnf-footer__social-link')).toHaveLength(6)
     app.unmount()
   }, 20000)
 }
@@ -179,7 +190,10 @@ export function describeGallerySmoke({ config, sharedTexts, ownTexts, manifest,
   describe('gallery smoke test', () => {
     it('mounts against the configured data package', async () => {
       const { app, host } = await mountSite()
-      expect(host.textContent).toContain(config.siteName)
+      // The home banner's title is legacy's: the gallery's own project name
+      // where the gallery is one ("Discover Carpet Art"), its name elsewhere.
+      const title = manifest.projects?.[manifest.gallery?.project_id]?.name?.en ?? config.siteName
+      await vi.waitFor(() => expect(host.querySelector('.mwnf-banner__title')?.textContent ?? '').toContain(title), WAIT)
       expect(host.querySelector('.mwnf-page')).not.toBeNull()
       // The family's Home view replaces viewer-core's generic one.
       expect(host.querySelector('.vc-home')).toBeNull()
@@ -224,6 +238,10 @@ export function describeGallerySmoke({ config, sharedTexts, ownTexts, manifest,
       expect(host.querySelector('.mwnf-record')).not.toBeNull()
       expect(host.querySelector('.mwnf-dxa-item__languages')).not.toBeNull()
       expect(host.querySelector('.mwnf-sheet-related')).not.toBeNull()
+      // Related content is legacy's sidebar, and the record's internal key
+      // is never shown.
+      expect(host.querySelector('.mwnf-record__aside .mwnf-sheet-related')).not.toBeNull()
+      expect(host.textContent).not.toContain('mwnf3:')
       // The "Source database" line names the item's project from the manifest.
       const projectName = manifest.projects[items[0].project_id]?.name?.en ?? ''
       expect(host.querySelector('.mwnf-sheet-source').textContent).toContain(projectName)
@@ -472,7 +490,7 @@ export function describeGallerySmoke({ config, sharedTexts, ownTexts, manifest,
       expect(text).toContain('Skip to content')
       expect(text).toContain('All MWNF Galleries')
       expect(text).toContain('Tip:')
-      expect(checkTextsRendered(host, {
+      expect(checkTextsRendered(spacedText(host), {
         namespaces: [namespace, 'core', 'layout', 'catalogue', 'record', 'sheet', 'timeline', 'partner', 'gallery'],
       })).toEqual([])
       app.unmount()
@@ -529,6 +547,10 @@ export function describeExhibitionSmoke({
       expect(host.querySelector('.mwnf-record')).not.toBeNull()
       expect(host.querySelector('.mwnf-dxa-item__languages')).not.toBeNull()
       expect(host.querySelector('.mwnf-sheet-related')).not.toBeNull()
+      // Related content is legacy's sidebar, and the record's internal key
+      // is never shown.
+      expect(host.querySelector('.mwnf-record__aside .mwnf-sheet-related')).not.toBeNull()
+      expect(host.textContent).not.toContain('mwnf3:')
       const projectName = manifest.projects?.[item.project_id]?.name?.en
       if (projectName) expect(host.querySelector('.mwnf-sheet-source__line').textContent).toContain(projectName)
       // The glossary tool is the layout's own, on every sheet.
@@ -748,8 +770,9 @@ export function describeExhibitionSmoke({
       const { app, host } = await mountSite('#/about')
       await vi.waitFor(() => expect(host.querySelector('.mwnf-essay')).not.toBeNull(), WAIT)
       expect(host.querySelector('.mwnf-essay').className).toContain('mwnf-essay--about')
-      // About mode drops the side column and the picture narrative.
-      expect(host.querySelector('.mwnf-essay__side')).toBeNull()
+      // About mode keeps legacy's picture column (the About theme's pictures
+      // and their captions) and drops the tour and the picture narrative.
+      expect(host.querySelector('.mwnf-essay__side .mwnf-picture-gallery')).not.toBeNull()
       expect(host.querySelector('.mwnf-picture-narrative')).toBeNull()
       expect(host.textContent).toContain(config.siteName)
       app.unmount()
@@ -823,7 +846,7 @@ export function describeExhibitionSmoke({
       expect(text).toContain('Skip to content')
       expect(text).toContain('Themes')
       expect(text).toContain('A MWNF online exhibition.')
-      expect(checkTextsRendered(host, {
+      expect(checkTextsRendered(spacedText(host), {
         namespaces: [namespace, 'core', 'layout', 'catalogue', 'record', 'sheet', 'timeline', 'partner', 'exhibition'],
       })).toEqual([])
       app.unmount()

package/src/styles/dxa-exhibition.css

@@ -48,7 +48,7 @@
   --mwnf-header-padding: 0;
   --mwnf-header-background: #ffffff;
   --mwnf-header-text: #000000;
-  --mwnf-header-title-size: 1.375rem;
+  --mwnf-header-title-size: 1.875rem;
   --mwnf-header-subtitle-size: 0.875rem;
   --mwnf-header-subtitle-color: #000000;
 
@@ -231,6 +231,10 @@
      box. */
   --mwnf-dxa-heading-color: var(--secondary-text-color);
   --mwnf-dxa-band-background: #e0e0e0;
+  /* The item sheet's Related Content sidebar, in the contrast colour. */
+  --mwnf-dxa-related-background: var(--contrast-color);
+  --mwnf-dxa-related-text: var(--contrast-text-color);
+  --mwnf-dxa-related-heading-color: var(--contrast-text-color);
 
   /* ---------- PartnerListView group heading ---------- */
   --mwnf-partner-list-group-title-size: 1.25rem;
@@ -352,6 +356,15 @@ a { color: inherit; }
   padding-inline: 0;
 }
 
+/* The header's "A MWNF Online Exhibition": bold, in the contrast colour,
+   outlined by legacy's dark shadow. */
+.mwnf-header__title {
+  font-weight: 700;
+  line-height: 1;
+  color: var(--contrast-color);
+  text-shadow: -1px 0 2px #000000;
+}
+
 /* The footer: one centred line of links and the copyright. */
 .mwnf-footer {
   justify-content: center;
@@ -363,3 +376,14 @@ a { color: inherit; }
   .mwnf-nav--open .mwnf-nav__links { display: grid; }
   .mwnf-nav__toggle { width: 100%; justify-content: center; font-size: 20px; }
 }
+
+/* Legacy's language select in the header: the codes alone, no visible
+   label (it stays for a screen reader). */
+.mwnf-header__language-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/styles/dxa-gallery.css

@@ -125,12 +125,12 @@
   --mwnf-banner-section-title-size: 190%;
 
   /* ---------- Content: the record page ---------- */
-  /* The sheet as the legacy gallery set it: bold labels in the dark tone over
+  /* The sheet as the legacy gallery set it: bold labels in the text colour over
      plain values, no cell borders, the photo gallery on the page ground. */
   --mwnf-sheet-text-size: 0.9375rem;
   --mwnf-sheet-label-size: 0.9375rem;
   --mwnf-sheet-label-weight: 700;
-  --mwnf-sheet-label-color: var(--theme-dark);
+  --mwnf-sheet-label-color: inherit;
   --mwnf-sheet-gap: 0.75rem;
   --mwnf-sheet-toggle-color: var(--theme-dark);
   --mwnf-sheet-term-color: var(--theme-medium-dark);
@@ -223,6 +223,11 @@
      on the page ground. */
   --mwnf-dxa-heading-color: var(--theme-dark);
   --mwnf-dxa-band-background: var(--background-color);
+  /* The item sheet's Related Content sidebar: white on the light tone, its
+     headings underlined in the dark tone (legacy's `$theme-light`). */
+  --mwnf-dxa-related-background: var(--theme-light);
+  --mwnf-dxa-related-text: #ffffff;
+  --mwnf-dxa-related-heading-color: var(--theme-dark);
 }
 
 /* ── Page reset ──────────────────────────────────────────────────────────── */
@@ -340,3 +345,245 @@ a { color: inherit; }
   .mwnf-nav--open .mwnf-nav__links { display: grid; grid-template-columns: 1fr; }
   .mwnf-nav__toggle { width: 100%; justify-content: center; font-size: 20px; }
 }
+
+/* ── The header mark and tools, the footer's icons (inventory-app#2233) ──── */
+
+/* The tools keep to the row's end whether or not a title cell sits between
+   them and the mark (the home page has none). Legacy's logo is drawn at its
+   own size. */
+.mwnf-header__tools {
+  margin-inline-start: auto;
+}
+.mwnf-header__brand-logo {
+  height: auto;
+}
+.mwnf-footer__social-link {
+  color: #ffffff;
+}
+
+/* ── The home page: legacy's FeaturedPartners, LogosComponent and
+   FeaturedGalleries ───────────────────────────────────────────────────── */
+
+/* Featured Partners: white on the medium tone, the picture and the text
+   side by side in the middle 60% of the column, the bullets under them. */
+.mwnf-dxa-home .mwnf-featured-partners {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  background: var(--theme-medium);
+  color: #ffffff;
+}
+.mwnf-dxa-home .mwnf-featured-partners__heading {
+  width: calc(60% + 20px);
+  margin: 40px 0 20px;
+  font-size: 125%;
+  font-weight: 400;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__carousel {
+  width: calc(60% + 20px);
+  height: 32vh;
+  max-height: 275px;
+  min-height: 0;
+}
+.mwnf-dxa-home .mwnf-featured-partners__card {
+  height: 100%;
+  gap: 20px;
+}
+.mwnf-dxa-home .mwnf-featured-partners__image {
+  flex: 0 0 calc(50% - 10px);
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__logo {
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__body {
+  flex: 1;
+  gap: 0;
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__name {
+  font-size: inherit;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__location {
+  font-size: inherit;
+  font-style: italic;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__description {
+  height: 6em;
+  overflow: hidden;
+  margin-top: 20px;
+  line-height: 1.2em;
+  font-size: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more {
+  margin-top: 5px;
+  text-align: end;
+  color: #ffffff;
+  text-decoration: none;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more + .mwnf-featured-partners__more {
+  margin-top: 0;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more:hover {
+  text-decoration: underline;
+}
+.mwnf-dxa-home .mwnf-featured-partners__controls {
+  justify-content: flex-start;
+  width: calc(60% + 20px);
+  margin: 20px 0 40px;
+  padding: 0;
+  gap: 18px;
+}
+.mwnf-dxa-home .mwnf-featured-partners__bullet {
+  width: 14px;
+  height: 14px;
+  background: var(--theme-dark);
+}
+.mwnf-dxa-home .mwnf-featured-partners__bullet--active {
+  background: var(--theme-light);
+}
+
+/* The logos strip (Glass's "Set up on the occasion of"). */
+.mwnf-dxa-home-logos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 50px;
+  background: #ffffff;
+}
+.mwnf-dxa-home-logos__label {
+  font-weight: 700;
+  color: var(--theme-dark);
+}
+.mwnf-dxa-home-logos__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+}
+.mwnf-dxa-home-logos__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  min-height: 90px;
+  margin: 10px 20px;
+}
+.mwnf-dxa-home-logos__logo img {
+  max-width: 100%;
+  object-fit: contain;
+}
+
+/* Visit MWNF Galleries and Other Virtual Museums, side by side on white:
+   four tiles named in capitals on a dark band over the picture, and the
+   three virtual museums' picture banners, each named in its colour. */
+.mwnf-dxa-home .mwnf-sibling-galleries {
+  display: grid;
+  grid-template-columns: 75% 25%;
+  background: #ffffff;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__galleries,
+.mwnf-dxa-home .mwnf-sibling-galleries__museums {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  background: transparent;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__header {
+  margin-bottom: 12px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__heading,
+.mwnf-dxa-home .mwnf-sibling-galleries__see-more {
+  align-self: flex-start;
+  margin-bottom: 12px;
+  padding: 2px 0;
+  border-bottom: 1px solid var(--theme-medium-dark);
+  font-size: 115%;
+  font-weight: 400;
+  color: var(--theme-medium-dark);
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__header .mwnf-sibling-galleries__heading,
+.mwnf-dxa-home .mwnf-sibling-galleries__see-more {
+  margin-bottom: 0;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__grid {
+  gap: 24px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__gallery {
+  position: relative;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__image {
+  height: auto;
+  aspect-ratio: 1;
+  margin: 0;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__name {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3em;
+  padding: 0 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  font-weight: 400;
+  font-size: inherit;
+  text-align: center;
+  text-transform: uppercase;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museums-grid {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  gap: 10px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum {
+  position: relative;
+  flex: 1;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture {
+  height: 100%;
+  background: none;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture + .mwnf-sibling-galleries__museum-name {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-size: 150%;
+  font-weight: 700;
+  color: var(--mwnf-museum-bg);
+  text-shadow: 0 0 10px var(--mwnf-museum-text);
+}
+
+@media only screen and (max-width: 974px) {
+  .mwnf-dxa-home .mwnf-sibling-galleries {
+    display: flex;
+    flex-direction: column;
+  }
+  .mwnf-dxa-home .mwnf-sibling-galleries__museums-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 24px;
+  }
+  .mwnf-dxa-home .mwnf-featured-partners__heading,
+  .mwnf-dxa-home .mwnf-featured-partners__carousel,
+  .mwnf-dxa-home .mwnf-featured-partners__controls {
+    width: calc(80% + 20px);
+  }
+}

package/src/tokens.reference.css

@@ -57,6 +57,7 @@
   /* --mwnf-header-button-active-background: #1c1c1c; The active language button */
   /* --mwnf-header-button-active-text: #ffffff;      Its text color */
   /* --mwnf-header-language-gap: 0.25rem;            Gap between language buttons */
+  /* --mwnf-header-brand-logo-height: 3rem;          The logo image in the brand cell */
 
   /* ---------- AppBanner ---------- */
   /* --mwnf-banner-padding: 0;                       Vertical padding */
@@ -158,6 +159,10 @@
   /* --mwnf-footer-link-color: inherit;              Footer link color */
   /* --mwnf-footer-attribution-gap: 0.25rem;         Gap before the rights-holder label */
   /* --mwnf-footer-terms-color: inherit;             Terms-of-use link color */
+  /* --mwnf-footer-social-gap: 1rem;                 Gap between the social-network icons */
+  /* --mwnf-footer-social-offset: 1.5rem;            Space before them */
+  /* --mwnf-footer-social-color: inherit;            Their colour (else the footer link colour) */
+  /* --mwnf-footer-social-size: 1rem;                Their height */
 
   /* ---------- Content: SectionCards ---------- */
   /* --mwnf-card-columns: 3;                         Cards per row */
@@ -795,9 +800,82 @@
   /* --mwnf-dxa-band-background: #f0f0f0;            Language switcher / tab strip / timeline-link box background */
   /* --mwnf-dxa-item-background: #ffffff;            Item page ground (white on a gallery's tinted page) */
   /* --mwnf-dxa-item-link: var(--mwnf-link-text);   Item sheet value links */
+  /* --mwnf-dxa-item-padding: 3.125rem 1.25rem;      Item page: the photo and sheet columns' side padding */
+  /* --mwnf-dxa-related-width: 25%;                  Item page: the Related Content sidebar's width */
+  /* --mwnf-dxa-related-background: #f0f0f0;         Its background */
+  /* --mwnf-dxa-related-text: inherit;               Its text and links */
+  /* --mwnf-dxa-related-heading-color: inherit;      Its underlined headings */
+  /* --mwnf-dxa-glossary-image: none;                The glossary entry header's picture (set by ItemDetailView from the site's world.png) */
+  /* --mwnf-dxa-popup-image-width: 13.25rem;        An exhibition popup notice's pictures: their widest (legacy sized them 191 to 211px) */
   /* --mwnf-dxa-theme-background: #ffffff;           Exhibition theme pages: the ground (legacy's secondary colour) */
   /* --mwnf-dxa-theme-text: #000000;                 Their text and tour links (secondary text colour) */
   /* --mwnf-dxa-theme-contrast: #64bfd9;             The heading band and link hover (contrast colour) */
   /* --mwnf-dxa-theme-contrast-text: #000000;        The heading band's text (contrast text colour) */
   /* --mwnf-dxa-theme-main: #000000;                 The themes page's left half (main colour) */
+
+
+  /* ---------- Standalone family pages (src/standalone/, styles/standalone.css) ---------- */
+  /* Scoped to .mwnf-standalone: Discover Islamic Art, Discover Baroque Art, Sharing History. */
+  /* --mwnf-standalone-header-height: 5rem;          Header row height (legacy: 81px) */
+  /* --mwnf-standalone-header-inset: 4rem;           Header side inset of the logo and the links */
+  /* --mwnf-standalone-header-tools-gap: 0.25rem;    Gap between the header links and the language select */
+  /* --mwnf-standalone-header-link-color: inherit;   Header links ("MWNF Portal | Home") */
+  /* --mwnf-standalone-header-links-gap: 0.5rem;     Space around the "|" between header links */
+  /* --mwnf-standalone-heading-size: 2.125rem;       Inner pages' header heading size */
+  /* --mwnf-standalone-heading-weight: 400;          Its weight */
+  /* --mwnf-standalone-heading-color: inherit;       Its colour */
+  /* --mwnf-standalone-heading-shadow: none;         Its text shadow */
+  /* --mwnf-standalone-language-size: 0.75rem;       Header language select text size */
+  /* --mwnf-standalone-logo-height: 3.125rem;        Header logo maximum height */
+  /* --mwnf-standalone-banner-height: 10rem;         Inner pages' banner band height */
+  /* --mwnf-standalone-banner-background: transparent;  Band colour under its picture */
+  /* --mwnf-standalone-banner-title-size: 1.875rem;  Band title size */
+  /* --mwnf-standalone-banner-title-color: inherit;  Band title colour */
+  /* --mwnf-standalone-banner-title-padding: 0.5rem 0 0.875rem 4rem;  Band title padding */
+  /* --mwnf-standalone-menu-background: transparent; Menu cells */
+  /* --mwnf-standalone-menu-alt-background: var(--mwnf-standalone-menu-background);  Every other menu cell */
+  /* --mwnf-standalone-menu-link: inherit;           Menu link colour */
+  /* --mwnf-standalone-menu-hover: inherit;          Menu link colour under the pointer and when active */
+  /* --mwnf-standalone-menu-size: 0.9375rem;         Menu text size */
+  /* --mwnf-standalone-menu-weight: 500;             Menu text weight */
+  /* --mwnf-standalone-menu-padding: 0.3125rem 0;    Menu cell padding */
+  /* --mwnf-standalone-bullet: none;                 The arrow before a side link (a url() to the site's picture) */
+  /* --mwnf-standalone-back-arrow: none;             The arrow before a "Back" link (a url()) */
+  /* --mwnf-standalone-home-gap: 2rem;               Gap between the home page's two columns */
+  /* --mwnf-standalone-home-padding: 1.25rem 2.25rem;   Home content padding (top, bottom) */
+  /* --mwnf-standalone-home-links-margin: 3.5rem 0 0;   Side links' margin */
+  /* --mwnf-standalone-home-link: inherit;           Side link colour */
+  /* --mwnf-standalone-home-text-size: inherit;      The home page's text size (side links, record of the day) */
+  /* --mwnf-standalone-highlight-offset: 3.5rem;     Space above the record of the day */
+  /* --mwnf-standalone-highlight-gap: 1.25rem;       Gap between its picture and its text */
+  /* --mwnf-standalone-highlight-image-width: 18rem; Its picture's maximum width */
+  /* --mwnf-standalone-sponsors-background: transparent;  The band above the footer */
+  /* --mwnf-standalone-sponsors-padding: 1.25rem;    Its padding (top and bottom) */
+  /* --mwnf-standalone-sponsors-gap: 1.5rem;         Gap between its columns */
+  /* --mwnf-standalone-sponsors-text-size: 0.875rem; Its text size */
+  /* --mwnf-standalone-sponsors-logo-gap: 1.25rem;   Gap between its logos */
+  /* --mwnf-standalone-sponsors-logo-height: 4.5rem; Logo maximum height */
+  /* --mwnf-standalone-item-gap: 1.875rem;           Gap between the item sheet's three columns */
+  /* --mwnf-standalone-related-background: transparent;  Related Content column */
+  /* --mwnf-standalone-related-text: inherit;        Its text */
+  /* --mwnf-standalone-related-link: inherit;        Its links */
+  /* --mwnf-standalone-related-padding: 0 1.25rem 1.875rem;  Its padding */
+  /* --mwnf-standalone-related-heading-offset: 1.75rem;  Space above its heading */
+  /* --mwnf-standalone-related-thumb-size: 3.75rem;  Related record thumbnail size */
+  /* --mwnf-standalone-page-width: 42rem;            Text page column width */
+  /* --mwnf-standalone-page-inset: 16.666%;          Text page column inset */
+  /* --mwnf-standalone-page-padding: 1.25rem 1.875rem;  Text page padding (top, bottom) */
+  /* --mwnf-standalone-page-heading-size: 1.1875rem; Text page headings */
+  /* --mwnf-standalone-page-subheading-size: 1rem;   Text page subheadings */
+  /* --mwnf-standalone-drop-cap-size: 3.5em;         Drop cap size */
+  /* --mwnf-standalone-drop-cap-color: inherit;      Drop cap colour */
+  /* --mwnf-standalone-subnav-border: 1px solid currentColor;  Tab strip rule */
+  /* --mwnf-standalone-subnav-active-background: transparent;  Active tab */
+  /* --mwnf-standalone-subnav-active-text: inherit;  Active tab text */
+  /* --mwnf-standalone-tiles-columns: 5;             Tile grid columns */
+  /* --mwnf-standalone-tiles-caption-background: transparent;  Tile grid caption band */
+  /* --mwnf-standalone-tiles-caption-text: inherit;  Its text */
+  /* --mwnf-standalone-tiles-label-background: rgba(0, 0, 0, 0.5);  A tile's name band */
+  /* --mwnf-standalone-tiles-label-text: #ffffff;    A tile's name */
+  /* --mwnf-standalone-slider-count: 5;              Slides shown at once (set by the component) */
 }