@concordance-wiki/site 0.1.0

package/assets/css/chrome/contract-viewer.css

@@ -0,0 +1,84 @@
+/* Contract viewer of an API page; the block around it is styled with the API page at the end of the sheet. */
+
+.contract {
+  margin-block: var(--space-4);
+}
+
+.contract-summary,
+.contract-description {
+  color: var(--color-muted);
+}
+
+.contract-operation > button,
+.contract-schema-list button {
+  cursor: pointer;
+  color: var(--color-accent);
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  text-align: start;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.contract-data[aria-busy="true"] {
+  color: var(--color-muted);
+}
+
+.contract-operation-list,
+.contract-schema-list {
+  padding: 0;
+  list-style: none;
+}
+
+.contract-operation {
+  margin-block-end: var(--space-2);
+}
+
+.contract-operation-details {
+  padding-inline-start: var(--space-3);
+  border-inline-start: 2px solid var(--color-border);
+}
+
+.contract-schema-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-3);
+}
+
+.contract-schema-list button[aria-pressed="true"] {
+  color: var(--color-ink);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.contract-table {
+  inline-size: 100%;
+  margin-block: var(--space-2);
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.contract-table caption {
+  text-align: start;
+  font-weight: bold;
+}
+
+.contract-table th,
+.contract-table td {
+  padding: var(--space-1) var(--space-2);
+  border-block-end: 1px solid var(--color-border);
+  text-align: start;
+  vertical-align: top;
+}
+
+.contract-required {
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-style: italic;
+}
+
+.contract-empty {
+  color: var(--color-muted);
+}

package/assets/css/chrome/document.css

@@ -0,0 +1,125 @@
+/* Document: download links, the viewer opened on demand, the rail of positions, the extracted text */
+
+.document {
+  margin-block-start: var(--space-4);
+  padding-block-start: var(--space-3);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.document-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.document-open {
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 0.75);
+  background: var(--color-surface);
+  color: var(--color-ink);
+}
+
+.document-viewer {
+  margin-block: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  overflow: auto;
+}
+
+.viewer-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-block-end: 1px solid var(--color-border);
+}
+
+.viewer-toolbar button {
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 0.75);
+  background: var(--color-bg);
+  color: var(--color-ink);
+}
+
+.viewer-counter,
+.viewer-status {
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.viewer-page {
+  display: block;
+  max-inline-size: 100%;
+  margin: var(--space-2) auto;
+  background: white;
+}
+
+.document-rail ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding: 0;
+  list-style: none;
+}
+
+.document-rail a {
+  display: block;
+  min-inline-size: 8rem;
+  max-inline-size: 12rem;
+  min-block-size: 2.5rem;
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 0.75);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.document-rail a.current {
+  border-color: var(--color-ink);
+}
+
+.document-position {
+  display: block;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.document-caption {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-text details {
+  margin-block: var(--space-1);
+}
+
+.document-text summary {
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+/* A document folded under the note that leads its page: its line reads "Also available: deck.pptx · Presentation · 24 pages", the block opening on demand. */
+
+.document-fold {
+  margin-block-start: var(--space-4);
+  padding-block-start: var(--space-3);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.document-fold > summary {
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.document-fold > .document {
+  margin-block-start: 0;
+  padding-block-start: var(--space-2);
+  border-block-start: 0;
+}

package/assets/css/chrome/drawer.css

@@ -0,0 +1,210 @@
+/* Phone and tablet: the same page at three widths. The base layer is the phone's: the bar reduced to the drawer button, the name and the search button, the panel as folded blocks under the text; the tablet and the desktop add their columns. */
+
+/* The drawer button: the summary of the drawer, a 48 px bordered square drawn as ☰, as ✕ in the ink once open; its name is written for assistive technology. */
+
+.site-menu {
+  flex: none;
+  justify-content: center;
+  inline-size: 3rem;
+  min-block-size: 3rem;
+  margin-inline-start: calc(-1 * var(--space-2));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg);
+  list-style: none;
+}
+
+.site-menu::before {
+  content: "☰" / "";
+  color: var(--color-ink);
+  font-size: 1.25rem;
+}
+
+.site-drawer[open] > .site-menu {
+  border-color: var(--color-ink);
+  background: var(--color-ink);
+}
+
+.site-drawer[open] > .site-menu::before {
+  content: "✕" / "";
+  color: var(--color-bg);
+}
+
+/* The name takes the room between the buttons, cut with an ellipsis where it does not fit. */
+
+.site-title {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.site-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Closed, the drawer keeps the links and the mode switch; the bar shows the button, the name and the search button, a 40 px square drawing the magnifier alone, which unfolds the field under the bar. */
+
+.site-nav > concordance-island[data-island="mode-switch"] {
+  display: none;
+}
+
+.site-search-fold {
+  position: relative;
+  flex: none;
+}
+
+.site-search-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg);
+  color: var(--color-ink);
+  list-style: none;
+}
+
+.site-search-button::before {
+  content: none;
+}
+
+.site-search-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The drawer: the spaces with their initials and counts, the tree of the current space unfolded, the links, every entry a 48 px target. */
+
+.drawer-spaces-title,
+.drawer-space-list a,
+.drawer .site-links a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 3rem;
+  padding-inline: var(--space-2);
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.drawer-spaces-title {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.drawer-space-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.drawer-space-name {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+.drawer-space-list .count {
+  margin-inline-start: auto;
+}
+
+.drawer-space {
+  margin-block-start: var(--space-2);
+  padding-block-start: var(--space-2);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.drawer-space .space-tree {
+  border: 0;
+  background: transparent;
+}
+
+.drawer-space .space-head,
+.drawer-space .space-folder-name,
+.drawer-space .space-page > a,
+.drawer-space .space-page > span {
+  min-block-size: 3rem;
+}
+
+.drawer .site-links {
+  padding-block-start: var(--space-2);
+  border-block-start: 1px solid var(--color-border);
+}
+
+/* Open, the drawer takes the whole screen: the bar stays at the top with ✕ and the name, the search field comes first, then the spaces, the tree and the links, the mode switch at the foot. The drawer exists under the width where the bar has room for everything. */
+
+@media (width < 68.75rem) {
+  .site-header:has(.site-drawer[open]) {
+    position: fixed;
+    inset: 0;
+    z-index: 3;
+    overflow-y: auto;
+  }
+
+  body:has(.site-drawer[open]) {
+    overflow: hidden;
+  }
+
+  /* The summary and the content of the open drawer lay out as two items of the bar: the button in the first row, the content after the search field. */
+  .site-drawer[open],
+  .site-drawer[open]::details-content {
+    display: contents;
+  }
+
+  .drawer {
+    flex-basis: 100%;
+    order: 2;
+    padding-block-end: var(--space-4);
+  }
+
+  .site-drawer[open] ~ .site-search-fold {
+    display: block;
+    flex-basis: 100%;
+    order: 1;
+    margin-inline-start: 0;
+  }
+
+  .site-drawer[open] ~ .site-search-fold > .site-search-button {
+    display: none;
+  }
+
+  .site-drawer[open] ~ .site-search-fold::details-content {
+    display: block;
+    content-visibility: visible;
+  }
+
+  .site-drawer[open] ~ concordance-island[data-island="mode-switch"] {
+    display: block;
+    flex-basis: 100%;
+    order: 3;
+  }
+
+  /* The search button unfolds the field under itself, at the end of the bar, while the drawer is closed. */
+  .site-drawer:not([open]) ~ .site-search-fold[open] > concordance-island[data-island="search"] {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + var(--space-1));
+    z-index: 3;
+    inline-size: min(22rem, calc(100vw - 2 * var(--space-4)));
+    max-inline-size: none;
+    padding: var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-float);
+  }
+}

package/assets/css/chrome/footer.css

@@ -0,0 +1,102 @@
+/* Footer: a card at the width of the pages, in two columns, what the tool knows of the site then what the organisation declared, the second shown only when something was; under them the build line, in the monospace family on the soft surface, the to-do page with its count at its end. */
+
+.site-footer {
+  box-sizing: border-box;
+  max-inline-size: 72rem;
+  margin-inline: auto;
+  padding: var(--space-4) var(--space-4) var(--space-5);
+}
+
+.site-footer-card {
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.site-footer-columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4) 2.25rem;
+  padding: 1.25rem var(--space-4);
+}
+
+.site-footer-site {
+  flex: 1;
+  min-inline-size: 17.5rem;
+}
+
+.site-footer-declared {
+  flex: none;
+  min-inline-size: 13.75rem;
+}
+
+.site-footer-site,
+.site-footer-declared {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5625rem;
+}
+
+.site-footer-heading {
+  margin: 0;
+  color: var(--color-label);
+  font-family: var(--font-ui);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.site-footer-published,
+.site-footer-licence,
+.site-footer-text {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+.site-footer-published,
+.site-footer-text {
+  color: var(--color-muted);
+}
+
+.site-footer-licence {
+  color: var(--color-label);
+}
+
+.site-footer-links {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.site-footer-links a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.site-footer-card > .site-footer-build {
+  margin: 0;
+  padding: var(--space-1) var(--space-4);
+  border-block-start: 1px solid var(--color-border);
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* The to-do link ends the build line and keeps the target height of the other links. */
+
+.site-footer-todo {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+}

package/assets/css/chrome/grouped-files.css

@@ -0,0 +1,58 @@
+/* The files the build grouped into a page, at the foot of the properties block of every template: the line counting them and naming the criterion, one row per file with its kind, then the link to contest the grouping. */
+
+.grouped-files {
+  margin-block: var(--space-2) var(--space-3);
+}
+
+.grouped-files-lead {
+  margin: 0 0 var(--space-2);
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.grouped-files-list {
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  list-style: none;
+  overflow: hidden;
+}
+
+.grouped-files-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  min-block-size: 2.5rem;
+  padding: 0 0.6875rem;
+  border-block-end: 1px solid var(--color-soft);
+}
+
+.grouped-files-list li:last-child {
+  border-block-end: 0;
+}
+
+.grouped-file-name {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grouped-file-format {
+  flex: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.grouped-files-separate {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  font-size: 0.8125rem;
+}

package/assets/css/chrome/labels.css

@@ -0,0 +1,54 @@
+/* Components layer: one block per slot of the default theme. Text never under 13 px, targets of 40 px. */
+
+concordance-island {
+  display: block;
+}
+
+.count {
+  display: inline-block;
+  min-inline-size: 1.5em;
+  margin-inline-start: var(--space-1);
+  padding-inline: var(--space-1);
+  border-radius: 1em;
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  text-align: center;
+}
+
+/* The type of a page: a chip in the soft colour, read in the secondary text colour. */
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.625em;
+  border-radius: calc(var(--radius) * 0.625);
+  background: var(--color-soft);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+/* The chip that leads to the pages of its type keeps the chip colours, the underline on hover telling the link. */
+a.badge {
+  text-decoration: none;
+}
+
+a.badge:hover {
+  text-decoration: underline;
+}
+
+.empty {
+  color: var(--color-label);
+}
+
+/* A small capital label above a block of the panel. */
+.panel-block h2,
+.section-label {
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}

package/assets/css/chrome/links.css

@@ -0,0 +1,23 @@
+/* The links of the bar stand in the drawer, one under the other; the wide bar lays them in a row. */
+.site-links {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.site-links a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.site-links a:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}

package/assets/css/chrome/measure.css

@@ -0,0 +1,13 @@
+/* Every page but the entity page reads in one measured column. */
+
+.home,
+.index,
+.todo,
+.search-results,
+.redirect,
+.gallery,
+.gallery-panel {
+  max-inline-size: 72rem;
+  margin-inline: auto;
+  padding: var(--space-3) var(--space-4) var(--space-5);
+}

package/assets/css/chrome/mode-switch.css

@@ -0,0 +1,26 @@
+/* Mode switch: a square button drawing the glyph of the current scheme, served hidden and revealed by its script; its name and the scheme are written for assistive technology alone. */
+
+.mode-switch {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg);
+  color: var(--color-ink);
+  font-size: 0.875rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.mode-switch:hover {
+  background: var(--color-soft);
+}
+
+.mode-switch-glyph {
+  display: block;
+}