@concordance-wiki/site 0.1.0

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

@@ -0,0 +1,108 @@
+/* Screen page: the tables and the images of the repository in the note of any entity page, the legend of the two marks at the foot of the article next to the path. */
+
+/* A table of the note: a card whose header row reads in small capitals on the soft surface, the first column in the ink, the others in the secondary colour. */
+
+.markdown table {
+  margin: 0 0 var(--space-4);
+  border: 1px solid var(--color-border);
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.markdown th {
+  padding: 0.6875rem 0.9375rem;
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-soft);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.markdown td {
+  padding: 0.75rem 0.9375rem;
+  border-block-end: 1px solid var(--color-soft);
+  color: var(--color-muted);
+}
+
+.markdown td:first-child {
+  color: var(--color-ink);
+}
+
+.markdown tbody tr:last-child td {
+  border-block-end: 0;
+}
+
+.markdown thead th:first-child {
+  border-start-start-radius: calc(var(--radius) * 1.25 - 1px);
+}
+
+.markdown thead th:last-child {
+  border-start-end-radius: calc(var(--radius) * 1.25 - 1px);
+}
+
+.markdown tbody tr:last-child td:first-child {
+  border-end-start-radius: calc(var(--radius) * 1.25 - 1px);
+}
+
+.markdown tbody tr:last-child td:last-child {
+  border-end-end-radius: calc(var(--radius) * 1.25 - 1px);
+}
+
+/* An image of the repository, at its place in the flow of the text: the image in a dashed frame, its caption under it, then the note saying what it is and the path of the file in the monospace family. */
+
+.figure {
+  margin: 0 0 var(--space-4);
+  overflow: hidden;
+  border: 1px dashed var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+}
+
+.figure img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+}
+
+.figure figcaption {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4375rem;
+  padding: var(--space-3);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.figure-caption {
+  color: var(--color-muted);
+}
+
+.figure-path {
+  font-size: 0.8125rem;
+}
+
+/* The foot of the article: the legend of the two marks, then the path of the file at the end of the line with its edit link. */
+
+.entity-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-4);
+}
+
+.entity-footer .legend {
+  margin: 0;
+}
+
+.legend + .entity-source {
+  margin-inline-start: auto;
+}

package/assets/css/pages/search-results.css

