@concordance-wiki/site 0.1.0

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

@@ -0,0 +1,212 @@
+/* Document page: the three views of an office document behind the tabs of the theme, the strip of pages beside the rendering of the current page and its notes, the files that make the document in the panel. */
+
+.document-page .entity-main {
+  padding: 1.625rem 2.125rem var(--space-5);
+}
+
+.document-page .entity-main > * {
+  max-inline-size: none;
+}
+
+.document-line {
+  padding-block-end: 0;
+  border-block-end: 0;
+}
+
+/* The download of the original at the end of the tab bar, as a button. */
+
+.document-views .document-download {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.5rem;
+  padding: 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;
+  text-decoration: none;
+}
+
+.document-views .document-download:hover {
+  color: var(--color-ink);
+  text-decoration: underline;
+}
+
+.document-views .tabs-panel {
+  padding-block-start: 1.125rem;
+}
+
+/* The strip of pages beside the rendering: numbered thumbnails, the current one ruled in the accent; a row on a narrow page, a column from the tablet. */
+
+.document-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 1.125rem;
+}
+
+.document-page .document-rail {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.document-page .document-rail ol {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.document-page .document-rail a {
+  display: flex;
+  flex: none;
+  align-items: flex-end;
+  inline-size: 7.375rem;
+  min-inline-size: 0;
+  max-inline-size: none;
+  block-size: 4.125rem;
+  padding: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius) * 0.75);
+  background: var(--color-bg);
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.document-page .document-rail a.current {
+  border: 2px solid var(--color-accent);
+  background: var(--color-surface);
+  color: var(--color-accent);
+}
+
+@media (min-width: 43.75rem) {
+  .document-stage {
+    flex-direction: row;
+  }
+
+  .document-page .document-rail {
+    inline-size: 7.375rem;
+  }
+
+  .document-page .document-rail ol {
+    flex-direction: column;
+    max-block-size: 40rem;
+  }
+}
+
+/* The rendering of the current page: the toolbar of the viewer as a line, the page on its stage; without the viewer, the PDF as the browser shows it; then the two notes. */
+
+.document-render {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.document-render .document-viewer {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  overflow: visible;
+}
+
+.document-render .viewer-toolbar {
+  padding: 0 0 var(--space-2);
+  border-block-end: 0;
+}
+
+.viewer-stage,
+.document-embed {
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-large);
+  background: var(--color-bg);
+}
+
+.document-embed {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 40rem;
+}
+
+.viewer-stage .viewer-page {
+  margin: 0;
+  border: 1px solid var(--color-border);
+}
+
+.document-render-note {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin: 0;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* The toolbar of the viewer as the board draws it: the counter, the zoom between its two signs, the find field after its glyph, all on one line. */
+
+.viewer-toolbar {
+  gap: 0.875rem;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.viewer-counter {
+  font-family: var(--font-mono);
+}
+
+.viewer-separator {
+  color: var(--color-border);
+}
+
+.viewer-toolbar .viewer-zoom-out,
+.viewer-toolbar .viewer-zoom-in {
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font-size: 1rem;
+}
+
+.viewer-toolbar button[disabled] {
+  color: var(--color-label);
+}
+
+.viewer-find {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-block-size: 2.5rem;
+}
+
+.viewer-find input {
+  inline-size: 10rem;
+  min-block-size: 2.5rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-ink);
+  font: inherit;
+}
+
+.viewer-find input::placeholder {
+  color: var(--color-muted);
+  opacity: 1;
+}

package/assets/css/pages/edge-cases.css

@@ -0,0 +1,450 @@
+/* Edge cases: what shows when something is missing. The page served for a missing address, the empty results, the document whose conversion failed, the notice on the age of the site: the cause named in plain words, what stays reachable said, two exits at least, the navigation kept. */
+
+/* The two shapes of exit these states share: a filled button and a bordered one, 44 px high. */
+
+.button-primary,
+.button-secondary {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.75rem;
+  padding: 0 1.0625rem;
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius);
+  background: var(--color-ink);
+  color: var(--color-bg);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.button-secondary {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-ink);
+}
+
+.button-primary:hover,
+.button-secondary:hover {
+  text-decoration: underline;
+}
+
+summary.button-secondary::before {
+  content: none;
+}
+
+/* The page served for a missing address: one measured column on the page background. */
+
+.not-found {
+  max-inline-size: 38.75rem;
+  margin-inline: auto;
+  padding: 1.875rem var(--space-4) 2.125rem;
+}
+
+.not-found > .section-label {
+  margin: 0 0 0.75rem;
+}
+
+.not-found h1 {
+  margin: 0 0 0.75rem;
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+.not-found-cause {
+  margin: 0 0 1.25rem;
+  color: var(--color-ink);
+  font-size: 0.9375rem;
+  line-height: 1.75;
+}
+
+.not-found-nearby {
+  margin: 0 0 1.125rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-large);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.not-found-nearby > h2 {
+  padding: 0.625rem 0.9375rem;
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-soft);
+}
+
+.not-found-nearby ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.not-found-nearby li + li {
+  border-block-start: 1px solid var(--color-border);
+}
+
+.not-found-nearby a {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-block-size: 2.75rem;
+  padding: 0.75rem 0.9375rem;
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.not-found-nearby a:hover .not-found-nearby-title {
+  text-decoration: underline;
+}
+
+.not-found-nearby-title {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.not-found-nearby-path {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.not-found-exits {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  margin: 0;
+}
+
+/* The empty results: one card on the soft surface in the column of the results, the exits as rows on the surface; the column takes the whole width when the page has no facet to draw. */
+
+.results-layout > .results-main:first-child {
+  grid-column: 1 / -1;
+}
+
+.results-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-inline-size: 47.5rem;
+  padding: var(--space-3);
+  border-radius: var(--radius-large);
+  background: var(--color-soft);
+}
+
+.results-empty p {
+  margin: 0;
+}
+
+.results-empty-lead {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.results-empty-cause {
+  color: var(--color-ink);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.results-exits {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.results-exit {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-block-size: 2.75rem;
+  padding: 0.6875rem 0.8125rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-ink);
+  text-decoration: none;
+}
+
+.results-exit:hover .results-exit-label {
+  text-decoration: underline;
+}
+
+.results-exit-secondary {
+  border-style: dashed;
+}
+
+.results-exit-label {
+  flex: 1;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.results-exit-count {
+  color: var(--color-label);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+}
+
+.results-empty .search-closest {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+}
+
+.results-empty-note {
+  padding-block-start: 0.8125rem;
+  border-block-start: 1px solid var(--color-border);
+  color: var(--color-label);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* The notice of a page whose datum is missing, ruled in the accent: under the title of an interface whose contract could not be read, in place of the rendering of a document whose conversion failed. */
+
+.page-notice {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5625rem;
+  max-inline-size: 47.5rem;
+  padding: 0.9375rem 1.125rem;
+  border: 1px solid var(--color-border);
+  border-inline-start: 3px solid var(--color-accent);
+  border-start-end-radius: var(--radius-large);
+  border-end-end-radius: var(--radius-large);
+  background: var(--color-surface);
+}
+
+.page-notice p {
+  margin: 0;
+}
+
+.page-notice-lead {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.page-notice-detail {
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.page-notice-exits {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5625rem;
+  margin-block-start: 0.125rem;
+}
+
+.page-notice-exits .button-primary,
+.page-notice-exits .button-secondary {
+  min-block-size: 2.5rem;
+  padding: 0 0.9375rem;
+  font-size: 0.8125rem;
+}
+
+.page-notice-why {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5625rem;
+}
+
+.page-notice-why > p {
+  flex-basis: 100%;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.page-notice-why code {
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+/* The notice under the title of an entity page keeps the measure of the text; the block of a document whose conversion failed stacks it over the extracted text. */
+
+.entity-header + .page-notice {
+  margin-block: 0 var(--space-4);
+}
+
+.document-failure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.document-extracted {
+  max-inline-size: 47.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-large);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.document-extracted-head {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem 0.9375rem;
+  border-block-end: 1px solid var(--color-border);
+  background: var(--color-soft);
+}
+
+.document-extracted-note {
+  margin-inline-start: auto;
+  color: var(--color-label);
+  font-size: 0.8125rem;
+}
+
+.document-extracted-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.document-extracted-list li {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0.9375rem;
+}
+
+.document-extracted-list li + li {
+  border-block-start: 1px solid var(--color-border);
+}
+
+.document-extracted-list p {
+  margin: 0;
+  color: var(--color-ink);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.document-extracted-position {
+  flex: none;
+  min-inline-size: 2.125rem;
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+/* The state of every representation in the panel: the one that failed marked, its state written in the accent. */
+
+.document-states {
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  list-style: none;
+  overflow: hidden;
+}
+
+.document-states li {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  padding: 0.6875rem 0.8125rem;
+  color: var(--color-muted);
+  font-size: 0.8125rem;
+}
+
+.document-states li + li {
+  border-block-start: 1px solid var(--color-border);
+}
+
+.document-states code {
+  flex: 1;
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.document-state-failed {
+  background: var(--color-soft);
+}
+
+.document-state-failed span {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+/* The notice on the age of the site, between the bar and the page, in the measure of the pages. */
+
+.age-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  max-inline-size: 69rem;
+  margin: var(--space-3) var(--space-4) 0;
+  padding: 0.9375rem 1.125rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-large);
+  background: var(--color-surface);
+}
+
+.age-notice-chip {
+  flex: none;
+  margin-block-start: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-small);
+  background: var(--color-soft);
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.age-notice-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.age-notice-text p {
+  margin: 0;
+}
+
+.age-notice-lead {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.age-notice-detail {
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+
+.age-notice-close {
+  flex: none;
+  min-inline-size: 2.5rem;
+  border: 0;
+  background: none;
+  color: var(--color-label);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.age-notice-close:hover {
+  color: var(--color-ink);
+}
+
+@media (min-width: 72rem) {
+  .age-notice {
+    margin-inline: auto;
+  }
+}