@concordance-wiki/site 0.1.0

package/assets/css/pages/entity-article.css

@@ -0,0 +1,140 @@
+/* Title, then the line naming the type, the last change and the space. */
+
+.entity-header h1 {
+  margin-block: 0 var(--space-2);
+}
+
+.entity-badge {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-3);
+  align-items: center;
+  margin: 0;
+  padding-block-end: var(--space-3);
+  border-block-end: 1px solid var(--color-border);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.entity-badge > * + *::before {
+  content: "·" / "";
+  margin-inline-end: var(--space-3);
+}
+
+.entity-badge > .badge + *::before {
+  content: none;
+}
+
+/* The space on the line reads as the rest of the line, the underline on hover telling the link to its page. */
+
+a.entity-space {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.entity-space:hover {
+  text-decoration: underline;
+}
+
+.entity-body {
+  margin-block-start: var(--space-4);
+  font-size: 1.0625rem;
+  line-height: 1.75;
+}
+
+.entity-body > section > h2:first-child {
+  margin-block-start: var(--space-4);
+}
+
+/* The three marks of the text, one per degree of curation: a link someone wrote, solid in the
+   accent; a recognised word whose entity has a note, dotted in the accent; a recognised
+   expression that has a keyword page and no note, dashed in the label grey, never the accent.
+   The dots and dashes never carry the information alone: the anchor's title and hidden text do. */
+
+.markdown .written {
+  color: var(--color-accent);
+}
+
+.markdown .recognised,
+.markdown .recognised-keyword {
+  color: var(--color-ink);
+  text-decoration-style: dotted;
+  text-decoration-color: var(--color-accent);
+  text-underline-offset: 0.2em;
+}
+
+.markdown .recognised-keyword {
+  text-decoration-style: dashed;
+  text-decoration-color: var(--color-label);
+}
+
+.markdown img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-block-start: var(--space-4);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.legend-written::before,
+.legend-recognised::before,
+.legend-keyword::before {
+  content: "";
+  display: inline-block;
+  inline-size: 1.25em;
+  margin-inline-end: var(--space-1);
+  border-block-end: 2px solid var(--color-accent);
+  vertical-align: middle;
+}
+
+.legend-recognised::before {
+  border-block-end-style: dotted;
+}
+
+.legend-keyword::before {
+  border-block-end-style: dashed;
+  border-color: var(--color-label);
+}
+
+/* The footer of the note: the path of the file, then the edit link. */
+
+.entity-footer {
+  margin-block-start: var(--space-4);
+  padding-block: var(--space-3) var(--space-4);
+  border-block-start: 1px solid var(--color-border);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.entity-source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  margin: 0;
+}
+
+.entity-source code {
+  font-size: 0.8125rem;
+}
+
+/* The path linked to the file on its forge reads as the path does, the underline on hover telling the link. */
+
+.entity-source-file {
+  color: inherit;
+  text-decoration: none;
+}
+
+.entity-source-file:hover code {
+  text-decoration: underline;
+}
+
+.entity-edit-lead {
+  margin-inline-start: auto;
+}

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

@@ -0,0 +1,109 @@
+/* Entity page: the tree of the space, the text in the centre, what is computed in the right panel. */
+
+.entity {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "space"
+    "main"
+    "side";
+}
+
+/* Three widths: one column; the tree folded above the text with the panel beside it; three columns. The centre column is padded 18 by 16 px on the phone, 20 px on the tablet, 30 by 40 px on the desktop. */
+
+@media (min-width: 43.75rem) {
+  .entity {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.5rem);
+    grid-template-areas:
+      "space space"
+      "main side";
+  }
+
+  .entity-main {
+    padding: 1.25rem 1.25rem var(--space-5);
+  }
+
+  .entity-side {
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--color-border);
+  }
+}
+
+@media (min-width: 68.75rem) {
+  .entity {
+    grid-template-columns: minmax(0, 1fr) 21.5rem;
+    grid-template-areas: "main side";
+  }
+
+  .entity-with-space {
+    grid-template-columns: 16rem minmax(0, 1fr) 21.5rem;
+    grid-template-areas: "space main side";
+  }
+
+  .entity-main {
+    padding: 1.875rem 2.5rem var(--space-5);
+  }
+
+  .space-tree {
+    block-size: 100%;
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--color-border);
+  }
+
+  /* The tree stands in its column: the stylesheet keeps the content of the disclosure in view. */
+  .space-tree::details-content {
+    display: block;
+    content-visibility: visible;
+  }
+
+  .space-head::before {
+    content: none;
+  }
+}
+
+.space {
+  grid-area: space;
+}
+
+.entity-main {
+  grid-area: main;
+  min-inline-size: 0;
+  padding: 1.125rem 1rem var(--space-5);
+}
+
+.entity-side {
+  grid-area: side;
+  min-inline-size: 0;
+  border-block-start: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.entity-main > * {
+  max-inline-size: 50rem;
+  margin-inline: auto;
+}
+
+/* The foot of the article on the phone: the name of the file alone, its folders left out, and the short label of the edit link, "plafond.md · Edit" on one line of 48 px, the path kept at the 13 px floor of the theme; the question stays for the wider widths. */
+
+.entity-edit-short {
+  display: none;
+}
+
+@media (width < 43.75rem) {
+  /* Named with the footer, so that the rules of the article, assembled after this file, do not undo them; the line takes the whole width the hidden legend leaves. */
+  .entity-footer > .entity-source {
+    flex: 1;
+    flex-wrap: nowrap;
+    min-block-size: 3rem;
+  }
+
+  .entity-source-folders,
+  .entity-edit-question,
+  .entity-edit-long {
+    display: none;
+  }
+
+  .entity-edit-short {
+    display: inline;
+  }
+}

package/assets/css/pages/gallery.css

@@ -0,0 +1,74 @@
+/* Component gallery: the index frames every state at the width of its board. */
+
+.gallery-widths {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-block: var(--space-3);
+}
+
+.gallery-width {
+  min-block-size: 2.5rem;
+  padding-inline: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+.gallery-width[aria-pressed="true"] {
+  border-color: var(--color-ink);
+  background: var(--color-soft);
+  font-weight: 600;
+}
+
+.gallery-board {
+  margin-block-start: var(--space-5);
+  padding-block-start: var(--space-3);
+  border-block-start: 1px solid var(--color-border);
+}
+
+.gallery-board-caption,
+.gallery-caption {
+  max-inline-size: var(--measure);
+}
+
+.gallery-board-caption {
+  color: var(--color-muted);
+}
+
+.gallery-state {
+  margin-block: var(--space-4);
+}
+
+.gallery-state > h3 {
+  margin-block-end: var(--space-1);
+}
+
+.gallery-meta {
+  margin-block: var(--space-1) var(--space-2);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+/* The frame keeps the width of its board and scrolls in its stage rather than widening the page. */
+
+.gallery-stage {
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+}
+
+.gallery-frame {
+  display: block;
+  max-inline-size: none;
+  border: 0;
+}
+
+.gallery-slots ul,
+.gallery-slot ul {
+  padding-inline-start: var(--space-4);
+}

package/assets/css/pages/home-columns.css

@@ -0,0 +1,148 @@
+/* The spaces on the left, the recent changes on the right, from 48 rem. */
+
+.home-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-4);
+}
+
+@media (min-width: 43.75rem) {
+  .home-columns {
+    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+  }
+}
+
+.home-spaces h2,
+.home-recent h2 {
+  margin-block: 0 var(--space-2);
+  font-size: 1.0625rem;
+}
+
+.home-lead {
+  margin-inline-start: var(--space-1);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
+.home-space-list,
+.home-change-list {
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  list-style: none;
+  overflow: hidden;
+}
+
+.home-space + .home-space,
+.home-change + .home-change {
+  border-block-start: 1px solid var(--color-border);
+}
+
+/* A row of a space: the badge, the name and the count; the row is a link to the page of the space. */
+
+.home-space-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-block-size: 3.75rem;
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.home-space-row:hover .home-space-name {
+  text-decoration: underline;
+}
+
+.home-space-row .space-initials {
+  flex: none;
+  inline-size: 2.125rem;
+  block-size: 2.125rem;
+}
+
+.home-space-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-inline-size: 0;
+}
+
+.home-space-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.home-space-meta,
+.home-change-meta {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.home-space.stale .home-space-meta {
+  color: var(--color-muted);
+}
+
+.home-more-spaces {
+  margin-block-start: var(--space-2);
+}
+
+.home-more-spaces > summary {
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+.home-more-spaces > .home-space-list {
+  margin-block-start: var(--space-2);
+}
+
+.home-note {
+  margin-block: var(--space-2) 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* A recent change: the title, then its space and its date. */
+
+.home-change > a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.home-change > a:hover .home-change-title {
+  text-decoration: underline;
+}
+
+.home-change-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+/* The alert on a dormant space: a card in the ink, never in the accent. */
+
+.home-alert {
+  margin-block-start: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+}
+
+.home-alert h3 {
+  margin-block: 0 var(--space-1);
+  font-size: 0.875rem;
+}
+
+.home-alert p {
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}

package/assets/css/pages/home-shortcuts.css

@@ -0,0 +1,40 @@
+/* The most cited pages as chips, led by a word. */
+
+.home-most-cited {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  margin-block: var(--space-3) var(--space-5);
+}
+
+.home-most-cited-lead {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.home-shortcuts {
+  display: contents;
+}
+
+.home-shortcuts li {
+  list-style: none;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding: 0 0.875rem;
+  border: 1px solid var(--color-border);
+  border-radius: 1.25rem;
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.chip:hover {
+  border-color: var(--color-ink);
+}

package/assets/css/pages/home.css

@@ -0,0 +1,81 @@
+/* Home: the question, the field with its live results in the flow, the shortcuts; then the spaces and the recent changes in two columns. */
+
+.home {
+  max-inline-size: 65rem;
+  padding-block-start: var(--space-5);
+}
+
+.home h1 {
+  margin-block: 0 var(--space-2);
+  font-size: 2.375rem;
+  letter-spacing: -0.024em;
+}
+
+.home-explanation {
+  max-inline-size: 41rem;
+  margin-block-end: var(--space-4);
+  color: var(--color-muted);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+/* The field of the home page: drawn large across the column, ruled in the ink, its live results joined under it. */
+
+.home-ask concordance-island[data-island="search"] {
+  position: static;
+  max-inline-size: none;
+}
+
+.home-search {
+  margin: 0;
+}
+
+.home-search-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: 3.5rem;
+  padding-inline: var(--space-3);
+  border: 1.5px solid var(--color-ink);
+  border-radius: calc(var(--radius) * 1.25);
+  background: var(--color-surface);
+  color: var(--color-ink);
+}
+
+.home-search-field input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-ink);
+  font-size: 1.125rem;
+}
+
+.home-search-field input::placeholder {
+  color: var(--color-label);
+  opacity: 1;
+}
+
+.search-count {
+  flex: none;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.home-search:has(+ .home-suggestions:not([hidden])) .home-search-field {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.home-suggestions {
+  position: static;
+  min-inline-size: 0;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  border: 1.5px solid var(--color-ink);
+  border-block-start: 0;
+  border-radius: 0 0 calc(var(--radius) * 1.25) calc(var(--radius) * 1.25);
+  box-shadow: none;
+}