@@ -0,0 +1,405 @@
+/* Search results: the facets in a full-height column on the left, the first row expanded and the others condensed as cards, the words without a note dotted. The heading of the page is kept for assistive technology alone: the query in the field names the page. */
+
+/* The island of the results page is the page itself: the measure the header gives the search island does not apply. */
+main > concordance-island[data-island="search"] {
+  max-inline-size: none;
+}
+
+/* The page spans the main landmark: the column of the facets stands against the left edge, under the bar. */
+.search-results {
+  max-inline-size: none;
+  margin: 0;
+  padding: 0;
+}
+
+.results-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+}
+
+.facets {
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.facets-head {
+  min-block-size: 3rem;
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  list-style: none;
+}
+
+.facet-groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: 0 var(--space-3) var(--space-3);
+}
+
+.facet > summary {
+  min-block-size: 2.5rem;
+  list-style: none;
+}
+
+.facet > summary::before {
+  order: 1;
+  margin-inline-start: auto;
+}
+
+.facet h2 {
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.facet-values {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A value: its box, its label covering the row, its count in the monospace family; a selected value is filled and bold, never a colour alone. */
+.facet-value {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-block-size: 2.5rem;
+}
+
+.facet-value input {
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  appearance: none;
+  cursor: pointer;
+}
+
+.facet-value input[type="radio"] {
+  border-radius: 50%;
+}
+
+.facet-value input:checked {
+  border-color: var(--color-ink);
+  background: var(--color-ink);
+}
+
+.facet-value input[disabled] {
+  cursor: default;
+}
+
+.facet-value label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-block-size: 2.5rem;
+  color: var(--color-muted);
+  font-size: 0.84375rem;
+  cursor: pointer;
+}
+
+.facet-value label .count {
+  margin-inline-start: auto;
+  padding: 0;
+  background: transparent;
+}
+
+.facet-active label {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+.facet-disabled label {
+  color: var(--color-label);
+  cursor: default;
+}
+
+/* The words without a note: a dashed box, like their rows. */
+.facet-keyword input {
+  border-style: dashed;
+}
+
+.facets-note {
+  margin: auto 0 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* The facets take a 250 px column from 700 px, as tall as the page; under it they fold behind their heading above the results. */
+@media (min-width: 43.75rem) {
+  .results-layout {
+    grid-template-columns: 15.625rem minmax(0, 1fr);
+    min-block-size: calc(100vh - 3.5rem);
+  }
+
+  .facets {
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--color-border);
+  }
+
+  .facets-fold::details-content {
+    display: block;
+    content-visibility: visible;
+  }
+
+  /* The heading that folds the column is kept for assistive technology where the column stands open. */
+  .facets-head {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .facets-head::before {
+    content: none;
+  }
+
+  /* The column is as tall as the page, so that the note on the counters sits at its foot. */
+  .facets-fold,
+  .facets-fold::details-content {
+    block-size: 100%;
+  }
+
+  .facet-groups {
+    box-sizing: border-box;
+    min-block-size: 100%;
+    padding: 1.5rem 1.125rem;
+  }
+}
+
+/* The results in their region, the active filters as chips then the summary on one line above them. */
+.results-main {
+  min-inline-size: 0;
+  padding: 1.625rem 2rem;
+}
+
+.results-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) 0.625rem;
+  margin-block-end: var(--space-3);
+}
+
+.active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.remove-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  padding-inline: 0.8125rem;
+  border-radius: 1.25rem;
+  background: var(--color-ink);
+  color: var(--color-surface);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.remove-filter:hover {
+  text-decoration: underline;
+}
+
+.clear-filters a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  font-size: 0.8125rem;
+}
+
+.search-summary {
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.search-closest {
+  color: var(--color-muted);
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A condensed row: the chip, the title and the count on one line, the summary cut to the next. */
+.result {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: 1.0625rem 1.375rem;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+}
+
+.result-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  margin: 0;
+}
+
+.result-title {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-ink);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-title:hover {
+  text-decoration: underline;
+}
+
+.result-cited {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.result-cited-count {
+  font-family: var(--font-mono);
+}
+
+.snippet {
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.90625rem;
+  line-height: 1.7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The first row, expanded: the title larger, the whole summary, then the line of facts. */
+.result-lead {
+  gap: 0.5625rem;
+  padding: 1.25rem 1.375rem;
+}
+
+.result-lead .result-head {
+  flex-wrap: wrap;
+}
+
+.result-lead .result-title {
+  overflow: visible;
+  font-size: 1.1875rem;
+  white-space: normal;
+}
+
+.result-lead .snippet {
+  overflow: visible;
+  color: var(--color-ink);
+  font-size: 0.9375rem;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.result-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) 0.875rem;
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.result-facts > span + span::before {
+  content: "·" / "";
+  margin-inline-end: 0.875rem;
+}
+
+.breadcrumb {
+  display: block;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+/* A word without a note: outlined in dashes, its chip too, its title dotted, like its square on the map; its notice on the same line as the title. */
+.result-keyword {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.875rem;
+  border-style: dashed;
+}
+
+.result-keyword .badge {
+  border: 1px dashed var(--color-border);
+  background: var(--color-bg);
+}
+
+.result-keyword .result-title {
+  overflow: visible;
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2em;
+  white-space: normal;
+}
+
+.result-subtitle,
+.result-detail {
+  display: block;
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+/* The button drawing the next rows in place, under the rows drawn so far. */
+.results-more {
+  inline-size: 100%;
+  min-block-size: 2.5rem;
+  margin-block-start: 0.75rem;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-soft);
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.results-note {
+  margin: var(--space-3) 0 0;
+  padding-block-start: 0.875rem;
+  border-block-start: 1px solid var(--color-border);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}