datalog-theme 0.7.0 → 0.9.0

data/_sass/_features.scss

@@ -0,0 +1,17 @@
+// Optional features whose styles the stylesheet includes.
+//
+// assets/css/main.scss configures this module from the site's settings before
+// it loads the theme, so a site carries only the styles of the features it
+// uses. Partials read the flags and load the matching styles with
+// `@if features.$flag { @include meta.load-css(...) }` at the position those
+// rules always had, so turning every flag on leaves the stylesheet unchanged.
+//
+// Every flag defaults to true: a site that replaces main.scss with a plain
+// `@use "theme"` keeps the complete stylesheet.
+
+$search: true !default;
+$visualizations: true !default;
+$notebooks: true !default;
+$packages: true !default;
+$academic-dashboard: true !default;
+$open-science-badges: true !default;

data/_sass/_layout.scss

@@ -259,7 +259,7 @@ body.dark-mode .footer {
   font-size: map.get($font-size-scale, sm);
   line-height: $line-height-base;
 
-  h3 {
+  h2 {
     color: #fff;
     font-size: map.get($font-size-scale, sm);
     font-weight: 700;
@@ -1029,6 +1029,24 @@ body.dark-mode .post-author-affiliation {
   color: $dark-ink-500;
 }
 
+// Bylines list one or more people, side by side while they fit.
+.author-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.author-list__role {
+  color: $color-ink-500;
+}
+
+body.dark-mode .author-list__role {
+  color: $dark-ink-500;
+}
+
 .post-notebook-link {
   font-weight: 500;
 }
@@ -1092,6 +1110,12 @@ body.dark-mode .post-category {
   }
 }
 
+// Without a table of contents (no headings, or `toc: false`) the article is the
+// wrapper's first child and would land in the 14rem column meant for the contents.
+.post-body-wrapper > .post-content:first-child {
+  grid-column: 1 / -1;
+}
+
 .post-content {
   min-width: 0;
 
@@ -1734,6 +1758,366 @@ body.wide .post-content {
   }
 }
 
+// The newest correction or update of an article, under its metadata, and its
+// revision history after the body (_plugins/revisions.rb).
+.revision-notice {
+  @include callout($color-accent-tertiary);
+  font-size: map.get($font-size-scale, sm);
+
+  p {
+    margin: 0;
+    max-width: $max-width-reading;
+  }
+
+  // Links keep their contrast on the tinted background.
+  a {
+    color: $color-accent-primary-text;
+
+    &:hover,
+    &:focus {
+      color: $color-accent-secondary-text;
+    }
+  }
+}
+
+.revision-notice--correction {
+  @include callout($color-warning);
+}
+
+body.dark-mode .revision-notice {
+  border-left-color: $dark-accent-tertiary;
+}
+
+body.dark-mode .revision-notice--correction {
+  border-left-color: $dark-warning;
+}
+
+.revision-history__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: map.get($spacing, 3);
+}
+
+.revision-history__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: map.get($spacing, 1) map.get($spacing, 3);
+  max-width: $max-width-reading;
+  font-size: map.get($font-size-scale, sm);
+}
+
+.revision-history__date {
+  font-weight: 600;
+  color: $color-ink-700;
+}
+
+.revision-history__type {
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.1rem 0.5rem;
+  border-radius: map.get($radius, sm);
+  background: rgba($color-accent-secondary, 0.1);
+  color: $color-accent-secondary-text;
+}
+
+.revision-history__item--correction .revision-history__type {
+  background: rgba($color-warning, 0.12);
+  color: $color-warning-text;
+}
+
+.revision-history__item--published .revision-history__type {
+  background: rgba($color-neutral-500, 0.12);
+  color: $color-ink-700;
+}
+
+.revision-history__summary {
+  flex-basis: 100%;
+}
+
+body.dark-mode {
+  .revision-history__date {
+    color: $dark-ink-700;
+  }
+
+  .revision-history__type {
+    background: rgba($dark-accent-secondary, 0.15);
+    color: $dark-accent-secondary;
+  }
+
+  .revision-history__item--correction .revision-history__type {
+    background: rgba($dark-warning, 0.15);
+    color: $dark-warning;
+  }
+
+  .revision-history__item--published .revision-history__type {
+    background: rgba($dark-ink-500, 0.15);
+    color: $dark-ink-700;
+  }
+}
+
+// The reuse terms of an article: the copyright, the licence of the text and
+// figures, and of the code samples (_plugins/licenses.rb).
+.content-license {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+  max-width: $max-width-reading;
+  margin: 0;
+}
+
+body.dark-mode .content-license {
+  color: $dark-ink-500;
+}
+
+@media print {
+  // On paper, the licence keeps its address.
+  .content-license a[href]::after {
+    content: " (" attr(href) ")";
+  }
+}
+
+// Navigation within an article series (_plugins/series.rb): the parts in
+// order at the top of the article, the previous and next parts at its end.
+.series-nav {
+  @include callout($color-accent-secondary);
+  font-size: map.get($font-size-scale, sm);
+  max-width: $max-width-reading;
+
+  // Links keep their contrast on the tinted background.
+  a {
+    color: $color-accent-primary-text;
+
+    &:hover,
+    &:focus {
+      color: $color-accent-secondary-text;
+    }
+  }
+}
+
+.series-nav--compact {
+  margin-top: map.get($spacing, 5);
+}
+
+.series-nav__heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: map.get($spacing, 1) map.get($spacing, 3);
+  margin: 0 0 map.get($spacing, 2);
+}
+
+.series-nav__label,
+.series-nav__link-label {
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $color-ink-500;
+}
+
+.series-nav__title {
+  font-size: map.get($font-size-scale, base);
+  font-weight: 600;
+  color: $color-ink-900;
+}
+
+.series-nav__position,
+.series-nav__context,
+.series-nav__description {
+  margin: 0 0 map.get($spacing, 2);
+  color: $color-ink-500;
+}
+
+.series-nav__position {
+  margin: 0;
+}
+
+.series-nav__progress {
+  display: block;
+  width: 100%;
+  height: 0.375rem;
+  margin: 0 0 map.get($spacing, 3);
+  border: 0;
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.15);
+  appearance: none;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background: $color-accent-secondary;
+    border-radius: map.get($radius, sm);
+  }
+
+  &::-moz-progress-bar {
+    background: $color-accent-secondary;
+    border-radius: map.get($radius, sm);
+  }
+}
+
+.series-nav__list {
+  display: grid;
+  gap: map.get($spacing, 1);
+  margin: 0 0 map.get($spacing, 3);
+  padding-left: 1.5rem;
+}
+
+.series-nav__part--current a {
+  font-weight: 600;
+  color: $color-ink-900;
+  text-decoration: none;
+}
+
+.series-nav__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: map.get($spacing, 2) map.get($spacing, 4);
+}
+
+.series-nav__link {
+  display: grid;
+  gap: 0;
+  font-weight: 600;
+}
+
+.series-nav__link--next {
+  margin-left: auto;
+  text-align: right;
+}
+
+body.dark-mode {
+  .series-nav {
+    border-left-color: $dark-accent-secondary;
+  }
+
+  .series-nav__label,
+  .series-nav__link-label,
+  .series-nav__position,
+  .series-nav__context,
+  .series-nav__description {
+    color: $dark-ink-500;
+  }
+
+  .series-nav__title,
+  .series-nav__part--current a {
+    color: $dark-ink-900;
+  }
+
+  .series-nav__progress {
+    background: rgba($dark-ink-500, 0.2);
+
+    &::-webkit-progress-value,
+    &::-moz-progress-bar {
+      background: $dark-accent-secondary;
+    }
+  }
+}
+
+@media print {
+  .series-nav {
+    border-left-color: currentColor;
+    background: none;
+  }
+
+  .series-nav__progress {
+    display: none;
+  }
+}
+
+// The computational artifacts behind an article (_plugins/reproducibility.rb).
+.reproduce {
+  @include callout($color-accent-tertiary);
+  font-size: map.get($font-size-scale, sm);
+  max-width: $max-width-reading;
+
+  // Links keep their contrast on the tinted background.
+  a {
+    color: $color-accent-primary-text;
+
+    &:hover,
+    &:focus {
+      color: $color-accent-secondary-text;
+    }
+  }
+
+  code {
+    font-size: 0.9em;
+  }
+}
+
+.reproduce__heading {
+  margin: 0 0 map.get($spacing, 1);
+  font-size: map.get($font-size-scale, base);
+}
+
+.reproduce__intro {
+  margin: 0 0 map.get($spacing, 3);
+  color: $color-ink-500;
+}
+
+.reproduce__list {
+  display: grid;
+  gap: map.get($spacing, 2);
+  margin: 0;
+
+  > div {
+    display: grid;
+    grid-template-columns: 7rem minmax(0, 1fr);
+    gap: map.get($spacing, 1) map.get($spacing, 3);
+    align-items: baseline;
+  }
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd {
+    display: flex;
+    flex-wrap: wrap;
+    gap: map.get($spacing, 1) map.get($spacing, 3);
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
+.reproduce__detail {
+  color: $color-ink-700;
+}
+
+body.dark-mode {
+  .reproduce {
+    border-left-color: $dark-accent-tertiary;
+  }
+
+  .reproduce__intro {
+    color: $dark-ink-500;
+  }
+
+  .reproduce__detail {
+    color: $dark-ink-700;
+  }
+}
+
+@media print {
+  .reproduce {
+    border-left-color: currentColor;
+    background: none;
+  }
+
+  // On paper, every artifact keeps its address.
+  .reproduce a[href]::after {
+    content: " (" attr(href) ")";
+  }
+}
+
 // Editorial provenance note (why_this_exists, evidence, methodology, reviewed_at).
 .content-provenance {
   @include callout($color-accent-secondary);

data/_sass/_mathematical.scss

@@ -26,6 +26,33 @@
   }
 }
 
+// The keyboard's and the screen reader's way to an equation that MathJax links
+// from inside its aria-hidden output (assets/js/math.js, exposeReferenceLinks):
+// out of sight until it takes the focus.
+.math-reference-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+
+  &:focus,
+  &:focus-visible {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0 0 0 map.get($spacing, 1);
+    padding: 0 map.get($spacing, 1);
+    overflow: visible;
+    clip-path: none;
+    font-size: map.get($font-size-scale, sm);
+  }
+}
+
 .math-expression--display {
   max-width: 48rem;
 }

