@concordance-wiki/site 0.1.0

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

@@ -0,0 +1,67 @@
+/* Search island: the field, and the suggestions its script draws under it. */
+
+concordance-island[data-island="search"] {
+  position: relative;
+  flex: 1 1 16rem;
+  max-inline-size: 26rem;
+}
+
+.site-search {
+  margin: 0;
+}
+
+.site-search-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  padding-inline: var(--space-2);
+  border-radius: calc(var(--radius) * 1.125);
+  background: var(--color-soft);
+  color: var(--color-label);
+}
+
+.search-glyph {
+  flex: none;
+}
+
+.site-search input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-ink);
+  font-size: 0.875rem;
+}
+
+.site-search input::placeholder {
+  color: var(--color-label);
+  opacity: 1;
+}
+
+.search-shortcut {
+  flex: none;
+  padding: 0.25em 0.5em;
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.search-suggestions {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 100%;
+  z-index: 1;
+  min-inline-size: 100%;
+  max-block-size: 60vh;
+  overflow-y: auto;
+  margin-block-start: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-float);
+}

package/assets/css/chrome/space-tree.css

@@ -0,0 +1,106 @@
+/* The tree of the space: the initials badge and the name head it, folded behind them where the layout has no column. */
+
+.space-tree {
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.space-head {
+  min-block-size: 3.5rem;
+  padding: var(--space-2) var(--space-3);
+  font-size: 0.875rem;
+  font-weight: 600;
+  list-style: none;
+}
+
+/* In the column, the head is the link to the page of the space and the summary of the disclosure, kept for the drawer, gives way to it. */
+
+.space-head-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.space-head-link:hover .space-name {
+  text-decoration: underline;
+}
+
+.space-head-link + .space-tree > .space-head {
+  display: none;
+}
+
+/* The column carries the rule on its side, so that the head and the tree share it whatever their heights. */
+
+.space {
+  border-inline-end: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.space > .space-tree {
+  block-size: auto;
+  border-inline-end: 0;
+}
+
+.space-initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: calc(var(--radius) * 0.875);
+  background: var(--color-soft);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.space-nodes {
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-3);
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.space-nodes .space-nodes {
+  padding: 0 0 0 var(--space-3);
+}
+
+.space-folder-name,
+.space-page > a,
+.space-page > span {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  padding: var(--space-1) var(--space-2);
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+.space-folder-name .count {
+  margin-inline-start: auto;
+}
+
+.space-open > .space-folder-name {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+.space-page > a:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}
+
+/* The current page: a rule on its side and the bold weight, never a colour alone. */
+
+.space-current > span {
+  border-inline-start: 3px solid var(--color-accent);
+  border-radius: calc(var(--radius) * 0.875);
+  background: var(--color-soft);
+  color: var(--color-ink);
+  font-weight: 600;
+}

package/assets/css/chrome/suggestions.css

@@ -0,0 +1,100 @@
+/* The rows of the live results, under the field of the header and the field of the home page alike: the title, the detail line cut to the row, the space at the end; the first row on the soft colour. */
+
+.suggestions {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.suggestion > a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-block-size: 2.75rem;
+  padding: 0.75rem 1.125rem;
+  border-block-end: 1px solid var(--color-border);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.suggestion:first-child > a {
+  background: var(--color-soft);
+}
+
+.suggestion > a:hover,
+.suggestion > a:focus-visible {
+  background: var(--color-soft);
+}
+
+.suggestion-title {
+  flex: none;
+  font-size: 0.90625rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.suggestion-qualifier {
+  color: var(--color-label);
+  font-weight: 400;
+}
+
+.suggestion-detail {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suggestion-space {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.suggestion-keyword .suggestion-title {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2em;
+}
+
+.suggestions-help {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0;
+  padding: 0.625rem 1.125rem;
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.suggestions-help kbd {
+  padding: 0.25em 0.4em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.suggestions-all {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  margin-inline-start: auto;
+}
+
+/* The panel of the header keeps its width and its shadow; its rows read the same. */
+
+.search-suggestions {
+  padding: 0;
+}
+
+.suggestion:last-child > a {
+  border-block-end: none;
+}

package/assets/css/chrome/tabs.css

@@ -0,0 +1,85 @@
+/* Tabs: a row of tabs ruled underneath, with what the page adds at its end, over panels shown one at a time. */
+
+.tabs {
+  margin-block-start: var(--space-3);
+}
+
+.tabs-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  border-block-end: 1px solid var(--color-border);
+}
+
+.tabs-bar > concordance-island {
+  flex: none;
+  align-self: stretch;
+}
+
+.tabs-list {
+  display: flex;
+  flex-wrap: wrap;
+  block-size: 100%;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.75rem;
+  margin-block-end: -1px;
+  padding: 0 0.875rem;
+  border-block-end: 2px solid transparent;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.tab:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}
+
+/* What follows the tabs sits at the end of the row. */
+.tabs-bar > :not(concordance-island) {
+  margin-inline-start: auto;
+}
+
+/* One panel in view at a time, without any script: the targeted one, the one holding the targeted anchor, else the first; the tab of the panel shown marked by a rule and the bold weight, never by the colour alone. A browser without `:has()` shows the panels one under the other. Once the island runs it hides the panels itself and marks the selected tab. */
+@supports selector(:has(a)) {
+  .tabs:not(.tabs-scripted) .tabs-panel {
+    display: none;
+  }
+
+  .tabs:not(.tabs-scripted)
+    .tabs-panels:not(:has(.tabs-panel:target, .tabs-panel :target))
+    > .tabs-panel:first-child,
+  .tabs:not(.tabs-scripted) .tabs-panel:target,
+  .tabs:not(.tabs-scripted) .tabs-panel:has(:target) {
+    display: block;
+  }
+
+  .tabs:not(.tabs-scripted):not(:has(.tabs-panel:target, .tabs-panel :target)) .tab:nth-child(1),
+  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(1):target, .tabs-panel:nth-child(1) :target)
+    .tab:nth-child(1),
+  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(2):target, .tabs-panel:nth-child(2) :target)
+    .tab:nth-child(2),
+  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(3):target, .tabs-panel:nth-child(3) :target)
+    .tab:nth-child(3),
+  .tabs:not(.tabs-scripted):has(.tabs-panel:nth-child(4):target, .tabs-panel:nth-child(4) :target)
+    .tab:nth-child(4),
+  .tabs-scripted .tab[aria-selected="true"] {
+    border-block-end-color: var(--color-accent);
+    color: var(--color-ink);
+    font-weight: 600;
+  }
+}
+
+.tabs-panel[hidden] {
+  display: none;
+}
+
+.tabs-panel {
+  padding-block-start: var(--space-3);
+}

package/assets/css/controls.css

@@ -0,0 +1,30 @@
+/* Every control is a target of at least 40 px. */
+
+button,
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+summary {
+  min-block-size: 2.5rem;
+}
+
+summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary::before {
+  content: "▸" / "";
+  flex: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+details[open] > summary::before {
+  content: "▾" / "";
+}

package/assets/css/pages/about.css

@@ -0,0 +1,219 @@
+/* About page: the breadcrumb from the home page, the title and its sentence, the figures of the build, the sources with the version each was read at, what the site leaves out and how a page is corrected. */
+
+.about {
+  max-inline-size: 67.5rem;
+  margin-inline: auto;
+  padding: var(--space-3) var(--space-4) var(--space-5);
+}
+
+.about .breadcrumbs-list {
+  margin-inline: 0;
+}
+
+/* Two steps only: the first one carries no separator, whatever the width restores on the entity page. */
+
+.about .breadcrumbs-list > li:first-child::before {
+  content: none;
+}
+
+.about h1 {
+  margin-block: 0 0.625rem;
+  font-size: 2rem;
+  letter-spacing: -0.024em;
+}
+
+.about-lead {
+  max-inline-size: 46.25rem;
+  margin-block: 0 var(--space-4);
+  color: var(--color-muted);
+  font-size: 0.90625rem;
+  line-height: 1.7;
+}
+
+/* The figures: one card in as many cells, a label over a number. */
+
+.about-figures {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  margin-block: 0 var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.about-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3) 1.25rem;
+  border-inline-end: 1px solid var(--color-border);
+}
+
+.about-figure:last-child {
+  border-inline-end: 0;
+}
+
+.about-figure dt {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.about-figure dd {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* The sources: the heading with its sentence, then one table, the most cited first. */
+
+.about-sources {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.about-sources h2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.625rem;
+  margin: 0;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+}
+
+.about-sources-lead {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+.about-table {
+  inline-size: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  border-spacing: 0;
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.about-table th,
+.about-table td {
+  padding: 0.875rem var(--space-2);
+  border-block-end: 1px solid var(--color-border);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.about-table th:first-child,
+.about-table td:first-child {
+  padding-inline-start: 1.25rem;
+}
+
+.about-table th:last-child,
+.about-table td:last-child {
+  padding-inline-end: 1.25rem;
+}
+
+.about-table thead th {
+  padding-block: 0.6875rem;
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.about-table tbody tr:last-child > * {
+  border-block-end: 0;
+}
+
+.about-table .about-repository {
+  inline-size: 10.625rem;
+  font-size: 0.84375rem;
+  font-weight: 600;
+}
+
+.about-table .about-nature {
+  inline-size: 8.25rem;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.about-table .about-version {
+  inline-size: 6.5rem;
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}
+
+.about-table .about-content {
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}
+
+.about-table .about-date {
+  inline-size: 8.125rem;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  text-align: end;
+  white-space: nowrap;
+}
+
+/* A dormant source: its date in the accent, the only place where a colour carries an alert, and worded in days. */
+
+.about-row.stale .about-date {
+  color: var(--color-accent);
+}
+
+.about-note {
+  max-inline-size: 52.5rem;
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+/* What the site leaves out and how a page is corrected, side by side over a rule. */
+
+.about-closing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.125rem;
+  margin-block-start: 0.75rem;
+  padding-block: var(--space-3) 1.25rem;
+  border-block-start: 1px solid var(--color-border);
+}
+
+.about-closing p {
+  flex: 1;
+  min-inline-size: 18.75rem;
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+.about-closing b {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+/* Under the tablet width the table gives up its nature and version columns; each row keeps the repository, what was kept and the date. */
+
+@media (width < 43.75rem) {
+  .about-table .about-nature,
+  .about-table .about-version {
+    display: none;
+  }
+
+  .about-table .about-repository,
+  .about-table .about-date {
+    inline-size: auto;
+  }
+}