@mindful-web/marko-web-digital-edition 1.95.0

package/scss/index.scss

@@ -0,0 +1,679 @@
+// Digital edition reader (spike).
+//
+// Two views off one manifest: `read` (reflow) and `print` (replica page images).
+// Everything is fluid — the replica's ad hotspots are positioned in percentages so
+// they track the page image at every breakpoint with no JS.
+//
+// THEMING
+// Colours are tokens on `.edition`, redefined under `[data-edition-theme="dark"]`.
+// The attribute is set on <html> by an inline head script (components/edition/theme.marko)
+// so there is no flash of light before the reader paints; the same script stamps
+// `data-edition-view` so these rules can tell the views apart.
+//
+// The reflow view themes wholesale. The PRINT view does not: its pages are
+// facsimiles of paper, so dark mode there darkens only the canvas they float on
+// (--edition-canvas) and the chrome keeps the light treatment — PDF-reader behaviour.
+// Never give a colour its only definition inside the dark block.
+
+.edition {
+  --edition-bg: #ffffff;
+  --edition-fg: #16181a;
+  --edition-muted: #{rgba(#16181a, 0.62)};
+  --edition-faint: #{rgba(#16181a, 0.45)};
+  --edition-rule: #{rgba(#000, 0.1)};
+  --edition-surface: #ffffff;
+  --edition-pill-bg: #111111;
+  --edition-pill-fg: #ffffff;
+  --edition-shadow: #{rgba(#000, 0.15)};
+  --edition-ad-frame: #{rgba(#000, 0.1)};
+  --edition-link: #0b5ea8;
+  --edition-link-hover: #073f73;
+  --edition-page-placeholder: #f2f2f2;
+  --edition-max: 44rem;
+  // Replica canvas: what the page images float on. The one thing dark mode
+  // changes in the print view.
+  --edition-canvas: transparent;
+  --edition-canvas-fg: var(--edition-faint);
+  // The in-article ad breakout measures the reader's OWN width (container query
+  // units), not the viewport — the site theme decides how wide the wrapper is.
+  container-type: inline-size;
+
+  background: var(--edition-bg);
+  color: var(--edition-fg);
+}
+
+// Wholesale dark tokens — reflow only; the print view keeps its light chrome.
+:root[data-edition-theme="dark"]:not([data-edition-view="print"]) .edition {
+  --edition-bg: #14161a;
+  --edition-fg: #e6e8ea;
+  --edition-muted: #{rgba(#e6e8ea, 0.66)};
+  --edition-faint: #{rgba(#e6e8ea, 0.42)};
+  --edition-rule: #{rgba(#fff, 0.14)};
+  --edition-surface: #1b1e24;
+  --edition-pill-bg: #e6e8ea;
+  --edition-pill-fg: #14161a;
+  --edition-shadow: #{rgba(#000, 0.5)};
+  // Print ads are designed on white. A light frame keeps them from looking like
+  // holes punched in the page.
+  --edition-ad-frame: #{rgba(#fff, 0.22)};
+  --edition-link: #7fb8f2;
+  --edition-link-hover: #a9d0f7;
+  // Shows through before a page image loads; a light flash on dark is jarring.
+  --edition-page-placeholder: #2a2e35;
+}
+
+// Dark mode in the PRINT view: only the canvas around the pages darkens.
+:root[data-edition-theme="dark"] .edition {
+  --edition-canvas: #14161a;
+  --edition-canvas-fg: #{rgba(#e6e8ea, 0.5)};
+}
+
+// Paint the page gutters too, or the dark reader sits in a white window.
+// Not in the print view — there the window stays light around the dark canvas.
+:root[data-edition-theme="dark"]:not([data-edition-view="print"]) {
+  background: #14161a;
+
+  body { background: #14161a; }
+}
+
+// ---------------------------------------------------------------- toolbar
+.edition-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--edition-surface);
+  color: var(--edition-fg);
+  border-bottom: 1px solid var(--edition-rule);
+
+  &__title { display: flex; flex-direction: column; line-height: 1.2; }
+  &__pub { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; }
+  &__issue { font-size: 0.95rem; color: var(--edition-muted); }
+
+  &__actions { display: flex; align-items: center; gap: 0.75rem; }
+  &__views { display: flex; gap: 0.25rem; }
+
+  &__view {
+    padding: 0.35rem 0.85rem;
+    border: 1px solid var(--edition-rule);
+    border-radius: 999px;
+    font-size: 0.85rem;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s ease;
+
+    // The site sets a near-black `a:hover` colour globally, which is unreadable on
+    // the dark surface. Hover is signalled by brightening the border instead of
+    // recolouring the text — the text colour is pinned in every interactive state.
+    &:hover,
+    &:focus-visible {
+      color: inherit;
+      border-color: var(--edition-muted);
+      text-decoration: none;
+    }
+
+    &:focus-visible { outline: 2px solid var(--edition-muted); outline-offset: 2px; }
+
+    &.is-active {
+      background: var(--edition-pill-bg);
+      color: var(--edition-pill-fg);
+      border-color: var(--edition-pill-bg);
+
+      &:hover,
+      &:focus-visible {
+        color: var(--edition-pill-fg);
+        border-color: var(--edition-pill-bg);
+      }
+    }
+  }
+
+  &__theme {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.7rem;
+    background: transparent;
+    border: 1px solid var(--edition-rule);
+    border-radius: 999px;
+    color: inherit;
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+
+    &:hover { border-color: var(--edition-muted); }
+    &:focus-visible { outline: 2px solid var(--edition-muted); outline-offset: 2px; }
+
+    // One button, two labels — the script only flips a class, so there is no
+    // flash of the wrong label and no text measured on the client.
+    &__icon { font-size: 1rem; line-height: 1; }
+    &__label { white-space: nowrap; }
+  }
+}
+
+// Show the label matching the active theme.
+.edition-toolbar__theme [data-when="dark"] { display: none; }
+.edition-toolbar__theme [data-when="light"] { display: inline; }
+:root[data-edition-theme="dark"] .edition-toolbar__theme [data-when="dark"] { display: inline; }
+:root[data-edition-theme="dark"] .edition-toolbar__theme [data-when="light"] { display: none; }
+
+// ---------------------------------------------------------------- reflow
+.edition-reflow {
+  max-width: var(--edition-max);
+  margin: 0 auto;
+  padding: 1.5rem 1rem 4rem;
+
+  &__masthead {
+    display: flex;
+    gap: 1.25rem;
+    align-items: flex-end;
+    padding-bottom: 1.5rem;
+    border-bottom: 2px solid currentColor;
+  }
+
+  &__cover {
+    width: 8rem;
+    height: auto;
+    flex: 0 0 auto;
+    box-shadow: 0 2px 12px var(--edition-shadow);
+  }
+
+  &__pub { margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+  &__issue { margin: 0.15rem 0; font-size: 1.75rem; line-height: 1.1; }
+  &__count { margin: 0; font-size: 0.85rem; color: var(--edition-faint); }
+}
+
+.edition-toc {
+  margin: 2rem 0;
+
+  &__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--edition-muted); }
+  &__list { list-style: none; margin: 0; padding: 0; }
+  &__item + &__item { border-top: 1px solid var(--edition-rule); }
+
+  &__link {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.6rem 0;
+    text-decoration: none;
+    color: inherit;
+
+    // Pin the colour against the global `a:hover`; underline carries the affordance.
+    &:hover,
+    &:focus-visible { color: inherit; }
+
+    &:hover .edition-toc__headline,
+    &:focus-visible .edition-toc__headline { text-decoration: underline; }
+  }
+
+  &__page { flex: 0 0 auto; color: var(--edition-faint); font-variant-numeric: tabular-nums; }
+}
+
+.edition-article {
+  padding: 2.5rem 0;
+  border-top: 1px solid var(--edition-rule);
+
+  &__page { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--edition-faint); }
+  &__headline { margin: 0 0 0.5rem; font-size: 1.6rem; line-height: 1.2; }
+  &__deck { margin: 0 0 0.75rem; font-size: 1.05rem; color: var(--edition-muted); }
+  &__byline { margin: 0 0 1.25rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--edition-muted); }
+  &__also {
+    margin: 0 0 1.25rem;
+    font-size: 0.85rem;
+    color: var(--edition-muted);
+
+    a {
+      color: var(--edition-link);
+      text-decoration: underline;
+
+      // Explicit hover colour, or the global near-black `a:hover` wins in dark mode.
+      &:hover,
+      &:focus-visible { color: var(--edition-link-hover); }
+    }
+  }
+
+  &__lead {
+    margin: 0 0 1.5rem;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+      border-radius: 2px;
+    }
+  }
+
+  &__body {
+    font-size: 1.05rem;
+    line-height: 1.65;
+    // Contain the floated ads: a last-slot float must not spill into the credits
+    // or the next article's border rule.
+    display: flow-root;
+
+    p { margin: 0 0 1.1em; }
+
+    // Matched articles may render CMS bodies containing links.
+    a {
+      color: var(--edition-link);
+
+      &:hover,
+      &:focus-visible { color: var(--edition-link-hover); }
+    }
+  }
+
+  &__body--teaser {
+    position: relative;
+    max-height: 9rem;
+    overflow: hidden;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: auto 0 0;
+      height: 5rem;
+      pointer-events: none;
+      // Fades to the reader background in either theme.
+      background: linear-gradient(to bottom, transparent, var(--edition-bg));
+    }
+  }
+
+  // The gated block (teaser + link) is one click target: the whole faded band
+  // opens the sign-in gate, and the link is the visible cue. Kept small and muted
+  // so eighteen of them read as a convention, not a nag.
+  &__gated {
+    cursor: pointer;
+  }
+
+  &__continue {
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    margin-top: -1.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--edition-muted);
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--edition-fg);
+      text-decoration: underline;
+    }
+  }
+
+  &__continue-arrow {
+    display: inline-block;
+    margin-left: 0.3em;
+    transition: transform 0.15s;
+  }
+  &__gated:hover &__continue-arrow { transform: translateX(0.2em); }
+}
+
+// ---------------------------------------------------------------- ads
+.edition-ad {
+  position: relative;
+  margin: 2.5rem auto;
+  text-align: center;
+
+  &__label {
+    display: block;
+    margin-bottom: 0.4rem;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--edition-faint);
+  }
+
+  &__img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid var(--edition-ad-frame);
+  }
+
+  &__link { display: inline-block; text-decoration: none; }
+
+  &__advertiser {
+    display: block;
+    margin-top: 0.35rem;
+    font-size: 0.75rem;
+    color: var(--edition-faint);
+  }
+
+  // Showcase/advertorial listings are small directory-style units, not full pages.
+  &--advertorial .edition-ad__img { max-width: 22rem; }
+
+  // ---- floated in-article treatment -----------------------------------------
+  // The ad sits in the copy at the depth it held in print; the text wraps it, the
+  // way a fractional unit shares a page. Below 34rem there is no room to wrap a
+  // 1.05rem column, so it stays a normal centered block. Once the READER (not the
+  // viewport) is 12rem wider than the 44rem article column it breaks out to the
+  // right by however much free space the site's wrapper actually leaves beside
+  // the column (less a 2rem gutter, at most 13rem): AB's 1300px container gives
+  // the full 13rem, PMMI's ~1060px wrapper about 9rem — a fixed -13rem crossed
+  // PMMI's page-wrapper edge.
+  &--inline {
+    @media (min-width: 34rem) {
+      float: right;
+      clear: right;
+      width: 46%;
+      max-width: 19rem;
+      margin: 0.35rem 0 1.25rem 1.5rem;
+      text-align: right;
+    }
+
+    @media (min-width: 48rem) { width: 18rem; }
+
+    @container (min-width: 56rem) {
+      --edition-breakout: clamp(0rem, (100cqw - var(--edition-max)) / 2 - 2rem, 13rem);
+      width: calc(18rem + var(--edition-breakout) * 0.3);
+      max-width: none;
+      margin-right: calc(-1 * var(--edition-breakout));
+    }
+  }
+}
+
+// ---------------------------------------------------------------- replica
+.edition-replica {
+  padding: 1.5rem 1rem 4rem;
+  // The canvas the pages float on — transparent in light mode, dark in dark mode.
+  background: var(--edition-canvas);
+
+  &__pages {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  &__page { margin: 0; width: 100%; max-width: 62rem; }
+
+  // aspect-ratio comes from the manifest so layout space is reserved before load.
+  &__frame {
+    position: relative;
+    width: 100%;
+    background: var(--edition-page-placeholder);
+    box-shadow: 0 2px 16px var(--edition-shadow);
+  }
+
+  &__img { display: block; width: 100%; height: auto; }
+
+  // Transparent tap target over an identified ad region.
+  &__hotspot {
+    position: absolute;
+    display: block;
+    border: 2px solid transparent;
+    border-radius: 2px;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:hover,
+    &:focus-visible {
+      background: rgba(#ffd400, 0.18);
+      border-color: rgba(#ffd400, 0.9);
+      outline: none;
+    }
+  }
+
+  // Folio + preview note sit ON the canvas, so they follow it, not the chrome.
+  &__more {
+    margin: 0;
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.85rem;
+    color: var(--edition-canvas-fg);
+  }
+
+  &__folio {
+    padding-top: 0.5rem;
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--edition-canvas-fg);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+// ---------------------------------------------------------------- gate
+// The sign-in gate. Mirrors the content meter bar (fixed bottom, collapsible,
+// email field visible) but styled with the edition's own tokens so it follows the
+// reader's theme. The IdentityX login form inside is the same Vue component the
+// content meter and hard-gated articles use.
+.edition-gated {
+  // Room for the fixed bar so the teaser's last lines are never hidden under it.
+  padding-bottom: 14rem;
+}
+
+.edition-gate {
+  $self: &;
+  text-align: center;
+  color: var(--edition-fg);
+  background: var(--edition-surface);
+
+  &__panel {
+    max-width: 44rem;
+    margin: 0 auto;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.375rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  &__call-to-action {
+    margin: 0.5rem 0 0;
+    font-size: 1.0625rem;
+  }
+
+  &__site-name { font-style: italic; }
+
+  &__body {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+  }
+
+  // The login form: email + button on one row where there is room; the
+  // required-create-fields step (new users) stacks beneath it.
+  &__form {
+    width: 100%;
+    max-width: 40rem;
+
+    .form-group label { color: var(--edition-fg); }
+    form > .form-group:first-child label { display: none; }
+    form > .form-group:first-child input { max-width: 100%; }
+    fieldset {
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+      padding-bottom: 0.75rem;
+      .form-group { margin: 0.5rem 0 0; }
+    }
+    p { margin-bottom: 0; }
+
+    @media (min-width: 37.5rem) {
+      form:has(> :nth-child(-n+2):last-child) {
+        display: flex;
+        align-items: flex-end;
+        gap: 0.75rem;
+        .form-group { flex: 1 1 auto; margin-bottom: 0; }
+        .btn { white-space: nowrap; }
+      }
+    }
+  }
+
+  // --- fixed bottom bar (hub / continuous reader)
+  &--bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1501;
+    padding: 1rem 1rem 1.5rem;
+    max-height: 66vh;
+    overflow: auto;
+    border-top: 1px solid var(--edition-rule);
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
+
+    #{ $self }__toggle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      width: 100%;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      &:focus-visible { outline: 2px solid var(--edition-fg); outline-offset: 2px; }
+    }
+    #{ $self }__title--collapsed { display: none; }
+    #{ $self }__chevron {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: rotate(45deg);
+      transition: transform 0.2s;
+    }
+
+    &:not(#{ $self }--open) {
+      padding-bottom: 1rem;
+      #{ $self }__title--expanded,
+      #{ $self }__call-to-action,
+      #{ $self }__body { display: none; }
+      #{ $self }__title--collapsed { display: inline; }
+      #{ $self }__chevron { transform: rotate(-135deg); }
+    }
+  }
+
+  // --- inline (single article page)
+  &--inline {
+    margin: 1.5rem 0 2rem;
+    padding: 1.5rem 1rem;
+    border: 1px solid var(--edition-rule);
+    border-radius: 0.5rem;
+  }
+}
+
+// ---------------------------------------------------------------- article page
+.edition-article-page {
+  max-width: var(--edition-max);
+  margin: 0 auto;
+  padding: 1.5rem 1rem 4rem;
+
+  &__breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+    justify-content: space-between;
+    padding-bottom: 1rem;
+    font-size: 0.8rem;
+    border-bottom: 1px solid var(--edition-rule);
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      // Pinned against the site's global near-black `a:hover`.
+      &:hover,
+      &:focus-visible { color: inherit; text-decoration: underline; }
+    }
+  }
+
+  &__position { color: var(--edition-faint); font-variant-numeric: tabular-nums; }
+
+  // On its own page the article owns the column, so drop the divider rule the
+  // stacked reader needs.
+  .edition-article { border-top: 0; padding-top: 1.25rem; }
+}
+
+// ---------------------------------------------------------------- byline / credits
+.edition-article {
+  &__author { margin: 0 0 1.25rem; }
+
+  // `theme-author-node` takes its text colours from the monorail skin ($gray-800,
+  // #3f4043), which is blind to the reader's dark theme and unreadable on it.
+  // Re-point name + title at the edition tokens; hover keeps the skin's primary.
+  &__author .author-node__content-name,
+  &__author .author-node__content-name a,
+  &__author .author-node__content-title {
+    color: var(--edition-muted);
+  }
+
+  &__spread { color: var(--edition-faint); }
+
+  &__credits {
+    margin: 1.5rem 0 0;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--edition-rule);
+    font-size: 0.75rem;
+    color: var(--edition-faint);
+  }
+}
+
+// ---------------------------------------------------------------- pager
+.edition-pager {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+  margin: 2.5rem 0;
+
+  @media (min-width: 34rem) { grid-template-columns: 1fr 1fr; }
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.9rem 1rem;
+    border: 1px solid var(--edition-rule);
+    border-radius: 4px;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s ease;
+
+    &:hover,
+    &:focus-visible { color: inherit; border-color: var(--edition-muted); text-decoration: none; }
+    &:focus-visible { outline: 2px solid var(--edition-muted); outline-offset: 2px; }
+  }
+
+  // Keep "next" on the right even when there is no "previous".
+  &__link--next { grid-column: 2; text-align: right; }
+
+  @media (max-width: 33.99rem) {
+    &__link--next { grid-column: 1; text-align: left; }
+  }
+
+  &__dir { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--edition-faint); }
+  &__title { font-size: 0.95rem; line-height: 1.3; }
+}
+
+// ---------------------------------------------------------------- hub extras
+.edition-reflow {
+  &__more { margin: 3rem 0 0; }
+  &__more-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--edition-muted); }
+  &__more-list { list-style: none; margin: 0; padding: 0; }
+
+  &__more-link {
+    display: block;
+    padding: 0.6rem 0;
+    border-top: 1px solid var(--edition-rule);
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible { color: inherit; text-decoration: underline; }
+  }
+
+  &__sentinel { height: 1px; }
+}
+
+.edition-toc__link.is-current {
+  .edition-toc__headline { font-weight: 700; }
+}