@cogenta/theme-magazine 1.1.3 → 1.3.4

package/src/styles/widgets.css

@@ -0,0 +1,614 @@
+/* --------------------------------------------------------------------------
+   Widgets (contract D `theme@1.6`): the rail beside a story, a section front
+   or search results, the bands before and after the content, and the footer
+   columns under the colophon's name.
+
+   The host draws one markup for every theme (`cg-sidebar-layout`); this file
+   only sets it in this theme's register: the page's own edges and gutters, a
+   rail of labels on heavy rules, headlines in the display face, and no box
+   anywhere but the one subscription pitch, which takes the editorial red.
+   -------------------------------------------------------------------------- */
+
+/* --- the layout ------------------------------------------------------------ */
+
+.cg-sidebar-layout {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--cg-s12);
+  inline-size: 100%;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
+  margin-inline: auto;
+  padding-inline: var(--cg-gutter);
+}
+
+@media (min-width: 64rem) {
+  .cg-sidebar-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
+    column-gap: calc(var(--cg-col-gap) * 2.5);
+  }
+
+  /* The content column is narrower than a page: text moves to its left edge
+     and takes more of its columns, so a story beside a rail still reads at a
+     full measure. */
+  .cg-sidebar-layout__content {
+    --cg-col-reading: 1 / span 9;
+    --cg-col-headline: 1 / span 11;
+    --cg-col-hang: 1 / span 9;
+    --cg-col-wide: 1 / -1;
+  }
+}
+
+.cg-sidebar-layout__content {
+  min-inline-size: 0;
+}
+
+/* Inside the content column the layout already holds the gutters. */
+.cg-sidebar-layout__content :is(.cg-container, .cg-comments, .cg-form, .cg-form__confirmation),
+.cg-sidebar-layout__content
+  > :is(
+    .cg-page__title,
+    .cg-search__form,
+    .cg-search__results,
+    .cg-search__empty,
+    .cg-search__error
+  ) {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+.cg-sidebar-layout__content > .cg-page__title::after {
+  inset-inline: 0;
+}
+
+.cg-sidebar-layout__aside {
+  align-self: start;
+  padding-block: calc(var(--cg-section) / 2);
+}
+
+@media (max-width: 63.99rem) {
+  .cg-sidebar-layout__aside {
+    padding-block-start: 0;
+  }
+}
+
+/* A band the host places outside the layout (the home page, a page opening on
+   its own hero): on the page's columns, never edge to edge. */
+.cg-widget-area--placed {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cg-page) + var(--cg-gutter) * 2);
+  margin-inline: auto;
+  padding: calc(var(--cg-section) / 2) var(--cg-gutter);
+}
+
+.cg-sidebar-layout__content .cg-widget-area--placed {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+.cg-widget-area--placed[data-area="sidebar"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
+  column-gap: var(--cg-col-gap);
+  border: 0;
+}
+
+/* --- a widget ---------------------------------------------------------------- */
+
+.cg-widget-area {
+  display: grid;
+  gap: var(--cg-s10);
+  align-content: start;
+}
+
+.cg-widget {
+  min-inline-size: 0;
+  color: var(--cg-ink);
+}
+
+.cg-widget__title {
+  margin: 0 0 var(--cg-s4);
+  padding-block-start: var(--cg-s3);
+  border-block-start: var(--cg-rule-heavy) solid var(--cg-line-ink);
+  color: var(--cg-ink);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-label);
+  font-weight: var(--cg-weight-bold);
+  line-height: 1.2;
+  letter-spacing: var(--cg-tracking-caps);
+  text-transform: uppercase;
+}
+
+.cg-widget__body {
+  font-family: var(--cg-font-text);
+  font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-snug);
+}
+
+.cg-widget__body :is(ul, ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-widget__body p {
+  margin: 0 0 var(--cg-s3);
+}
+
+.cg-widget__body p:last-child {
+  margin-block-end: 0;
+}
+
+.cg-widget a {
+  color: var(--cg-ink);
+  text-decoration-line: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: var(--cg-rule);
+  text-underline-offset: 0.14em;
+  transition: text-decoration-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-widget a:hover {
+  color: var(--cg-ink);
+  text-decoration-color: var(--cg-accent);
+}
+
+.cg-widget__empty {
+  color: var(--cg-ink-muted);
+}
+
+/* --- lists: stories, sections, archives, comments, links ---------------------- */
+
+.cg-widget__entry,
+.cg-widget__comment,
+:is(.cg-widget__terms, .cg-widget__archives, .cg-widget__links, .cg-widget__toc) > li {
+  padding-block: var(--cg-s3);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+  border-block-end: 0;
+}
+
+.cg-widget__entry:first-child,
+.cg-widget__comment:first-child,
+:is(.cg-widget__terms, .cg-widget__archives, .cg-widget__links, .cg-widget__toc) > li:first-child {
+  padding-block-start: 0;
+  border-block-start: 0;
+}
+
+.cg-widget__entry {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--cg-s4);
+  align-items: start;
+}
+
+.cg-widget__entry[data-image="image"] {
+  grid-template-columns: minmax(0, 1fr) 4.5rem;
+}
+
+.cg-widget__entry-image {
+  grid-column: 2;
+  grid-row: 1;
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: 1;
+  object-fit: cover;
+  filter: brightness(var(--cg-image-brightness));
+}
+
+.cg-widget__entry-text {
+  display: grid;
+  gap: var(--cg-s1);
+  grid-row: 1;
+}
+
+.cg-widget__entry-title,
+.cg-widget__comment-entry {
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-md);
+  font-weight: var(--cg-weight-semibold);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: balance;
+}
+
+.cg-widget__entry-excerpt,
+.cg-widget__comment-excerpt {
+  margin: 0;
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__entry-date,
+.cg-widget__comment-date,
+:is(.cg-widget__terms, .cg-widget__archives) [class$="-count"],
+.cg-widget__cloud-count {
+  color: var(--cg-ink-muted);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-xs);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+:is(.cg-widget__terms, .cg-widget__archives) > li,
+.cg-widget__terms li {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--cg-s2) var(--cg-s4);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__terms ul {
+  flex-basis: 100%;
+  padding-inline-start: var(--cg-s4);
+}
+
+.cg-widget__toc-item[data-depth="1"] {
+  padding-inline-start: var(--cg-s4);
+}
+
+.cg-widget__toc-item[data-depth="2"] {
+  padding-inline-start: var(--cg-s8);
+}
+
+.cg-widget__links,
+.cg-widget__toc {
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget [aria-current="page"] {
+  color: var(--cg-accent);
+}
+
+.cg-widget__cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s2) var(--cg-s4);
+  font-family: var(--cg-font-ui);
+  font-weight: var(--cg-weight-semibold);
+}
+
+.cg-widget__cloud-item[data-weight="1"] {
+  font-size: var(--cg-text-xs);
+}
+.cg-widget__cloud-item[data-weight="2"] {
+  font-size: var(--cg-text-sm);
+}
+.cg-widget__cloud-item[data-weight="3"] {
+  font-size: var(--cg-text-md);
+}
+.cg-widget__cloud-item[data-weight="4"] {
+  font-size: var(--cg-text-lg);
+}
+.cg-widget__cloud-item[data-weight="5"] {
+  font-size: var(--cg-text-xl);
+}
+
+/* --- search, a jump menu, a form: fields are a baseline ------------------------ */
+
+.cg-widget__search,
+.cg-widget__jump {
+  display: flex;
+  align-items: end;
+  gap: var(--cg-s3);
+}
+
+.cg-widget__search-input,
+.cg-widget__jump select,
+.cg-widget__form :is(input:not([type="checkbox"]), select, textarea) {
+  box-sizing: border-box;
+  flex: 1;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 44px;
+  padding: var(--cg-s2) 0;
+  border: 0;
+  border-block-end: var(--cg-rule) solid var(--cg-line-strong);
+  border-radius: 0;
+  background: transparent;
+  color: var(--cg-ink);
+  font-family: var(--cg-font-text);
+  font-size: var(--cg-text-md);
+}
+
+.cg-widget__form textarea {
+  padding: var(--cg-s3);
+  border: var(--cg-rule) solid var(--cg-line-strong);
+  border-radius: var(--cg-radius);
+}
+
+.cg-widget__search-input:focus-visible,
+.cg-widget__jump select:focus-visible,
+.cg-widget__form :is(input, select, textarea):focus-visible {
+  outline: none;
+  border-color: var(--cg-ink);
+  box-shadow: inset 0 calc(var(--cg-rule) * -1) 0 var(--cg-ink);
+}
+
+.cg-widget__search-button,
+.cg-widget__jump-button,
+.cg-widget__form-submit,
+.cg-widget__cta-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 44px;
+  padding: var(--cg-s2) var(--cg-s5);
+  border: var(--cg-rule) solid var(--cg-action);
+  border-radius: var(--cg-radius-control);
+  background: var(--cg-action);
+  color: var(--cg-action-fg);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-semibold);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-widget a.cg-widget__cta-action {
+  color: var(--cg-action-fg);
+  text-decoration: none;
+}
+
+:is(
+  .cg-widget__search-button,
+  .cg-widget__jump-button,
+  .cg-widget__form-submit,
+  .cg-widget__cta-action
+):hover {
+  background: var(--cg-action-hover);
+  border-color: var(--cg-action-hover);
+  color: var(--cg-action-hover-fg);
+}
+
+.cg-widget__form {
+  display: grid;
+  gap: var(--cg-s4);
+}
+
+.cg-widget__form label {
+  display: block;
+  color: var(--cg-ink-muted);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-label);
+  font-weight: var(--cg-weight-bold);
+  letter-spacing: var(--cg-tracking-caps);
+  text-transform: uppercase;
+}
+
+/* --- words and pictures ---------------------------------------------------------- */
+
+.cg-widget__figure,
+.cg-widget__embed,
+.cg-widget__quote {
+  margin: 0;
+}
+
+:is(.cg-widget__image, .cg-widget__about-image, .cg-widget__gallery-image) {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  filter: brightness(var(--cg-image-brightness));
+}
+
+.cg-widget__caption {
+  margin-block-start: var(--cg-s2);
+  color: var(--cg-ink-muted);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-xs);
+}
+
+.cg-widget__frame {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+}
+
+.cg-widget__gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--cg-s2);
+}
+
+.cg-widget__gallery[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cg-widget__gallery[data-columns="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cg-widget__quote-text {
+  margin: 0;
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-medium);
+  line-height: var(--cg-leading-heading);
+}
+
+.cg-widget__quote-source {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s2);
+  margin-block-start: var(--cg-s3);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-xs);
+}
+
+.cg-widget__quote-name {
+  font-weight: var(--cg-weight-bold);
+}
+
+.cg-widget__quote-role {
+  color: var(--cg-ink-muted);
+}
+
+.cg-widget__about,
+.cg-widget__cta {
+  display: grid;
+  gap: var(--cg-s3);
+  justify-items: start;
+}
+
+.cg-widget__about-heading,
+.cg-widget__cta-heading {
+  margin: 0;
+  font-family: var(--cg-font-display);
+  font-size: var(--cg-text-xl);
+  font-weight: var(--cg-weight-bold);
+  line-height: var(--cg-leading-heading);
+  letter-spacing: var(--cg-tracking-heading);
+  text-wrap: balance;
+}
+
+.cg-widget__about-body,
+.cg-widget__cta-body {
+  margin: 0;
+  color: var(--cg-ink-muted);
+}
+
+/* The subscription pitch is the one widget on a rule of editorial red. */
+.cg-widget--cta {
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule-heavy) solid var(--cg-accent);
+}
+
+.cg-widget--cta .cg-widget__title {
+  padding-block-start: 0;
+  border-block-start: 0;
+}
+
+.cg-widget__contact {
+  display: grid;
+  gap: var(--cg-s2);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
+}
+
+.cg-widget__contact-line {
+  display: flex;
+  gap: var(--cg-s2);
+  align-items: start;
+  margin: 0;
+}
+
+.cg-widget__icon {
+  flex: none;
+  margin-block-start: 0.2em;
+}
+
+.cg-widget__hours {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--cg-s1) var(--cg-s4);
+  margin: var(--cg-s3) 0 0;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__hours dd {
+  margin: 0;
+}
+
+.cg-widget__social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s3) var(--cg-s5);
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-ui);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-widget__calendar-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-xs);
+  font-variant-numeric: lining-nums tabular-nums;
+  text-align: center;
+}
+
+.cg-widget__calendar-table caption {
+  padding-block-end: var(--cg-s2);
+  font-weight: var(--cg-weight-bold);
+  text-align: start;
+}
+
+.cg-widget__calendar-table :is(th, td) {
+  padding-block: var(--cg-s1);
+}
+
+.cg-widget__calendar-table td[data-posts] a {
+  color: var(--cg-accent);
+  font-weight: var(--cg-weight-bold);
+}
+
+.cg-widget__calendar-nav {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--cg-s3) 0 0;
+  font-family: var(--cg-font-ui);
+  font-size: var(--cg-text-xs);
+}
+
+/* --- under a story: the next stories as a strip ------------------------------------ */
+
+@media (min-width: 48rem) {
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entries {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    column-gap: var(--cg-col-gap);
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"]) .cg-widget__entry {
+    position: relative;
+    padding-block-start: 0;
+    border-block-start: 0;
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry
+    + .cg-widget__entry::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--cg-col-gap) / -2);
+    inline-size: var(--cg-rule);
+    background: var(--cg-line);
+  }
+
+  .cg-widget-area:is([data-area="content-after"], [data-area="content-before"])
+    .cg-widget__entry-title {
+    font-size: var(--cg-size-brief);
+  }
+}
+
+/* --- the colophon's widget columns ------------------------------------------------- */
+
+.cg-colophon__widgets {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: var(--cg-s8) var(--cg-col-gap);
+  padding-block: var(--cg-s6) var(--cg-s8);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-colophon__widgets .cg-widget,
+.cg-colophon__widgets .cg-widget a {
+  color: var(--cg-ink-muted);
+}
+
+.cg-colophon__widgets .cg-widget__title {
+  padding-block-start: 0;
+  border-block-start: 0;
+}
+
+.cg-colophon__widgets .cg-widget a:hover {
+  color: var(--cg-ink);
+}

package/tokens.json

@@ -1,36 +1,36 @@
 {
   "color": {
-    "bg": "#F7F1E6",
-    "fg": "#211A12",
-    "accent": "#A2361F",
-    "accentFg": "#FFFBF2",
-    "muted": "#ECE2CF",
-    "mutedFg": "#574A3C",
-    "border": "#D8CBB0"
+    "bg": "#ffffff",
+    "fg": "#151412",
+    "accent": "#b3121c",
+    "accentFg": "#ffffff",
+    "muted": "#f2f0eb",
+    "mutedFg": "#4a4843",
+    "border": "#d8d5ce"
   },
   "font": {
-    "sans": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-    "serif": "'Fraunces', Georgia, Cambria, 'Times New Roman', Times, serif",
-    "mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    "sans": "'Libre Franklin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+    "serif": "'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', serif",
+    "mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
     "scale": 1.25,
-    "baseSize": "1rem"
+    "baseSize": "1.0625rem"
   },
   "space": {
     "unit": "0.25rem",
     "density": "comfortable"
   },
   "radius": {
-    "sm": "0.125rem",
-    "md": "0.25rem",
-    "lg": "0.375rem"
+    "sm": "0rem",
+    "md": "0.125rem",
+    "lg": "0.1875rem"
   },
   "motion": {
-    "duration": "200ms",
-    "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "duration": "140ms",
+    "easing": "cubic-bezier(0.2, 0, 0, 1)",
     "reduced": true
   },
   "shadow": {
-    "sm": "0 1px 2px rgba(33, 26, 18, 0.12)",
-    "md": "0 8px 28px rgba(33, 26, 18, 0.16)"
+    "sm": "0 1px 0 rgba(21, 20, 18, 0.06)",
+    "md": "0 8px 24px rgba(21, 20, 18, 0.1)"
   }
 }