@concordance-wiki/site 0.1.0

package/assets/css/chrome/panel-handle.css

@@ -0,0 +1,232 @@
+/* Side panels folded behind a handle: a tab of paper slid behind the edge of the panel, of which only the outer half shows, without a label or a border on the panel side. Folded to 44 px, the tree keeps its initials badge and its name written vertically, the right panel the headings of its blocks; the room goes to the wide content of the text, tables, figures and code, the prose keeping its measure. Under the desktop width the layout already folds the panels, so the handle exists from 1100 px only. */
+
+.panel-handle-track {
+  display: none;
+}
+
+@media (min-width: 68.75rem) {
+  /* The track sticks to the middle of the viewport along the panel: the handle always stands at the same place. It takes no room and lets the clicks through to the panel. */
+  .panel-handle-track {
+    position: sticky;
+    inset-block-start: calc(50vh - 1.25rem);
+    z-index: 1;
+    display: block;
+    block-size: 2.5rem;
+    margin-block-end: -2.5rem;
+    pointer-events: none;
+  }
+
+  .space,
+  .entity-side {
+    position: relative;
+  }
+
+  /* 26 px wide and as tall as every target of the theme, clipped to the 13 px that show beyond the edge, the room around them kept for the focus ring. */
+  .panel-handle {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: -0.8125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.625rem;
+    block-size: 2.5rem;
+    padding: 0 0 0 0.8125rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-soft);
+    color: var(--color-label);
+    font-size: 0.8125rem;
+    line-height: 1;
+    clip-path: inset(-0.375rem -0.375rem -0.375rem 0.8125rem);
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  /* Served hidden until its script wires it: no dead control shows without JavaScript. */
+  .panel-handle[hidden] {
+    display: none;
+  }
+
+  .panel-handle:hover {
+    color: var(--color-ink);
+  }
+
+  /* The glyph points the way the panel goes: towards it to fold, away from it to unfold. */
+  .panel-handle::before {
+    content: "‹" / "";
+  }
+
+  .panel-handle[aria-expanded="false"]::before,
+  .panel-handle-folded::before {
+    content: "›" / "";
+  }
+
+  /* On the right panel the tab shows beyond the start edge, its other half clipped, its glyph mirrored. */
+  .entity-side > .panel-handle-track > .panel-handle {
+    inset-inline-start: -0.8125rem;
+    inset-inline-end: auto;
+    padding: 0 0.8125rem 0 0;
+    clip-path: inset(-0.375rem 0.8125rem -0.375rem -0.375rem);
+  }
+
+  .entity-side > .panel-handle-track > .panel-handle::before {
+    content: "›" / "";
+  }
+
+  .entity-side > .panel-handle-track > .panel-handle[aria-expanded="false"]::before,
+  .entity-side > .panel-handle-track > .panel-handle-folded::before {
+    content: "‹" / "";
+  }
+
+  /* Read from right to left, the columns swap sides and so do the glyphs. */
+  [dir="rtl"] .panel-handle::before,
+  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle[aria-expanded="false"]::before,
+  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle-folded::before {
+    content: "›" / "";
+  }
+
+  [dir="rtl"] .panel-handle[aria-expanded="false"]::before,
+  [dir="rtl"] .panel-handle-folded::before,
+  [dir="rtl"] .entity-side > .panel-handle-track > .panel-handle::before {
+    content: "‹" / "";
+  }
+
+  /* The columns follow two lengths the folded states shorten; the open map keeps widening the panel unless it is folded. */
+  .entity {
+    --tree-column: 16rem;
+    --panel-column: 21.5rem;
+
+    grid-template-columns: minmax(0, 1fr) var(--panel-column);
+  }
+
+  .entity-with-space {
+    grid-template-columns: var(--tree-column) minmax(0, 1fr) var(--panel-column);
+  }
+
+  .entity:has(> .entity-side > .neighbourhood-fold[open]) {
+    --panel-column: 26.875rem;
+
+    grid-template-columns: minmax(0, 1fr) var(--panel-column);
+  }
+
+  .entity-with-space:has(> .entity-side > .neighbourhood-fold[open]) {
+    grid-template-columns: var(--tree-column) minmax(0, 1fr) var(--panel-column);
+  }
+
+  .category {
+    --tree-column: 16rem;
+
+    grid-template-columns: var(--tree-column) minmax(0, 1fr);
+  }
+
+  :root[data-panels~="tree"] .entity,
+  :root[data-panels~="tree"] .category,
+  .entity-tree-folded {
+    --tree-column: 2.75rem;
+  }
+
+  :root[data-panels~="panel"] .entity,
+  :root[data-panels~="panel"] .entity:has(> .entity-side > .neighbourhood-fold[open]),
+  .entity-panel-folded,
+  .entity-panel-folded:has(> .entity-side > .neighbourhood-fold[open]) {
+    --panel-column: 2.75rem;
+  }
+
+  /* The tree folded: the badge, then the name of the space written upwards, its pages gone. */
+  :root[data-panels~="tree"] .space > .space-head-link,
+  :root[data-panels~="tree"] .space > .space-tree > .space-head,
+  .entity-tree-folded > .space > .space-head-link,
+  .entity-tree-folded > .space > .space-tree > .space-head {
+    flex-direction: column;
+    gap: 0.625rem;
+    align-items: center;
+    min-block-size: 0;
+    padding: 0.8125rem 0;
+    border-block-end: 0;
+  }
+
+  :root[data-panels~="tree"] .space .space-name,
+  .entity-tree-folded > .space .space-name {
+    color: var(--color-label);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+
+  :root[data-panels~="tree"] .space > .space-tree > .space-nodes,
+  .entity-tree-folded > .space > .space-tree > .space-nodes {
+    display: none;
+  }
+
+  /* The right panel folded: the heading of every block written upwards with its count, the blocks themselves and the line of the map gone; the summaries hidden with their headings left in view, so that nothing folded takes the focus. */
+  :root[data-panels~="panel"] .entity-side > .panel-block,
+  .entity-panel-folded > .entity-side > .panel-block {
+    padding: 0;
+    border-block-end: 0;
+  }
+
+  :root[data-panels~="panel"] .entity-side .panel-fold > summary,
+  .entity-panel-folded > .entity-side .panel-fold > summary {
+    display: flex;
+    justify-content: center;
+    min-block-size: 0;
+    padding: 0.8125rem 0 0;
+    visibility: hidden;
+  }
+
+  :root[data-panels~="panel"] .entity-side .panel-fold > summary h2,
+  .entity-panel-folded > .entity-side .panel-fold > summary h2 {
+    letter-spacing: 0.08em;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    visibility: visible;
+  }
+
+  :root[data-panels~="panel"] .entity-side .panel-fold > summary .panel-count,
+  .entity-panel-folded > .entity-side .panel-fold > summary .panel-count {
+    display: inline-block;
+  }
+
+  :root[data-panels~="panel"] .entity-side .panel-fold::details-content,
+  .entity-panel-folded > .entity-side .panel-fold::details-content {
+    display: none;
+  }
+
+  :root[data-panels~="panel"] .entity-side > .neighbourhood-fold,
+  .entity-panel-folded > .entity-side > .neighbourhood-fold {
+    display: none;
+  }
+
+  /* The room a folded panel gives goes to the wide content: tables, figures, code and documents take the column, up to 1200 px; the prose keeps its measure. */
+  :root[data-panels~="tree"] .entity-with-space > .entity-main > *,
+  :root[data-panels~="panel"] .entity > .entity-main > *,
+  .entity-tree-folded > .entity-main > *,
+  .entity-panel-folded > .entity-main > * {
+    max-inline-size: 75rem;
+  }
+
+  :root[data-panels~="tree"]
+    .entity-with-space
+    > .entity-main
+    .entity-body
+    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
+  :root[data-panels~="panel"]
+    .entity
+    > .entity-main
+    .entity-body
+    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
+  .entity-tree-folded
+    > .entity-main
+    .entity-body
+    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6),
+  .entity-panel-folded
+    > .entity-main
+    .entity-body
+    :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
+    max-inline-size: 50rem;
+  }
+}

