@concordance-wiki/site 0.1.0

package/assets/css/pages/mentions.css

@@ -0,0 +1,267 @@
+/* Related pages: one entry per page that evokes the entity, most passages first. */
+
+.mentions .panel-fold > summary .count {
+  margin-inline-start: var(--space-2);
+}
+
+.mentions-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  margin-block-end: var(--space-2);
+  font-size: 0.8125rem;
+}
+
+.related-filter {
+  flex: 1 1 10rem;
+  display: flex;
+}
+
+.mentions-controls input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--color-soft);
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+}
+
+.mentions-controls input::placeholder {
+  color: var(--color-label);
+  opacity: 1;
+}
+
+.related-types {
+  position: relative;
+  flex: none;
+}
+
+.related-types > summary {
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.related-types > summary::before {
+  order: 1;
+}
+
+.related-types > summary .count {
+  background: var(--color-ink);
+  color: var(--color-surface);
+}
+
+.related-type-menu {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 100%;
+  z-index: 2;
+  min-inline-size: 14rem;
+  margin-block-start: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+}
+
+.related-type-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.related-type-list label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  padding: 0 var(--space-2);
+  border-block-end: 1px solid var(--color-soft);
+  cursor: pointer;
+}
+
+.related-type-list .count {
+  margin-inline-start: auto;
+}
+
+.related-type-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-soft);
+  color: var(--color-label);
+}
+
+.related-clear {
+  margin-inline-start: auto;
+  min-block-size: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  cursor: pointer;
+}
+
+.related-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.related-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-block: var(--space-2);
+  border-block-end: 1px solid var(--color-soft);
+}
+
+.related-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  min-inline-size: 0;
+}
+
+.related-title {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.related-title:hover {
+  text-decoration: underline;
+}
+
+.related-type,
+.related-count {
+  flex: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.related-count {
+  min-inline-size: 1.5em;
+  font-family: var(--font-mono);
+  text-align: end;
+}
+
+.related-excerpt {
+  display: block;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.related-excerpt:hover {
+  text-decoration: underline;
+}
+
+/* The mark of a page that writes a link to this one: a word in the accent, never the colour alone. */
+
+.related-mark {
+  color: var(--color-accent);
+}
+
+.mention-context {
+  quotes: none;
+}
+
+/* The words naming the entity: the same weight as a recognised word in the note, no colour of their own. */
+.mention-context mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 600;
+}
+
+.mentions-more {
+  margin: var(--space-2) 0 0;
+}
+
+.mentions-more button {
+  inline-size: 100%;
+  min-block-size: 2.5rem;
+  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;
+}
+
+.mentions-more button[disabled] {
+  cursor: progress;
+  color: var(--color-label);
+}
+
+.mentions-more a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  font-size: 0.8125rem;
+}
+
+/* The served pages beyond the six in view: a disclosure worded and drawn as the button that shows them, its line gone once opened; the island renders its button in its place. */
+
+.related-beyond > summary {
+  justify-content: center;
+  margin-block-start: var(--space-2);
+  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;
+}
+
+.related-beyond > summary::before {
+  content: none;
+}
+
+.related-beyond[open] > summary {
+  display: none;
+}
+
+/* Phone: two entries in view before the button; the others return once the reader asks for them, through the island or the disclosure. */
+
+@media (width < 43.75rem) {
+  .mentions-body:not(.related-expanded):not(:has(.related-beyond[open]))
+    > .related-list
+    > .related-page:nth-child(n + 3),
+  .mentions-body:not(.related-expanded):not(:has(.related-beyond[open])) > .related-others {
+    display: none;
+  }
+}
+
+/* Tablet: while the entries beyond three stay folded behind their count, the way to the others stays with them. */
+
+@media (43.75rem <= width < 68.75rem) {
+  .related-others:not([open]) ~ .related-beyond,
+  .related-others:not([open]) ~ .mentions-more {
+    display: none;
+  }
+}

package/assets/css/pages/neighbourhood-map.css

@@ -0,0 +1,100 @@
+.neighbourhood-map {
+  margin: 0 0 var(--space-3);
+}
+
+/* The map in a frame on the soft surface, the drawing centred in it at the scale its width allows. The font size is a presentation attribute of the SVG: the layout estimates label widths from it. */
+.neighbourhood-graph {
+  display: block;
+  inline-size: 100%;
+  block-size: 20.625rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-large);
+  background: var(--color-soft);
+  font-family: var(--font-ui);
+}
+
+.neighbourhood-graph .map-edge {
+  stroke: var(--color-border);
+  stroke-width: 1.6;
+}
+
+/* A neighbour is a small grey node; the page at the centre is drawn in the accent, it is the current position. */
+.neighbourhood-graph .map-shape {
+  fill: var(--color-label);
+}
+
+.neighbourhood-graph .map-centre .map-shape {
+  fill: var(--color-accent);
+  stroke: var(--color-soft);
+  stroke-width: 3;
+}
+
+/* A noteless word: a dashed, hollow square, its edge dashed too. */
+.neighbourhood-graph .map-node-keyword .map-shape {
+  fill: var(--color-soft);
+  stroke: var(--color-label);
+  stroke-width: 1.5;
+}
+
+/* The type glyph sits inside the node, drawn in the surface colour over the grey. */
+.neighbourhood-graph .map-glyph {
+  fill: var(--color-surface);
+}
+
+.neighbourhood-graph text.map-glyph {
+  font-size: 8px;
+  font-weight: 700;
+}
+
+/* A halo of the frame colour lets a label stay readable where an edge passes under it. */
+.neighbourhood-graph .map-label {
+  fill: var(--color-ink);
+  font-size: 11.5px;
+  font-weight: 500;
+  paint-order: stroke;
+  stroke: var(--color-soft);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+.neighbourhood-graph .map-centre .map-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Under the map, when the model holds more neighbours than it draws. */
+.neighbourhood-total {
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.neighbourhood-map figcaption {
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.neighbour {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: baseline;
+}
+
+/* A new priority group of neighbours, as ranked by the profile. */
+.neighbour.group-start {
+  margin-block-start: var(--space-2);
+  padding-block-start: var(--space-2);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.relation {
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+.weight {
+  margin-inline-start: auto;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}

package/assets/css/pages/neighbourhood-open.css

@@ -0,0 +1,262 @@
+/* Neighbourhood map, unfolded. Closed, the line of the fold reads its lead and the count of pages; open, it reads a back control, the title of the map and the name of the page. Where the panel has a column, the open map replaces the blocks of the panel and never the text; without any script the disclosure simply unfolds under them. */
+
+.neighbourhood-head,
+.neighbourhood-page,
+.neighbourhood-fold[open] > summary > .neighbourhood-lead,
+.neighbourhood-fold[open] > summary > .neighbourhood-count {
+  display: none;
+}
+
+.neighbourhood-fold[open] > summary > .neighbourhood-head {
+  display: inline;
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.neighbourhood-fold[open] > summary > .neighbourhood-page {
+  display: inline;
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-label);
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Open, the marker of the fold is the back control: a bordered square at the start of the line. */
+.neighbourhood-fold[open] > summary::before {
+  content: "◂" / "";
+  order: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2rem;
+  min-block-size: 2rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-soft);
+  color: var(--color-ink);
+}
+
+/* The summary of the fold carries the title: the heading of the section stays for assistive technology only. */
+.neighbourhood-fold .neighbourhood > h2 {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The controls: the distance the model records, the type filter at the end of the line. */
+.neighbourhood-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  margin-block-end: var(--space-3);
+  padding-block: var(--space-2);
+  border-block-end: 1px solid var(--color-soft);
+  font-size: 0.8125rem;
+}
+
+.neighbourhood-distance {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  color: var(--color-label);
+}
+
+.neighbourhood-hop {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2rem;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius);
+  background: var(--color-ink);
+  color: var(--color-surface);
+  font-weight: 600;
+}
+
+.neighbourhood-types {
+  margin-inline-start: auto;
+}
+
+.neighbourhood-type-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.neighbourhood-type {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  padding: 0 var(--space-2);
+  border-block-end: 1px solid var(--color-soft);
+}
+
+.neighbourhood-type > label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 2.5rem;
+  cursor: pointer;
+}
+
+.neighbourhood-type .count {
+  margin-inline-start: auto;
+}
+
+/* An unticked type hides its nodes, their edges and their rows: the checkbox and the elements share the rank of the type, so that the filter needs no script; twelve ranks, as the map holds twelve nodes at most. */
+.neighbourhood:has(.neighbourhood-type:nth-child(1) > input:not(:checked)) [data-type="1"],
+.neighbourhood:has(.neighbourhood-type:nth-child(2) > input:not(:checked)) [data-type="2"],
+.neighbourhood:has(.neighbourhood-type:nth-child(3) > input:not(:checked)) [data-type="3"],
+.neighbourhood:has(.neighbourhood-type:nth-child(4) > input:not(:checked)) [data-type="4"],
+.neighbourhood:has(.neighbourhood-type:nth-child(5) > input:not(:checked)) [data-type="5"],
+.neighbourhood:has(.neighbourhood-type:nth-child(6) > input:not(:checked)) [data-type="6"],
+.neighbourhood:has(.neighbourhood-type:nth-child(7) > input:not(:checked)) [data-type="7"],
+.neighbourhood:has(.neighbourhood-type:nth-child(8) > input:not(:checked)) [data-type="8"],
+.neighbourhood:has(.neighbourhood-type:nth-child(9) > input:not(:checked)) [data-type="9"],
+.neighbourhood:has(.neighbourhood-type:nth-child(10) > input:not(:checked)) [data-type="10"],
+.neighbourhood:has(.neighbourhood-type:nth-child(11) > input:not(:checked)) [data-type="11"],
+.neighbourhood:has(.neighbourhood-type:nth-child(12) > input:not(:checked)) [data-type="12"] {
+  display: none;
+}
+
+/* The framed map, no wider than the panel wherever the fold spans the page. */
+.neighbourhood-map {
+  max-inline-size: 28rem;
+  margin: 0 0 var(--space-2);
+}
+
+/* The legend under the map: a plain rule for a page that has a note, a dashed one for a word without one. */
+.neighbourhood-map figcaption {
+  margin-block-start: var(--space-2);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.map-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.map-legend-entity::before,
+.map-legend-keyword::before {
+  content: "";
+  display: inline-block;
+  inline-size: 1rem;
+  margin-inline-end: var(--space-1);
+  vertical-align: middle;
+  border-block-end: 1.6px solid var(--color-border);
+}
+
+.map-legend-keyword::before {
+  border-block-end-style: dashed;
+}
+
+/* The textual equivalent: its head, then one row per neighbour, a mark, the title, the type and the count. */
+.neighbourhood-list-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  margin: var(--space-3) 0 0;
+  padding-block-end: var(--space-1);
+  border-block-end: 1px solid var(--color-soft);
+}
+
+.neighbourhood-list-head > .section-label {
+  flex: 1;
+}
+
+.neighbourhood-equivalent {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.neighbour-list {
+  margin: 0;
+}
+
+/* A row per neighbour, opening on the accent mark: one step from the current position, the type saying what the node is. */
+.neighbour {
+  flex-wrap: nowrap;
+  min-block-size: 2.5rem;
+  padding-block: var(--space-1);
+  border-block-end: 1px solid var(--color-soft);
+}
+
+.neighbour::before {
+  content: "●" / "";
+  flex: none;
+  color: var(--color-accent);
+  font-size: 0.8125rem;
+}
+
+.neighbour > a {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.neighbour > a:hover {
+  text-decoration: underline;
+}
+
+/* The type as plain text, then the relation, both in the label tone: the lightest that stays readable at the smallest size of the theme. */
+.neighbour > .neighbour-type,
+.neighbour > .relation {
+  flex: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+.neighbour > .weight {
+  flex: none;
+  min-inline-size: 1.5em;
+  margin-inline-start: 0;
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  text-align: end;
+}
+
+.neighbourhood-note {
+  margin: var(--space-3) 0 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+/* Where the panel has a column, the open map takes it: the blocks of the panel go until the fold closes, and the column widens to hold the map, the text keeping its column. */
+@media (min-width: 68.75rem) {
+  .entity-side:has(> .neighbourhood-fold[open]) > .panel-block {
+    display: none;
+  }
+
+  .entity:has(> .entity-side > .neighbourhood-fold[open]) {
+    grid-template-columns: minmax(0, 1fr) 26.875rem;
+  }
+
+  .entity-with-space:has(> .entity-side > .neighbourhood-fold[open]) {
+    grid-template-columns: 16rem minmax(0, 1fr) 26.875rem;
+  }
+}

package/assets/css/pages/neighbourhood.css

@@ -0,0 +1,60 @@
+/* The neighbourhood, folded behind its line at the foot of the panel. */
+
+.neighbourhood-fold {
+  margin: 0;
+}
+
+.neighbourhood-fold > summary {
+  min-block-size: 3.25rem;
+  padding: 0 var(--space-3);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  list-style: none;
+}
+
+.neighbourhood-fold > summary::before {
+  order: 2;
+}
+
+/* The mark before the lead: the centre in the accent, its neighbours in the label tone, the edges in the border tone; gone once the line is the head of the map. */
+.neighbourhood-icon {
+  flex: none;
+  fill: var(--color-label);
+}
+
+.neighbourhood-icon-centre {
+  fill: var(--color-accent);
+}
+
+.neighbourhood-icon-edges {
+  fill: none;
+  stroke: var(--color-border);
+  stroke-width: 1.2;
+}
+
+.neighbourhood-fold[open] > summary > .neighbourhood-icon {
+  display: none;
+}
+
+.neighbourhood-lead {
+  flex: 1;
+}
+
+.neighbourhood-count {
+  color: var(--color-label);
+  font-weight: 400;
+}
+
+.neighbourhood {
+  padding: 0 var(--space-3) var(--space-3);
+}
+
+.neighbourhood h2 {
+  margin-block-start: 0;
+  font-size: 1rem;
+}
+
+.neighbour-list {
+  padding: 0;
+  list-style: none;
+}