data/_sass/_moderation.scss

@@ -0,0 +1,222 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+// The moderation inbox (components/moderation-inbox.html, assets/js/moderation/inbox.js).
+
+.moderation {
+  margin-top: map.get($spacing, 5);
+}
+
+.moderation__boundary {
+  margin: 0 0 map.get($spacing, 4);
+  padding: map.get($spacing, 3) map.get($spacing, 4);
+  border-left: 3px solid $color-accent-secondary;
+  background: rgba($color-neutral-500, 0.08);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.moderation__filter-grid {
+  @include respond-to(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.moderation__status,
+.moderation__sign-in {
+  margin: map.get($spacing, 4) 0;
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.1);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.moderation[data-state='error'] .moderation__status,
+.moderation[data-state='unauthorized'] .moderation__status,
+.moderation[data-state='forbidden'] .moderation__status {
+  background: rgba($color-danger-500, 0.1);
+  color: $color-danger-700;
+}
+
+.moderation__sign-in a {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.moderation__list {
+  list-style: none;
+  margin: map.get($spacing, 4) 0;
+  padding: 0;
+  display: grid;
+  gap: map.get($spacing, 4);
+}
+
+.moderation-item__card {
+  padding: map.get($spacing, 4);
+  border: 1px solid rgba($color-neutral-200, 0.9);
+  border-left-width: 4px;
+  border-radius: map.get($radius, md);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.moderation-item--correction .moderation-item__card {
+  border-left-color: $color-accent-secondary;
+}
+
+.moderation-item--abuse .moderation-item__card {
+  border-left-color: $color-danger-600;
+}
+
+.moderation-item[aria-busy='true'] {
+  opacity: 0.7;
+}
+
+.moderation-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: map.get($spacing, 2);
+  margin-bottom: map.get($spacing, 2);
+}
+
+.moderation-item__type,
+.moderation-item__status,
+.moderation-item__category {
+  padding: 0 map.get($spacing, 2);
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.15);
+  color: $color-ink-700;
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+}
+
+.moderation-item__type {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.moderation-item__time,
+.moderation-item__author,
+.moderation-item__where {
+  margin: 0 0 map.get($spacing, 1);
+  color: $color-ink-500;
+}
+
+.moderation-item__body {
+  margin: map.get($spacing, 3) 0;
+  overflow-wrap: anywhere;
+
+  p {
+    margin: 0 0 map.get($spacing, 2);
+  }
+}
+
+.moderation-item__context,
+.moderation-item__quote {
+  margin: map.get($spacing, 2) 0;
+  padding: 0 0 0 map.get($spacing, 3);
+  border-left: 3px solid rgba($color-neutral-500, 0.4);
+  color: $color-ink-500;
+
+  p {
+    margin: 0;
+  }
+}
+
+.moderation-item__history {
+  margin: map.get($spacing, 2) 0;
+  padding-left: map.get($spacing, 5);
+  color: $color-ink-500;
+  font-size: map.get($font-size-scale, xs);
+}
+
+.moderation-item__actions {
+  display: grid;
+  gap: map.get($spacing, 2);
+  margin-top: map.get($spacing, 3);
+  padding-top: map.get($spacing, 3);
+  border-top: 1px solid rgba($color-neutral-500, 0.2);
+}
+
+.moderation-item__note-label {
+  font-weight: 600;
+}
+
+.moderation-item__note {
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid rgba($color-neutral-200, 0.9);
+  border-radius: map.get($radius, sm);
+  background: $color-surface-50;
+  color: $color-ink-700;
+  font: inherit;
+}
+
+.moderation-item__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 2);
+}
+
+.moderation-item__message {
+  margin: map.get($spacing, 2) 0 0;
+  font-weight: 600;
+
+  &[role='alert'] {
+    color: $color-danger-700;
+  }
+}
+
+body.dark-mode {
+  .moderation__boundary {
+    border-left-color: $dark-accent-secondary;
+    background: rgba($dark-ink-500, 0.12);
+  }
+
+  .moderation__status,
+  .moderation__sign-in {
+    background: rgba($dark-ink-500, 0.15);
+  }
+
+  .moderation[data-state='error'] .moderation__status,
+  .moderation[data-state='unauthorized'] .moderation__status,
+  .moderation[data-state='forbidden'] .moderation__status,
+  .moderation-item__message[role='alert'] {
+    color: $color-danger-300;
+  }
+
+  .moderation-item__card {
+    border-color: rgba($dark-ink-500, 0.35);
+  }
+
+  .moderation-item--correction .moderation-item__card {
+    border-left-color: $dark-accent-secondary;
+  }
+
+  .moderation-item--abuse .moderation-item__card {
+    border-left-color: $color-danger-300;
+  }
+
+  .moderation-item__type,
+  .moderation-item__status,
+  .moderation-item__category {
+    background: rgba($dark-ink-500, 0.2);
+    color: $dark-ink-700;
+  }
+
+  .moderation-item__time,
+  .moderation-item__author,
+  .moderation-item__where,
+  .moderation-item__context,
+  .moderation-item__quote,
+  .moderation-item__history {
+    color: $dark-ink-500;
+  }
+
+  .moderation-item__note {
+    border-color: rgba($dark-ink-500, 0.35);
+    background: $dark-surface-300;
+    color: $dark-ink-700;
+  }
+}