datalog-theme 0.7.0 → 0.9.0

data/_sass/_service-forms.scss

@@ -0,0 +1,204 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+// The forms that post to the site's dynamic services (docs/dynamic-services.md):
+// the correction report on posts and the contact form. Their states come from
+// assets/js/dynamic-services/form-state.js as data-state on the form.
+
+.correction-report {
+  @include callout($color-accent-secondary);
+  margin-top: map.get($spacing, 5);
+  font-size: map.get($font-size-scale, sm);
+  max-width: $max-width-reading;
+}
+
+.correction-report__summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: $color-ink-900;
+}
+
+.contact-form {
+  margin-top: map.get($spacing, 5);
+  max-width: $max-width-reading;
+}
+
+.contact-form__fallback {
+  margin: 0;
+  padding: map.get($spacing, 3) map.get($spacing, 4);
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.08);
+}
+
+.service-form {
+  margin-top: map.get($spacing, 3);
+}
+
+.service-form__intro,
+.service-form__hint {
+  margin: 0 0 map.get($spacing, 2);
+  color: $color-ink-500;
+}
+
+.service-form__hint {
+  margin: map.get($spacing, 1) 0 0;
+  font-size: map.get($font-size-scale, xs);
+}
+
+.service-form__quote {
+  margin: 0 0 map.get($spacing, 3);
+  padding: 0 0 0 map.get($spacing, 3);
+  border-left: 3px solid rgba($color-neutral-500, 0.5);
+  font-style: italic;
+}
+
+.service-form__fields {
+  display: grid;
+  gap: map.get($spacing, 3);
+  margin: 0 0 map.get($spacing, 3);
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.service-form__row {
+  display: grid;
+  gap: map.get($spacing, 3);
+
+  @include respond-to(md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.service-form__privacy {
+  margin: 0 0 map.get($spacing, 3);
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.service-form__field {
+  display: grid;
+  gap: map.get($spacing, 1);
+
+  label {
+    font-weight: 600;
+  }
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+    padding: 0.45rem 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;
+    font-size: map.get($font-size-scale, sm);
+  }
+
+  [aria-invalid='true'] {
+    border-color: $color-danger-600;
+  }
+}
+
+.service-form__error {
+  margin: 0;
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  color: $color-danger-700;
+}
+
+// The honeypot: readers never see it, bots fill it.
+.service-form__trap {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.service-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 2);
+}
+
+.service-form__status {
+  margin: map.get($spacing, 3) 0 0;
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.1);
+  color: $color-ink-700;
+
+  form[data-state='success'] & {
+    background: rgba($color-success, 0.12);
+  }
+
+  form[data-state='error'] &,
+  form[data-state='invalid'] & {
+    background: rgba($color-danger-500, 0.1);
+    color: $color-danger-700;
+  }
+}
+
+form[data-state='pending'] .service-form__actions {
+  opacity: 0.7;
+}
+
+form[data-state='disabled'] .service-form__fields {
+  opacity: 0.6;
+}
+
+body.dark-mode {
+  .correction-report {
+    border-left-color: $dark-accent-secondary;
+  }
+
+  .correction-report__summary {
+    color: $dark-ink-900;
+  }
+
+  .service-form__intro,
+  .service-form__hint,
+  .service-form__privacy {
+    color: $dark-ink-500;
+  }
+
+  .contact-form__fallback {
+    background: rgba($dark-ink-500, 0.15);
+  }
+
+  .service-form__field {
+    input,
+    select,
+    textarea {
+      border-color: rgba($dark-ink-500, 0.35);
+      background: $dark-surface-300;
+      color: $dark-ink-700;
+    }
+  }
+
+  .service-form__error,
+  form[data-state='error'] .service-form__status,
+  form[data-state='invalid'] .service-form__status {
+    color: $color-danger-300;
+  }
+
+  .service-form__status {
+    background: rgba($dark-ink-500, 0.15);
+    color: $dark-ink-700;
+  }
+}
+
+@media print {
+  .correction-report {
+    display: none !important;
+  }
+}

data/_sass/_subscriptions.scss

@@ -0,0 +1,140 @@
+@use 'sass:map';
+
+@use 'variables' as *;
+
+// Newsletter subscriptions (components/subscribe-form.html and
+// subscription-manage.html). The forms are .service-form (_service-forms.scss).
+
+.subscribe {
+  max-width: $max-width-reading;
+  margin-top: map.get($spacing, 6);
+}
+
+.subscribe__heading {
+  margin: 0 0 map.get($spacing, 2);
+  font-size: map.get($font-size-scale, lg);
+}
+
+.subscribe__description {
+  margin: 0 0 map.get($spacing, 3);
+  font-size: map.get($font-size-scale, sm);
+}
+
+// In the footer the form sits in a column next to the feeds: smaller, no top gap.
+.subscribe--footer {
+  max-width: none;
+  margin-top: map.get($spacing, 4);
+
+  .subscribe__heading {
+    font-size: map.get($font-size-scale, md);
+  }
+}
+
+// The footer is dark in both themes, so the form's inks are the footer's.
+.site-footer .subscribe {
+  .subscribe__heading {
+    color: #fff;
+  }
+
+  .service-form__privacy,
+  .service-form__hint {
+    color: rgba(#fff, 0.75);
+  }
+
+  .service-form__privacy a {
+    color: #fff;
+  }
+
+  .service-form__error,
+  form[data-state='error'] .service-form__status,
+  form[data-state='invalid'] .service-form__status {
+    color: $color-danger-300;
+  }
+
+  .service-form__status {
+    background: rgba(#fff, 0.1);
+    color: #fff;
+  }
+}
+
+.subscribe__topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 1) map.get($spacing, 4);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+  font-size: map.get($font-size-scale, sm);
+
+  legend {
+    width: 100%;
+    margin-bottom: map.get($spacing, 1);
+    padding: 0;
+    font-weight: 600;
+  }
+
+  .service-form__error {
+    width: 100%;
+  }
+}
+
+.subscribe__topic {
+  display: inline-flex;
+  align-items: center;
+  gap: map.get($spacing, 2);
+  font-weight: 400;
+
+  input {
+    width: auto;
+  }
+}
+
+.subscription-manage {
+  max-width: $max-width-reading;
+  margin-top: map.get($spacing, 5);
+}
+
+.subscription-manage__status {
+  margin: 0 0 map.get($spacing, 3);
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  border-radius: map.get($radius, sm);
+  background: rgba($color-neutral-500, 0.1);
+
+  .subscription-manage[data-state='error'] & {
+    background: rgba($color-danger-500, 0.1);
+    color: $color-danger-700;
+  }
+
+  .subscription-manage[data-state='confirmed'] &,
+  .subscription-manage[data-state='saved'] & {
+    background: rgba($color-success, 0.12);
+  }
+}
+
+.subscription-manage__panel {
+  display: grid;
+  gap: map.get($spacing, 3);
+  justify-items: start;
+}
+
+// display: grid would override the hidden attribute.
+.subscription-manage__panel[hidden] {
+  display: none;
+}
+
+body.dark-mode {
+  .subscription-manage__status {
+    background: rgba($dark-ink-500, 0.15);
+  }
+
+  .subscription-manage[data-state='error'] .subscription-manage__status {
+    color: $color-danger-300;
+  }
+}
+
+@media print {
+  .subscribe {
+    display: none !important;
+  }
+}

data/_sass/_syntax-highlighting.scss

@@ -2,9 +2,14 @@
 
 @use 'variables' as *;
 
-// Prism.js inspired syntax highlighting tuned for analytical workloads
+// Syntax highlighting for Rouge, which highlights code as the site builds:
+// kramdown's fenced code blocks, and the includes that use the rouge_highlight
+// filter. Rouge marks tokens with short Pygments class names, such as k for a
+// keyword, s2 for a double-quoted string and nf for a function name.
 pre[class*='language-'],
-code[class*='language-'] {
+code[class*='language-'],
+pre.highlight,
+pre.highlight code {
   color: $color-ink-900;
   background: transparent;
   font-family: $font-family-mono;
@@ -12,117 +17,227 @@ code[class*='language-'] {
   line-height: 1.6;
 }
 
-pre[class*='language-'] {
+pre[class*='language-'],
+pre.highlight {
   position: relative;
   padding-top: map.get($spacing, 5);
 }
 
 :not(pre) > code[class*='language-'],
-pre[class*='language-'] {
+pre[class*='language-'],
+pre.highlight {
   background: rgba($color-surface-900, 0.02);
 }
 
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: $color-ink-300;
-  font-style: italic;
-}
-
-.token.punctuation {
+.highlight {
+  .c,
+  .ch,
+  .cd,
+  .cm,
+  .cpf,
+  .c1,
+  .cs {
+    color: $color-ink-500;
+    font-style: italic;
+  }
+
+  .p {
+    color: $color-ink-500;
+  }
+
+  .nt,
+  .no,
+  .ss,
+  .gd {
+    color: $color-accent-tertiary;
+  }
+
+  .m,
+  .mb,
+  .mf,
+  .mh,
+  .mi,
+  .il,
+  .mo,
+  .mx,
+  .kc {
+    color: $color-accent-secondary-text;
+  }
+
+  .s,
+  .sa,
+  .sb,
+  .sc,
+  .dl,
+  .sd,
+  .s2,
+  .se,
+  .sh,
+  .si,
+  .sx,
+  .s1,
+  .na,
+  .nb,
+  .bp,
+  .gi {
+    color: $color-success-text;
+  }
+
+  .o,
+  .ni,
+  .nv,
+  .vc,
+  .vg,
+  .vi,
+  .vm {
+    color: $color-accent-primary;
+  }
+
+  .k,
+  .kd,
+  .kn,
+  .kp,
+  .kr,
+  .kt,
+  .kv,
+  .ow,
+  .cp {
+    color: $color-accent-secondary-text;
+  }
+
+  .nf,
+  .fm,
+  .nc,
+  .nd,
+  .ne {
+    color: $color-accent-primary;
+    font-weight: 600;
+  }
+
+  .sr,
+  .gr,
+  .gt {
+    color: $color-warning-text;
+  }
+
+  .gh,
+  .gu,
+  .gs {
+    font-weight: 700;
+  }
+
+  .ge {
+    font-style: italic;
+  }
+}
+
+// With line numbers on, Rouge lays a block out as a table: the numbers in the
+// first cell, the code in the second, each in its own <pre>. The site's table,
+// cell and <pre> styles would give it borders, padding and nested boxes.
+.highlight .rouge-table {
+  width: auto;
+  margin: 0;
+  border: 0;
+  border-collapse: collapse;
+  font-size: inherit;
+}
+
+.highlight .rouge-table td {
+  padding: 0;
+  border: 0;
+  vertical-align: top;
+}
+
+.highlight .rouge-table pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+.highlight .rouge-gutter {
+  padding-right: map.get($spacing, 4);
   color: $color-ink-500;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: $color-accent-tertiary;
-}
-
-.token.boolean,
-.token.number {
-  color: $color-accent-secondary-text;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: $color-success;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.token.variable {
-  color: $color-accent-primary;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: $color-accent-secondary-text;
-}
-
-.token.function,
-.token.class-name {
-  color: $color-accent-primary;
-  font-weight: 600;
-}
-
-.token.regex,
-.token.important {
-  color: $color-warning;
-}
-
-.token.important,
-.token.bold {
-  font-weight: 700;
-}
-
-.token.italic {
-  font-style: italic;
+  text-align: right;
+  user-select: none;
 }
 
 body.dark-mode pre[class*='language-'],
-body.dark-mode code[class*='language-'] {
+body.dark-mode code[class*='language-'],
+body.dark-mode pre.highlight,
+body.dark-mode pre.highlight code {
   color: $dark-ink-900;
 }
 
-body.dark-mode pre[class*='language-'] {
+body.dark-mode pre[class*='language-'],
+body.dark-mode pre.highlight {
   background: rgba($dark-surface-300, 0.8);
 }
 
-body.dark-mode .token.comment,
-body.dark-mode .token.prolog,
-body.dark-mode .token.doctype,
-body.dark-mode .token.cdata {
-  color: rgba($dark-ink-500, 0.7);
-}
-
-body.dark-mode .token.boolean,
-body.dark-mode .token.number {
-  color: $dark-accent-secondary;
-}
-
-body.dark-mode .token.selector,
-body.dark-mode .token.attr-name,
-body.dark-mode .token.string,
-body.dark-mode .token.inserted {
-  color: #5fe3aa;
-}
-
-body.dark-mode .token.keyword,
-body.dark-mode .token.operator {
-  color: $dark-accent-primary;
-}
-
-body.dark-mode .token.function,
-body.dark-mode .token.class-name {
-  color: #9fb6ff;
+body.dark-mode .highlight {
+  .c,
+  .ch,
+  .cd,
+  .cm,
+  .cpf,
+  .c1,
+  .cs,
+  .rouge-gutter {
+    color: $dark-ink-500;
+  }
+
+  .m,
+  .mb,
+  .mf,
+  .mh,
+  .mi,
+  .il,
+  .mo,
+  .mx,
+  .kc {
+    color: $dark-accent-secondary;
+  }
+
+  .s,
+  .sa,
+  .sb,
+  .sc,
+  .dl,
+  .sd,
+  .s2,
+  .se,
+  .sh,
+  .si,
+  .sx,
+  .s1,
+  .na,
+  .nb,
+  .bp,
+  .gi {
+    color: #5fe3aa;
+  }
+
+  .k,
+  .kd,
+  .kn,
+  .kp,
+  .kr,
+  .kt,
+  .kv,
+  .ow,
+  .cp,
+  .o {
+    color: $dark-accent-primary;
+  }
+
+  .nf,
+  .fm,
+  .nc,
+  .nd,
+  .ne {
+    color: #9fb6ff;
+  }
 }