@cogenta/theme-canonical 1.1.2 → 1.3.3

package/src/styles/chrome.css

@@ -0,0 +1,469 @@
+/*
+ * The site header, its CSS-only menu, and the footer (`src/render/chrome.ts`).
+ */
+
+/* --------------------------------------------------------------------------
+   Header
+   -------------------------------------------------------------------------- */
+
+.cg-site-header {
+  position: relative;
+  padding-inline: var(--cg-inset);
+  background: var(--cg-canvas);
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+/* Padded rather than given a minimum height: the bar keeps its height when
+   the menu panel opens under it. */
+.cg-site-header__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: flex-start;
+  column-gap: var(--cg-s3);
+  padding-block: var(--cg-s3);
+}
+
+.cg-site-header__home {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.75rem;
+  margin-inline-end: auto;
+  color: var(--cg-ink);
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-heading);
+  line-height: var(--cg-leading-heading);
+  text-decoration: none;
+}
+
+.cg-site-header__home:hover {
+  color: var(--cg-ink);
+}
+
+/* The uploaded logo: a fixed height keeps the bar the same for a wide
+   wordmark and a square mark, and a maximum width stops a long wordmark from
+   pushing the pages off the row. */
+.cg-site-header__logo {
+  display: block;
+  block-size: 2rem;
+  inline-size: auto;
+  max-inline-size: 14rem;
+  object-fit: contain;
+  filter: none;
+}
+
+.cg-site-header__nav .cg-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-site-header__nav a {
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-medium);
+  text-decoration-line: none;
+}
+
+.cg-site-header__nav a:hover {
+  color: var(--cg-accent);
+  text-decoration-line: underline;
+}
+
+.cg-site-header__nav span {
+  color: var(--cg-ink-muted);
+  font-weight: var(--cg-weight-medium);
+}
+
+.cg-site-header__end {
+  display: flex;
+  align-items: center;
+  gap: var(--cg-s3);
+}
+
+.cg-site-header__action {
+  min-block-size: 2.5rem;
+  padding-inline: var(--cg-s4);
+  font-size: var(--cg-text-sm);
+}
+
+/* The light/dark control: an outlined square icon button, quieter than the
+   header's action so the two never compete. */
+.cg-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0;
+  border: var(--cg-rule) solid var(--cg-line);
+  border-radius: var(--cg-radius-control);
+  background: transparent;
+  color: var(--cg-ink);
+  cursor: pointer;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-theme-toggle:hover {
+  border-color: var(--cg-line-strong);
+  background: var(--cg-band);
+}
+
+.cg-theme-toggle__icon {
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+}
+
+.cg-theme-toggle__icon--moon {
+  display: none;
+}
+
+/* The icon shows the appearance in effect: a sun while light, a moon while
+   dark, from the same two signals the palette follows. */
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--sun {
+    display: none;
+  }
+
+  :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--moon {
+    display: block;
+  }
+}
+
+:where(:root[data-theme="dark"]) .cg-theme-toggle__icon--sun {
+  display: none;
+}
+
+:where(:root[data-theme="dark"]) .cg-theme-toggle__icon--moon {
+  display: block;
+}
+
+/* --- the menu below the wide breakpoint ----------------------------------- */
+
+/* Out of sight, still focusable: the label draws its focus ring instead. */
+.cg-nav-toggle {
+  position: absolute;
+  inset-block-start: var(--cg-s4);
+  inset-inline-end: var(--cg-inset);
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.cg-nav-toggle__label {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding-inline: var(--cg-s3);
+  border: var(--cg-rule) solid var(--cg-line);
+  border-radius: var(--cg-radius-control);
+  color: var(--cg-ink);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-semibold);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-nav-toggle__label:hover {
+  border-color: var(--cg-line-strong);
+}
+
+.cg-nav-toggle:focus-visible + .cg-nav-toggle__label {
+  outline: var(--cg-rule-strong) solid var(--cg-accent);
+  outline-offset: 3px;
+}
+
+.cg-nav-toggle:checked + .cg-nav-toggle__label {
+  border-color: var(--cg-ink);
+}
+
+.cg-site-header__nav {
+  display: none;
+  order: 3;
+  flex-basis: 100%;
+  margin-block-start: var(--cg-s3);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-nav-toggle:checked ~ .cg-site-header__nav {
+  display: block;
+}
+
+.cg-site-header__nav li + li {
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-site-header__nav li > a,
+.cg-site-header__nav li > span {
+  display: flex;
+  align-items: center;
+  min-block-size: 3.25rem;
+  font-size: var(--cg-text-lg);
+}
+
+.cg-site-header__end {
+  order: 2;
+}
+
+/* With a menu, the action waits at the foot of the panel on a phone. */
+.cg-site-header[data-nav="links"] .cg-site-header__end .cg-site-header__action {
+  display: none;
+}
+
+.cg-site-header__menu-action {
+  padding-block: var(--cg-s4) var(--cg-s6);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-site-header__menu-action .cg-action {
+  inline-size: 100%;
+}
+
+@media (min-width: 56rem) {
+  .cg-site-header__inner {
+    flex-wrap: nowrap;
+    column-gap: var(--cg-s8);
+    padding-block: var(--cg-s4);
+  }
+
+  .cg-nav-toggle,
+  .cg-nav-toggle__label {
+    display: none;
+  }
+
+  .cg-site-header__nav {
+    display: block;
+    order: 0;
+    flex-basis: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .cg-site-header__nav .cg-menu {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--cg-s6);
+  }
+
+  .cg-site-header__nav li + li {
+    border: 0;
+  }
+
+  .cg-site-header__nav li > a,
+  .cg-site-header__nav li > span {
+    min-block-size: 2.75rem;
+    font-size: var(--cg-text-md);
+  }
+
+  .cg-site-header__end {
+    order: 0;
+    gap: var(--cg-s4);
+  }
+
+  .cg-site-header[data-nav="links"] .cg-site-header__end .cg-site-header__action {
+    display: inline-flex;
+  }
+
+  .cg-site-header__menu-action {
+    display: none;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Footer
+   -------------------------------------------------------------------------- */
+
+.cg-site-footer {
+  padding-block: var(--cg-s16) var(--cg-s8);
+  padding-inline: var(--cg-inset);
+  background: var(--cg-footer);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-site-footer__inner {
+  display: grid;
+  grid-template-columns: repeat(var(--cg-columns), minmax(0, 1fr));
+  column-gap: var(--cg-column-gap);
+  row-gap: var(--cg-s12);
+}
+
+.cg-site-footer__inner > * {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+}
+
+.cg-site-footer__name {
+  color: var(--cg-ink);
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-heading);
+  line-height: var(--cg-leading-heading);
+}
+
+.cg-site-footer__tagline {
+  margin-block-start: var(--cg-s2);
+  max-inline-size: var(--cg-measure-narrow);
+  color: var(--cg-ink);
+  font-size: var(--cg-text-md);
+}
+
+.cg-site-footer__about {
+  margin-block-start: var(--cg-s6);
+}
+
+.cg-site-footer__note {
+  max-inline-size: var(--cg-measure-narrow);
+}
+
+.cg-site-footer__note + .cg-site-footer__note {
+  margin-block-start: var(--cg-s3);
+}
+
+.cg-site-footer__social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s2);
+  margin-block-start: var(--cg-s6);
+  padding: 0;
+  list-style: none;
+}
+
+.cg-site-footer__social-item a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  border: var(--cg-rule) solid var(--cg-line-strong);
+  border-radius: var(--cg-radius-control);
+  color: var(--cg-ink);
+  transition:
+    color var(--cg-duration) var(--cg-ease),
+    border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-site-footer__social-item a:hover {
+  border-color: var(--cg-ink);
+  color: var(--cg-accent);
+}
+
+.cg-social__icon {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+
+.cg-site-footer__nav {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--cg-s10) var(--cg-column-gap);
+}
+
+.cg-site-footer__heading {
+  margin-block-end: var(--cg-s3);
+  color: var(--cg-ink);
+  font-weight: var(--cg-weight-semibold);
+}
+
+.cg-site-footer__nav .cg-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-site-footer__nav li + li {
+  margin-block-start: var(--cg-s1);
+}
+
+.cg-site-footer__nav a,
+.cg-site-footer__nav span {
+  display: inline-block;
+  padding-block: var(--cg-s1);
+  color: var(--cg-ink);
+}
+
+.cg-site-footer__nav a {
+  text-decoration-line: none;
+}
+
+.cg-site-footer__nav a:hover {
+  color: var(--cg-accent);
+  text-decoration-line: underline;
+}
+
+.cg-site-footer__legal {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cg-s3) var(--cg-s8);
+  padding-block-start: var(--cg-s6);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-site-footer__copyright {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Cogenta's credit, or its white-label replacement, as the host sends it. */
+.cg-site-footer__branding {
+  display: flex;
+  align-items: center;
+}
+
+.cg-site-footer__branding a {
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
+  color: var(--cg-ink-muted);
+  text-decoration-line: none;
+}
+
+.cg-site-footer__branding a:hover {
+  color: var(--cg-ink);
+}
+
+.cg-site-footer__version {
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-site-footer__brand-logo {
+  display: block;
+  /* Pixels, not `em`: the footer's small text size would otherwise shrink
+     the mark below legibility. */
+  block-size: 24px;
+  inline-size: auto;
+  filter: none;
+}
+
+@media (min-width: 48rem) {
+  .cg-site-footer__identity {
+    grid-column: 1 / span 6;
+  }
+
+  .cg-site-footer__nav {
+    grid-column: 7 / -1;
+  }
+
+  .cg-site-footer__nav[data-columns="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cg-site-footer__legal {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-site-footer__identity {
+    grid-column: 1 / span 5;
+  }
+}

package/src/styles/listings.css

@@ -0,0 +1,183 @@
+/*
+ * Lists of entries: the `collectionList` block in its three layouts, and the
+ * index the term archive shares with it (`src/render/term-archive.ts`).
+ *
+ * The markup reads title, date, summary, picture; the paint shows the picture
+ * first, then the date, then the title (`order`), so a screen reader hears
+ * the title first and a sighted reader scans a list by its dates.
+ */
+
+.cg-collection__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-entry__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.cg-entry__media {
+  order: 0;
+  display: block;
+  margin-block-end: var(--cg-s5);
+}
+
+.cg-entry__image {
+  inline-size: 100%;
+  aspect-ratio: 3 / 2;
+}
+
+.cg-entry__date {
+  order: 1;
+  margin-block-end: var(--cg-s2);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-entry__title {
+  order: 2;
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-heading);
+}
+
+.cg-entry__link {
+  color: var(--cg-ink);
+  text-decoration-line: none;
+}
+
+.cg-entry__link:hover {
+  color: var(--cg-accent);
+  text-decoration-line: underline;
+}
+
+.cg-entry__excerpt {
+  order: 3;
+  margin-block-start: var(--cg-s3);
+  max-inline-size: var(--cg-measure);
+  color: var(--cg-ink-muted);
+}
+
+/* An empty list says so in a sentence on the reading columns, between
+   hairlines, rather than leaving a hole in the page. */
+.cg-collection__empty {
+  padding-block: var(--cg-s6);
+  border-block: var(--cg-rule) solid var(--cg-line);
+  color: var(--cg-ink-muted);
+}
+
+/* --- list: an index --------------------------------------------------------- */
+
+.cg-collection[data-layout="list"] .cg-entry {
+  padding-block: var(--cg-s6);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-collection[data-layout="list"] .cg-entry:last-child {
+  border-block-end: var(--cg-rule) solid var(--cg-line);
+}
+
+.cg-collection[data-layout="list"] .cg-entry__title {
+  font-size: var(--cg-text-heading);
+}
+
+@media (min-width: 48rem) {
+  .cg-collection[data-layout="list"] .cg-collection__items,
+  .cg-collection[data-layout="list"] .cg-entry,
+  .cg-collection[data-layout="list"] .cg-entry__body {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+  }
+
+  .cg-collection[data-layout="list"] .cg-entry__body {
+    align-items: baseline;
+  }
+
+  .cg-collection[data-layout="list"] .cg-entry__date {
+    grid-column: 1 / span 3;
+    grid-row: 1;
+    margin: 0;
+  }
+
+  .cg-collection[data-layout="list"] .cg-entry__title,
+  .cg-collection[data-layout="list"] .cg-entry__excerpt {
+    grid-column: 4 / span 7;
+  }
+
+  .cg-collection[data-layout="list"] .cg-entry__title {
+    grid-row: 1;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-collection__empty {
+    grid-column: 1 / span 8;
+  }
+}
+
+/* --- grid: columns of entries ---------------------------------------------- */
+
+.cg-collection[data-layout="grid"] .cg-collection__items {
+  display: grid;
+  grid-template-columns: subgrid;
+  row-gap: var(--cg-s12);
+}
+
+.cg-collection[data-layout="grid"] .cg-entry {
+  grid-column: span 12;
+}
+
+/* An entry without a picture opens on a rule, at the height a picture's top
+   edge would be. */
+.cg-collection:not([data-layout="list"]) .cg-entry[data-picture="false"] {
+  padding-block-start: var(--cg-s4);
+  border-block-start: var(--cg-rule) solid var(--cg-line);
+}
+
+@media (min-width: 40rem) {
+  .cg-collection[data-layout="grid"] .cg-entry {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-collection[data-layout="grid"] .cg-entry {
+    grid-column: span 4;
+  }
+
+  .cg-collection[data-layout="grid"] .cg-entry:first-child:nth-last-child(2),
+  .cg-collection[data-layout="grid"] .cg-entry:first-child:nth-last-child(2) ~ .cg-entry,
+  .cg-collection[data-layout="grid"] .cg-entry:first-child:nth-last-child(4),
+  .cg-collection[data-layout="grid"] .cg-entry:first-child:nth-last-child(4) ~ .cg-entry {
+    grid-column: span 6;
+  }
+}
+
+/* --- carousel: the grid as a row -------------------------------------------- */
+
+/* A little more than three entries across on a wide screen and a little more
+   than one on a phone: the one cut at the edge is what says the row scrolls. */
+.cg-collection[data-layout="carousel"] .cg-collection__items {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 78%;
+  gap: var(--cg-column-gap);
+}
+
+@media (min-width: 40rem) {
+  .cg-collection[data-layout="carousel"] .cg-collection__items {
+    grid-auto-columns: calc((100% - 2 * var(--cg-column-gap)) / 2.4);
+  }
+}
+
+@media (min-width: 64rem) {
+  .cg-collection[data-layout="carousel"] .cg-collection__items {
+    grid-auto-columns: calc((100% - 3 * var(--cg-column-gap)) / 3.4);
+  }
+}
+
+.cg-collection[data-layout="carousel"] .cg-entry {
+  scroll-snap-align: start;
+}

package/src/styles/theme.css

@@ -1,26 +1,40 @@
 /*
  * The canonical theme's stylesheet — the entry point, and nothing else.
  *
- * Three layers, in the only order that works:
+ *   tokens.css    the design system, derived entirely from the skin's
+ *                 `--cogenta-*` custom properties (contract D)
+ *   base.css      document, accessibility floor, the page frame and grid,
+ *                 page and entry titles, actions, block variants
+ *   chrome.css    the header, its CSS-only menu, and the footer
+ *   blocks.css    the vocabulary blocks
+ *   listings.css  lists of entries: the collection list and its index
+ *   archive.css   the taxonomy-term archive
+ *   utility.css   the search page, a public form, the comment thread
+ *   widgets.css   the widget areas: the sidebar of a reading page, the bands
+ *                 before and after the content, the footer's widget row
  *
- *   tokens.css  the design system, derived entirely from the skin's
- *               `--cogenta-*` custom properties (contract D)
- *   base.css    document, accessibility floor, page frame, actions
- *   blocks.css  the twelve vocabulary blocks
+ * Not one colour is written literally in any of them: every value comes from
+ * a `--cogenta-*` property or from a `--cg-*` property composed from those.
  *
- * Not one colour, font, radius, duration or shadow is written literally in any
- * of the three: every value comes from a `--cogenta-<group>-<name>` property
- * produced from the skin's tokens, or from a `--cg-*` property composed from
- * those. That is what makes changing skin a rewrite of one generated file with
- * no build (L3, "Skins et changement à chaud"). A single hard-coded hex would
- * be a colour no skin can change.
+ * The one thing this file adds on its own is the Google Fonts request for the
+ * two families the default skin names: Instrument Sans for everything a
+ * visitor reads, Instrument Serif for the display line of a page and for
+ * quotations. A skin only names a family; it never fetches one. A site whose
+ * skin names other families simply never uses these faces, and a browser does
+ * not download a face nothing uses. `display=swap` keeps text visible while
+ * they load, and `cogenta serve` hoists this `@import` above the skin's rules.
  *
- * `@import` is resolved at build time by Astro, and by `@cogenta/cli`'s own
- * inliner when `cogenta serve` renders without a build. Both flatten these
- * three into one sheet, so no visitor ever pays for three round trips.
+ * The relative `@import`s are flattened at build time by Astro, and by
+ * `@cogenta/cli`'s inliner when `cogenta serve` renders without a build.
  */
 
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap");
+
 @import "./tokens.css";
 @import "./base.css";
+@import "./chrome.css";
 @import "./blocks.css";
+@import "./listings.css";
 @import "./archive.css";
+@import "./utility.css";
+@import "./widgets.css";