package/assets/css/chrome/panel.css

@@ -0,0 +1,92 @@
+/* The right panel: stacked blocks, never tabs; each one a disclosure whose summary is its heading. */
+
+.panel-block {
+  margin: 0;
+  padding: 0 var(--space-3);
+  border-block-end: 1px solid var(--color-border);
+}
+
+/* Every block is served folded; from the width where the panel has a column, the stylesheet keeps its content in view. */
+@media (min-width: 43.75rem) {
+  .panel-fold::details-content {
+    display: block;
+    content-visibility: visible;
+  }
+
+  .panel-fold > summary::before {
+    content: none;
+  }
+}
+
+.panel-fold > summary {
+  min-block-size: 3rem;
+  list-style: none;
+}
+
+.panel-fold > summary::before {
+  order: 1;
+  margin-inline-start: auto;
+}
+
+.panel-note,
+.related-note {
+  margin: var(--space-2) 0 var(--space-3);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+.attributes {
+  margin: 0;
+}
+
+.attribute {
+  display: flex;
+  gap: var(--space-3);
+  align-items: baseline;
+  padding-block: var(--space-2);
+  border-block-end: 1px solid var(--color-soft);
+  font-size: 0.8125rem;
+}
+
+.attributes dt {
+  flex: none;
+  inline-size: 6.75rem;
+  color: var(--color-label);
+}
+
+.attributes dd {
+  flex: 1;
+  margin: 0;
+  font-weight: 500;
+}
+
+.toc-list {
+  margin: 0 0 var(--space-3);
+  padding: 0;
+  list-style: none;
+  font-size: 0.8125rem;
+}
+
+.toc-list a {
+  display: flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding-inline-start: var(--space-2);
+  border-inline-start: 2px solid var(--color-border);
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+.toc-list a:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}
+
+/* The entry of the section being read: the accent on its rule and the ink, moved by the island as the reader scrolls. */
+
+.toc-list a[aria-current] {
+  border-inline-start-color: var(--color-accent);
+  color: var(--color-ink);
+  font-weight: 500;
+}

package/assets/css/chrome/pins.css

@@ -0,0 +1,321 @@
+/* Pinned pages: the island under the bar is served empty, so that the bar shows nothing until a reader has pinned a page; its script draws the row of pins as chips, the current page filled, the ones beyond the room of the bar behind a "+N" summary opening the full list. The button pinning the page stands after the title of the page, served hidden. */
+
+concordance-island[data-island="pins"]:empty {
+  display: none;
+}
+
+.pins {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.4375rem;
+  align-items: center;
+  min-block-size: 2.75rem;
+  padding: 0.125rem var(--space-4);
+  border-block-start: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.pins-label {
+  flex: none;
+  margin-inline-end: var(--space-1);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pins-list {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  gap: 0.4375rem;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  list-style: none;
+}
+
+/* A chip: the title as a link, the cross that removes it; the current page filled in the ink. */
+.pin {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding-inline: 0.6875rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: 1.25rem;
+  background: var(--color-surface);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.pin > a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.pin > a:hover {
+  text-decoration: underline;
+}
+
+/* The chips beyond the room of the bar, hidden by the script, take no room. */
+.pin[hidden],
+.pins-row[hidden] {
+  display: none;
+}
+
+.pin-current {
+  border-color: var(--color-ink);
+  background: var(--color-ink);
+  color: var(--color-surface);
+  font-weight: 600;
+}
+
+.pin-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.pin-current > .pin-remove {
+  color: var(--color-border);
+}
+
+.pin-remove:hover {
+  color: inherit;
+}
+
+/* The summary of the pins beyond the bar, "+N ▾", then the menu unfolded under it, right-aligned. */
+.pins-more {
+  position: relative;
+  flex: none;
+  margin: 0;
+}
+
+.pins-more-button {
+  display: inline-flex;
+  gap: 0.4375rem;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding-inline: 0.75rem;
+  border: 1px solid var(--color-ink);
+  border-radius: 1.25rem;
+  background: var(--color-soft);
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  list-style: none;
+  cursor: pointer;
+}
+
+.pins-more-button::before {
+  content: none;
+}
+
+.pins-more-mark {
+  color: var(--color-label);
+}
+
+.pins-count {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}
+
+.pins-menu {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: calc(100% + 0.375rem);
+  z-index: 3;
+  inline-size: min(22.5rem, calc(100vw - 2 * var(--space-4)));
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+  color: var(--color-ink);
+  font-weight: 400;
+}
+
+.pins-menu-head {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  margin: 0;
+  padding: 0.6875rem 0.875rem;
+  border-block-end: 1px solid var(--color-soft);
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.pins-menu-title {
+  flex: 1;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.pins-menu-count {
+  font-family: var(--font-mono);
+}
+
+/* The filter reads as a small field, the magnifier before it. */
+.pins-menu-filter {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  margin: 0.625rem 0.875rem;
+  padding-inline-start: 0.625rem;
+  border-radius: var(--radius);
+  background: var(--color-soft);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.pins-filter {
+  flex: 1;
+  min-inline-size: 0;
+  min-block-size: 2.5rem;
+  padding: 0 0.625rem 0 0;
+  border: 0;
+  background: none;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+}
+
+.pins-menu-list {
+  max-block-size: 50vh;
+  margin: 0;
+  padding: 0;
+  border-block-start: 1px solid var(--color-soft);
+  overflow-y: auto;
+  list-style: none;
+}
+
+/* A row of the menu: the title, the space of the page, the cross; the current page bold. */
+.pins-row {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding-inline-start: 0.875rem;
+  border-block-end: 1px solid var(--color-soft);
+  font-size: 0.8125rem;
+}
+
+.pins-row > a {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-inline-size: 0;
+  min-block-size: 2.5rem;
+  overflow: hidden;
+  color: var(--color-ink);
+  font-weight: 500;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pins-row > a:hover {
+  text-decoration: underline;
+}
+
+.pins-row-current > a {
+  font-weight: 600;
+}
+
+.pin-space {
+  flex: none;
+  color: var(--color-label);
+}
+
+.pins-menu-foot {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+  padding: 0.125rem 0.875rem;
+  background: var(--color-soft);
+}
+
+.pins-remove-all {
+  min-block-size: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-accent);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.pins-remove-all:hover {
+  text-decoration: underline;
+}
+
+/* The button of the page header stands after the title, a chip with the pin and one word, filled in the ink while the page is pinned. */
+.entity-header {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.875rem;
+  align-items: center;
+}
+
+.entity-header > .entity-badge {
+  flex-basis: 100%;
+}
+
+.pin-button {
+  display: inline-flex;
+  gap: 0.4375rem;
+  align-items: center;
+  min-block-size: 2.5rem;
+  margin-block-end: var(--space-2);
+  padding-inline: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 1.25rem;
+  background: var(--color-surface);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.pin-button[hidden] {
+  display: none;
+}
+
+.pin-button:hover {
+  background: var(--color-soft);
+}
+
+.pin-button[aria-pressed="true"],
+.pin-button-pinned {
+  border-color: var(--color-ink);
+  background: var(--color-ink);
+  color: var(--color-surface);
+}
+
+.pin-button-glyph {
+  display: inline-flex;
+}
+
+.pin-glyph {
+  display: block;
+}

package/assets/css/chrome/search-clear.css

@@ -0,0 +1,28 @@
+/* The button clearing a field, shown by the island while the field holds a query; in the header the shortcut hint yields to it. */
+.search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-inline-size: 2.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.search-clear[hidden] {
+  display: none;
+}
+
+.site-search-field:has(.search-clear:not([hidden])) .search-shortcut {
+  display: none;
+}
+
+.site-search input::-webkit-search-cancel-button,
+.home-search input::-webkit-search-cancel-button {
+  appearance: none;
+}