@concordance-wiki/site 0.1.0

package/assets/css/pages/api-page.css

@@ -0,0 +1,200 @@
+/* API page: the operations table matched to the contract, then the contract block; the panel cut to five keys. */
+
+.api-operations {
+  margin-block: var(--space-4);
+}
+
+.api-operations h2,
+.contract h2 {
+  margin-block: var(--space-4) var(--space-2);
+}
+
+.api-lead {
+  margin: 0 0 var(--space-3);
+  color: var(--color-label);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+/* One row per operation on the surface, ruled in the soft colour; the radius is on the table, so the borders stay on the cells. */
+
+.api-table {
+  inline-size: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.api-table td {
+  padding: var(--space-2) var(--space-3);
+  border-block-end: 1px solid var(--color-soft);
+  vertical-align: middle;
+}
+
+.api-table tr:last-child > td {
+  border-block-end: 0;
+}
+
+/* Three narrow cells around the title: the method as a chip in the monospace family, every method drawn in the same width, the path and the callers. */
+
+.api-cell-method,
+.api-cell-path,
+.api-cell-callers {
+  inline-size: 1%;
+  white-space: nowrap;
+}
+
+.api-cell-path > code {
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.api-method {
+  display: inline-block;
+  min-inline-size: 3.25rem;
+  padding: 0.3125em 0.4375em;
+  border-radius: calc(var(--radius) * 0.5);
+  background: var(--color-soft);
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-align: center;
+}
+
+.api-method > abbr {
+  text-decoration: none;
+}
+
+/* Without a method, a dashed hollow chip: the note declares none, the contract knows nothing. */
+
+.api-method-none {
+  border: 1px dashed var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-label);
+}
+
+.api-operation {
+  font-weight: 600;
+}
+
+a.api-operation {
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+a.api-operation:hover {
+  text-decoration: underline;
+}
+
+.api-cell-callers {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  text-align: end;
+}
+
+/* A gap between the contract and the notes reads in italics on the soft surface, never by a colour alone. */
+
+.api-gap > td {
+  background: var(--color-soft);
+  font-style: italic;
+}
+
+.api-gap .api-operation {
+  font-weight: 500;
+}
+
+.api-gap-without-page .api-operation {
+  color: var(--color-muted);
+}
+
+.api-gap-note {
+  color: var(--color-muted);
+}
+
+/* The contract block of the API page: the meta line on the soft surface with the date at its end, the viewer open under it, the download link at the foot. */
+
+.contract-card {
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.contract-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) 0.75rem;
+  align-items: baseline;
+  margin: 0;
+  padding: 0.6875rem 0.9375rem;
+  border-block-end: 1px solid var(--color-soft);
+  background: var(--color-bg);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.contract-format {
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.contract-file {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.contract-imported {
+  margin-inline-start: auto;
+  color: var(--color-label);
+}
+
+/* The viewer takes the body of the card as soon as its script runs; until then, and without it, the link to the JSON view stands centred in the zone the board reserves. */
+
+.contract-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: center;
+  min-block-size: 8.5rem;
+  padding: var(--space-3) 0.9375rem;
+  justify-content: center;
+  text-align: center;
+}
+
+.contract-body > concordance-island {
+  inline-size: 100%;
+}
+
+.contract-body .contract-data {
+  margin: 0;
+}
+
+.contract-body .contract-viewer {
+  text-align: start;
+}
+
+.contract-body .contract-viewer > h3 {
+  margin-block: var(--space-2);
+  font-size: 0.875rem;
+}
+
+.contract-note {
+  max-inline-size: 28rem;
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+.contract-foot {
+  margin: 0;
+  padding: var(--space-2) 0.9375rem;
+  border-block-start: 1px solid var(--color-soft);
+  font-size: 0.8125rem;
+}

package/assets/css/pages/category-list.css

@@ -0,0 +1,349 @@
+/* Category list: the list of a folder at the top of a space. The tree of the space on the left, as on the entity page; the breadcrumb, the title and its lead, the two selectors on the same line, the table in a card, the counts and the note under it. Nothing under 13 px and no target under 40 px, where the reference frame goes lower. */
+
+.category {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "space"
+    "main";
+}
+
+.category > .space {
+  display: none;
+}
+
+.category-main {
+  display: grid;
+  grid-area: main;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "crumbs"
+    "header"
+    "toolbar"
+    "card"
+    "foot"
+    "pages";
+  align-items: end;
+  column-gap: var(--space-3);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--space-3) var(--space-3) var(--space-5);
+}
+
+/* The island stands between the header and the card without breaking the grid. */
+.category-main > concordance-island {
+  display: contents;
+}
+
+.category-main > .breadcrumbs {
+  grid-area: crumbs;
+  margin-block-end: var(--space-2);
+}
+
+.category-header {
+  grid-area: header;
+  margin-block-end: var(--space-3);
+}
+
+.category-header h1 {
+  margin-block: 0 0.4375rem;
+  font-size: 1.875rem;
+  letter-spacing: -0.024em;
+}
+
+.category-lead {
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+/* The selectors: two chips, each a disclosure reading what is selected, its choices in a menu under it. */
+
+.category-toolbar {
+  display: flex;
+  flex: none;
+  gap: var(--space-2);
+  grid-area: toolbar;
+  margin-block-end: var(--space-3);
+}
+
+.category-select {
+  position: relative;
+}
+
+.category-select > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  min-block-size: 2.5rem;
+  padding: 0 var(--space-2) 0 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+/* The mark of the selector stays a ▾ whether it is open or not: the base marker gives way to it. */
+.category-select > summary::before {
+  content: none;
+}
+
+.category-select-mark {
+  color: var(--color-label);
+}
+
+.category-choices {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 100%;
+  z-index: 2;
+  min-inline-size: 12rem;
+  margin: var(--space-1) 0 0;
+  padding: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-float);
+  list-style: none;
+}
+
+.category-choices a,
+.category-choices button,
+.category-choices span {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-block-size: 2.5rem;
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: calc(var(--radius) * 0.75);
+  background: none;
+  color: var(--color-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.category-choices a:hover,
+.category-choices button:hover {
+  background: var(--color-soft);
+  color: var(--color-ink);
+}
+
+/* The choice selected: bold and ticked, so that the mark does not rest on colour. */
+.category-choices [aria-current],
+.category-choices [aria-pressed="true"] {
+  color: var(--color-ink);
+  font-weight: 600;
+  cursor: default;
+}
+
+.category-choices [aria-current]::after,
+.category-choices [aria-pressed="true"]::after {
+  content: "✓";
+  margin-inline-start: auto;
+}
+
+/* The table in its card: uppercase labels on the soft surface, one row per page, its columns fixed; the links column is wider than the frame draws it so that its label fits at 13 px. */
+
+.category-card {
+  grid-area: card;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  overflow-x: auto;
+}
+
+.category-table {
+  inline-size: 100%;
+  min-inline-size: 40rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.category-table th,
+.category-table td {
+  padding: 0.875rem 0 0.875rem var(--space-3);
+  border-block-end: 1px solid var(--color-border);
+  vertical-align: baseline;
+  text-align: start;
+}
+
+.category-table th:first-child,
+.category-table td:first-child {
+  padding-inline-start: 1.25rem;
+}
+
+.category-table th:last-child,
+.category-table td:last-child {
+  padding-inline-end: 1.25rem;
+}
+
+.category-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;
+  white-space: nowrap;
+}
+
+.category-table tbody tr:last-child th,
+.category-table tbody tr:last-child td {
+  border-block-end: 0;
+}
+
+.category-table .category-title {
+  inline-size: 14.375rem;
+}
+
+.category-table .category-value {
+  inline-size: 7.375rem;
+}
+
+.category-table .category-links {
+  inline-size: 3.5rem;
+  text-align: end;
+}
+
+.category-table tbody .category-title {
+  font-size: 0.90625rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.category-table tbody .category-title a {
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.category-table tbody .category-title a:hover {
+  text-decoration: underline;
+}
+
+.category-table tbody .category-value {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.category-table tbody .category-value a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.category-table tbody .category-value a:hover {
+  text-decoration: underline;
+}
+
+.category-table tbody .category-summary {
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.84375rem;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.category-table tbody .category-links {
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+/* Under the card: how many rows the page shows of the whole and the note on the links column, one paragraph; the page links after it. */
+
+.category-foot {
+  grid-area: foot;
+  margin: 0;
+  padding: 0.875rem 0 1.125rem;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.category-pages {
+  grid-area: pages;
+}
+
+.category-pages ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.category-pages a,
+.category-pages button,
+.category-pages span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.category-pages [aria-current="page"] {
+  border-color: var(--color-ink);
+  color: var(--color-ink);
+  font-weight: 600;
+  cursor: default;
+}
+
+.category-pages a:hover,
+.category-pages button:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}
+
+/* The tablet: the selectors stand on the line of the lead, at its end. */
+
+@media (min-width: 43.75rem) {
+  .category-main {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "crumbs crumbs"
+      "header toolbar"
+      "card card"
+      "foot foot"
+      "pages pages";
+  }
+}
+
+/* The desktop: the tree returns to its column and the list reads in a measured column beside it. */
+
+@media (min-width: 68.75rem) {
+  .category {
+    grid-template-columns: 16rem minmax(0, 1fr);
+    grid-template-areas: "space main";
+  }
+
+  .category > .space {
+    display: block;
+  }
+
+  .category-main {
+    max-inline-size: 58.75rem;
+    justify-self: center;
+    padding: 1.875rem 2.25rem var(--space-5);
+  }
+}

package/assets/css/pages/decision-page.css

@@ -0,0 +1,43 @@
+/* Decision page: one chip reading the type and the status, the identifier and the day of the decision on the line under the title, the callout of the session after the text, the properties of the decision. */
+
+/* The chip: the type, which keeps its link to the pages of the type, the separator and the status in lowercase, read in the words of the site. */
+
+.decision-chip {
+  font-size: 0.8125rem;
+}
+
+.decision-type {
+  color: inherit;
+  text-decoration: none;
+}
+
+.decision-type:hover {
+  text-decoration: underline;
+}
+
+.decision-status {
+  text-transform: lowercase;
+}
+
+.decision-id {
+  font-size: 0.8125rem;
+}
+
+/* The callout of a session: the surface colour framed by a rule, the accent on its start side as the notice of a keyword page, its words saying what it points at; the link to the minutes reads as every link and leads to the cue that names the decision. */
+
+.decision-session {
+  margin-block: var(--space-4) 0;
+  padding: 0.8125rem 1.0625rem;
+  border: 1px solid var(--color-border);
+  border-inline-start: 3px solid var(--color-accent);
+  border-start-end-radius: calc(var(--radius) * 1.25);
+  border-end-end-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  color: var(--color-muted);
+  font-size: 0.90625rem;
+  line-height: 1.7;
+}
+
+.decision-properties dd time {
+  font-weight: 500;
+}