datalog-theme 0.10.1 → 0.11.0

data/_sass/_docs.scss

@@ -0,0 +1,143 @@
+@use 'sass:map';
+@use 'variables' as *;
+
+// The guide layout is opt-in. Other pages and theme consumers keep their layout.
+.layout-docs .site-main.container,
+.layout-docs .page > .container {
+  width: min(100% - 2rem, 76rem);
+  max-width: none;
+}
+
+.docs-shell {
+  display: grid;
+  gap: clamp(1.25rem, 3vw, 2.5rem);
+  align-items: start;
+  min-width: 0;
+}
+
+.docs-sidebar {
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.15rem;
+    margin: 0 0 0.75rem;
+    padding: 0;
+    list-style: none;
+  }
+
+  a {
+    display: block;
+    padding: 0.4rem 0.6rem;
+    border-radius: 0.35rem;
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+
+    &:hover,
+    &:focus-visible,
+    &[aria-current='page'] {
+      color: var(--color-accent-text);
+      background: var(--color-background);
+    }
+
+    &[aria-current='page'] { font-weight: 700; }
+    &:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
+  }
+}
+
+.docs-sidebar__heading {
+  margin: 0.8rem 0 0.35rem;
+  padding-inline: 0.6rem;
+  color: var(--color-text-primary);
+  font-size: 0.82rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.docs-sidebar .docs-sidebar__home,
+.docs-sidebar .docs-sidebar__repo { color: var(--color-accent-text); font-weight: 600; }
+
+.docs-main,
+.docs-content,
+.docs-on-this-page { min-width: 0; }
+
+.docs-content {
+  max-width: 48rem;
+  overflow-wrap: anywhere;
+
+  :is(h2, h3, h4) { scroll-margin-top: calc(var(--header-height, 96px) + 1rem); }
+  h2 { padding-bottom: 0.45rem; border-bottom: 1px solid var(--color-border); }
+  :is(p, li) { line-height: 1.7; }
+
+  // Keep long examples inside the reading column, including rendered math.
+  pre,
+  .highlighter-rouge,
+  .code-block-wrapper { max-width: 100%; overflow-x: auto; }
+  :is(.math-expression, mjx-container[display='true'], .katex-display, figure) {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  table:not(.rouge-table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    margin-block: 1.5rem;
+
+    th, td { padding: 0.65rem 0.9rem; border: 1px solid var(--color-border); text-align: left; }
+    th { background: var(--color-background-secondary); }
+    caption { color: var(--color-text-secondary); }
+  }
+
+  .callout {
+    margin-block: 1.5rem;
+    border-left-color: var(--color-accent-text);
+    background: var(--color-background-secondary);
+    color: var(--color-text-primary);
+
+    p:last-child { margin-bottom: 0; }
+  }
+
+  .code-copy:focus-visible {
+    outline: 2px solid var(--color-accent-text);
+    outline-offset: 2px;
+  }
+}
+
+.docs-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-block: 2rem 1rem;
+  padding-block: 1rem;
+  border-top: 1px solid var(--color-border);
+
+  a { color: var(--color-accent-text); font-weight: 600; }
+  span { display: block; color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 400; }
+}
+
+.docs-back-to-top { color: var(--color-accent-text); }
+
+@media (min-width: map.get($breakpoints, lg)) {
+  .docs-shell { grid-template-columns: 12rem minmax(0, 1fr) 12rem; }
+  .docs-shell:not(:has(.docs-on-this-page)) { grid-template-columns: 12rem minmax(0, 1fr); }
+  .docs-sidebar,
+  .docs-on-this-page { position: sticky; top: 8.5rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
+  .docs-sidebar ul { grid-template-columns: 1fr; }
+  .docs-on-this-page .enhanced-toc { font-size: 0.9rem; }
+  .docs-on-this-page .enhanced-toc__heading { font-size: 0.9rem; }
+  .docs-on-this-page .enhanced-toc__content { padding: 0.5rem; }
+}
+
+@media (max-width: map.get($breakpoints, lg)) {
+  .docs-on-this-page { grid-row: 2; }
+  .docs-on-this-page .enhanced-toc__stats { display: none; }
+}

data/_sass/_features.scss

@@ -15,3 +15,9 @@ $notebooks: true !default;
 $packages: true !default;
 $academic-dashboard: true !default;
 $open-science-badges: true !default;
+
+// The framed panel around each display equation that
+// theme_options.math.display_style: card asks for. Its rules apply under the
+// `math-card` class the layout puts on <body> for such a site, so a stylesheet
+// that carries them still sets a plain site's equations plain.
+$math-card: true !default;

data/_sass/_layout.scss

@@ -73,15 +73,33 @@ body.dark-mode .page-meta {
 // ---------------------------------------------------------------------------
 .hero {
   position: relative;
-  // Solid base under the image: keeps the white text legible if the image
-  // fails to load, and gives contrast checkers a real colour to measure.
-  background: $color-surface-900 var(--hero-bg) center / cover no-repeat;
+  // A dark base keeps the white copy readable with or without an image.
+  background: $color-surface-900;
   color: #fff;
   padding: clamp(4rem, 10vw, 8rem) 0;
   text-align: center;
   overflow: hidden;
 }
 
+.hero--image {
+  background: $color-surface-900 var(--hero-bg) center / cover no-repeat;
+}
+
+.hero--contained {
+  border-radius: map.get($radius, xl);
+  padding: clamp(2.5rem, 6vw, 5rem);
+  text-align: left;
+
+  .hero-content {
+    width: 100%;
+    padding: 0;
+  }
+
+  .hero-tagline {
+    margin-inline: 0;
+  }
+}
+
 .hero-overlay {
   position: absolute;
   inset: 0;
@@ -97,6 +115,33 @@ body.dark-mode .page-meta {
   pointer-events: none;
 }
 
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 3);
+
+  .btn {
+    min-height: 2.75rem;
+    align-items: center;
+  }
+}
+
+.hero .btn-secondary,
+body.dark-mode .hero .btn-secondary {
+  color: #fff;
+  border-color: rgba(#fff, 0.75);
+
+  &:hover,
+  &:focus-visible {
+    color: #fff;
+    background: rgba(#fff, 0.12);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-actions .btn { transition: none; }
+}
+
 .hero-content {
   position: relative;
   z-index: 1;
@@ -191,6 +236,14 @@ body.dark-mode .section-title {
   }
 }
 
+.home-feature-card {
+  border-top: 3px solid $color-accent-secondary;
+}
+
+body.dark-mode .home-feature-card {
+  border-top-color: $dark-accent-secondary;
+}
+
 .card-meta {
   font-size: map.get($font-size-scale, xs);
   color: $color-ink-500;
@@ -279,10 +332,10 @@ body.dark-mode .footer {
     }
   }
 
-  // body.dark-mode a outranks the rule above; on the navy footer the dark
-  // accent needs the lighter shade to reach 4.5:1 through the muted paragraphs.
+  // body.dark-mode a outranks the rule above; use the readable dark accent
+  // on the navy footer too.
   body.dark-mode & a {
-    color: #93c5fd;
+    color: $dark-accent-primary;
   }
 
   p {
@@ -794,6 +847,7 @@ body.dark-mode .year-chart__label {
 
   .project-links {
     display: flex;
+    flex-wrap: wrap;
     gap: map.get($spacing, 2);
     padding-top: map.get($spacing, 2);
   }
@@ -998,6 +1052,11 @@ body.dark-mode .post-meta-list {
   border-bottom-color: rgba($dark-ink-500, 0.12);
 }
 
+// The same list under a page's own heading, kept off the content below (#411).
+.article-meta {
+  margin-bottom: map.get($spacing, 5);
+}
+
 .post-meta-term {
   font-size: map.get($font-size-scale, xs);
   font-weight: 600;

data/_sass/_mathematical.scss

@@ -2,26 +2,27 @@
 
 @use 'variables' as *;
 @use 'mixins' as *;
+@use 'features';
 
+// A display equation stands on its own line with space around it, as in print
+// (theme_options.math.display_style: plain, the default): no frame, nothing
+// added to its height but its margins. Its copy and edit tools appear where
+// the pointer or the focus is.
 .math-expression {
   position: relative;
-  margin: map.get($spacing, 6) auto;
-  padding: map.get($spacing, 6) map.get($spacing, 6) map.get($spacing, 5) map.get($spacing, 6);
-  border-radius: 1.1rem;
-  border: 1px solid rgba($color-neutral-900, 0.12);
-  background: rgba($color-neutral-100, 0.9);
-  box-shadow: 0 12px 30px rgba($color-neutral-900, 0.08);
+  margin: 1.25rem auto;
   display: grid;
   min-width: 0;
   max-width: 100%;
   overflow-x: auto;
   gap: map.get($spacing, 3);
-  transition: border-color $transition-snappy, box-shadow $transition-snappy, background $transition-snappy;
+  // Room at the sides for the equation's focus ring, which the scrolling box
+  // would otherwise clip; above and below, MathJax's own margins leave room.
+  padding-inline: map.get($spacing, 1);
 
-  &:focus-within {
-    border-color: $color-accent-primary;
-    box-shadow: 0 0 0 4px rgba($color-accent-primary, 0.18);
-    background: rgba($color-neutral-100, 0.96);
+  > mjx-container:focus-visible {
+    outline: 2px solid $color-accent-primary;
+    outline-offset: 2px;
   }
 
   mjx-container[display='true'] {
@@ -77,13 +78,23 @@
   font-family: $font-family-serif;
 }
 
+// At the end of the line, which the equation leaves empty unless it fills the
+// column, and out of sight until the pointer or the focus reaches the equation.
+// It stays in the tab order: tabbing onto a button shows it.
 .math-expression__toolbar {
   position: absolute;
-  top: map.get($spacing, 3);
-  left: map.get($spacing, 3);
+  top: 50%;
+  // Room for a button's focus ring, which the scrolling box would clip.
+  inset-inline-end: map.get($spacing, 2);
+  transform: translateY(-50%);
   display: inline-flex;
   gap: map.get($spacing, 2);
   z-index: 2;
+  opacity: 0;
+}
+
+.math-expression:is(:hover, :focus-within) .math-expression__toolbar {
+  opacity: 1;
 }
 
 .math-expression__button {
@@ -313,12 +324,6 @@
 }
 
 body.dark-mode {
-  .math-expression {
-    background: rgba($dark-surface-200, 0.92);
-    border-color: rgba($dark-ink-500, 0.3);
-    box-shadow: none;
-  }
-
   .math-expression__number {
     color: rgba($dark-ink-500, 0.85);
   }
@@ -403,3 +408,40 @@ body.dark-mode {
     }
   }
 }
+
+// theme_options.math.display_style: card. Each display equation in a framed
+// panel with its tools always in view, as before the theme set equations
+// plain. assets/css/main.scss compiles these rules only for a site that asks
+// for the card, and the layout puts `math-card` on <body> for it.
+@if features.$math-card {
+  .math-card {
+    .math-expression {
+      margin-block: map.get($spacing, 6);
+      padding: map.get($spacing, 6) map.get($spacing, 6) map.get($spacing, 5) map.get($spacing, 6);
+      border-radius: 1.1rem;
+      border: 1px solid rgba($color-neutral-900, 0.12);
+      background: rgba($color-neutral-100, 0.9);
+      box-shadow: 0 12px 30px rgba($color-neutral-900, 0.08);
+      transition: border-color $transition-snappy, box-shadow $transition-snappy, background $transition-snappy;
+
+      &:focus-within {
+        border-color: $color-accent-primary;
+        box-shadow: 0 0 0 4px rgba($color-accent-primary, 0.18);
+        background: rgba($color-neutral-100, 0.96);
+      }
+    }
+
+    .math-expression__toolbar {
+      top: map.get($spacing, 3);
+      inset-inline: map.get($spacing, 3) auto;
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  body.dark-mode.math-card .math-expression {
+    background: rgba($dark-surface-200, 0.92);
+    border-color: rgba($dark-ink-500, 0.3);
+    box-shadow: none;
+  }
+}

data/_sass/_notebooks.scss

@@ -99,7 +99,7 @@
 
 .notebook-article__tags li {
   background: rgba($color-accent-tertiary, 0.18);
-  color: $color-accent-tertiary;
+  color: $color-accent-tertiary-text;
   border-radius: 999px;
   padding: map.get($spacing, 1) map.get($spacing, 3);
   font-size: map.get($font-size-scale, xs);
@@ -256,32 +256,6 @@
   margin: 0;
 }
 
-.notebook-output--stream {
-  color: $color-ink-700;
-}
-
-.notebook-output--error {
-  color: $color-critical-600;
-  background: rgba($color-critical-200, 0.35);
-  border: 1px solid rgba($color-critical-400, 0.6);
-}
-
-.notebook-output__trace {
-  margin-top: map.get($spacing, 2);
-  white-space: pre-wrap;
-}
-
-.notebook-output__figure {
-  margin: 0;
-}
-
-.notebook-output__figure img {
-  width: 100%;
-  height: auto;
-  border-radius: 0.75rem;
-  box-shadow: 0 10px 30px rgba($color-ink-900, 0.15);
-}
-
 .notebook-output-plotly,
 .notebook-output-vega {
   min-height: 320px;
@@ -299,11 +273,6 @@
   margin: 0;
 }
 
-.notebook-output--widget {
-  font-style: italic;
-  color: $color-accent-secondary-text;
-}
-
 .notebook-segment {
   display: grid;
   gap: map.get($spacing, 2);

data/_sass/_package-docs.scss

@@ -7,18 +7,15 @@
 @use 'mixins' as *;
 @use 'variables' as *;
 
-// Color scheme - ReadTheDocs inspired
-$pkg-primary: #2980b9;
-// $pkg-primary is a brand colour for borders, gradients and rules. As text it
-// reads at 4.08:1 on the panel, short of WCAG AA, and a single darker value
-// would fail again on a dark surface — so text uses the theme's own accent and
-// secondary inks, which _theme.scss defines for each mode.
+// The docs share the theme's indigo and navy palette; their text uses the
+// effective mode's accent ink on both light and dark surfaces.
+$pkg-primary: $color-accent-primary;
 $pkg-primary-text: var(--color-accent-text);
 $pkg-muted-text: var(--color-text-secondary);
 $pkg-success: #27ae60;
 $pkg-warning: #f39c12;
 $pkg-danger: #e74c3c;
-$pkg-sidebar-bg: #343131;
+$pkg-sidebar-bg: $dark-surface-200;
 $pkg-sidebar-text: #b3b3b3;
 $pkg-sidebar-link: #9b9b9b;
 $pkg-sidebar-link-hover: #fff;
@@ -200,7 +197,7 @@ body.dark-mode {
       padding: 0.125rem 0.375rem;
       border-radius: 3px;
       font-size: 0.9em;
-      color: #c7254e;
+      color: var(--color-accent-text);
     }
 
     pre {
@@ -650,7 +647,7 @@ body.dark-mode {
     }
 
     a {
-      color: $pkg-primary;
+      color: $pkg-primary-text;
       text-decoration: none;
 
       &:hover {

data/_sass/_post-components.scss

@@ -9,6 +9,7 @@
 // ============================================================================
 
 @use 'mixins' as *;
+@use 'variables' as *;
 
 // ============================================================================
 // Social Share Component
@@ -51,11 +52,11 @@
 
     &:hover,
     &:focus {
-      background-color: var(--color-accent, #3277f6);
+      background-color: var(--color-accent);
       color: #ffffff;
-      border-color: var(--color-accent, #3277f6);
+      border-color: var(--color-accent);
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(50, 119, 246, 0.2);
+      box-shadow: 0 4px 12px rgba($color-accent-primary, 0.2);
     }
 
     &:active {
@@ -141,7 +142,7 @@
   }
 
   &__link {
-    color: var(--color-accent, #3277f6);
+    color: var(--color-accent);
     text-decoration: none;
     transition: color 0.2s ease;
 
@@ -197,14 +198,14 @@
     width: 80px;
     height: 80px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--color-accent, #3277f6), #5b8ef7);
+    background: linear-gradient(135deg, var(--color-accent, #4338ca), $color-accent-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.75rem;
     font-weight: 700;
     color: #ffffff;
-    box-shadow: 0 2px 8px rgba(50, 119, 246, 0.2);
+    box-shadow: 0 2px 8px rgba($color-accent-primary, 0.2);
   }
 
   &__content {
@@ -221,7 +222,7 @@
   &__affiliation {
     margin: 0 0 1rem 0;
     font-size: 0.95rem;
-    color: var(--color-accent, #3277f6);
+    color: var(--color-accent);
     font-weight: 500;
   }
 
@@ -268,11 +269,11 @@
 
     &:hover,
     &:focus {
-      background-color: var(--color-accent, #3277f6);
-      border-color: var(--color-accent, #3277f6);
+      background-color: var(--color-accent);
+      border-color: var(--color-accent);
       color: #ffffff;
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(50, 119, 246, 0.2);
+      box-shadow: 0 4px 12px rgba($color-accent-primary, 0.2);
     }
 
     svg {
@@ -344,7 +345,7 @@
   &__progress-bar {
     height: 100%;
     width: 0%;
-    background: linear-gradient(90deg, var(--color-accent, #3277f6), #5b8ef7);
+    background: linear-gradient(90deg, var(--color-accent, #4338ca), $color-accent-secondary);
     transition: width 0.2s ease;
   }
 
@@ -381,8 +382,8 @@
     &:hover,
     &:focus {
       background-color: var(--color-background-secondary, #f5f7ff);
-      border-color: var(--color-accent, #3277f6);
-      color: var(--color-accent, #3277f6);
+      border-color: var(--color-accent);
+      color: var(--color-accent);
     }
   }
 
@@ -434,16 +435,15 @@
 
       &:hover,
       &:focus {
-        color: var(--color-accent, #3277f6);
-        background-color: rgba(50, 119, 246, 0.05);
-        border-left-color: var(--color-accent, #3277f6);
+        color: var(--color-accent);
+        background-color: rgba($color-accent-primary, 0.05);
+        border-left-color: var(--color-accent);
       }
 
       &.is-active {
-        // On the tint below the plain accent reaches only 4.12:1.
-        color: var(--color-accent-text, #1d4ed8);
-        background-color: rgba(50, 119, 246, 0.1);
-        border-left-color: var(--color-accent, #3277f6);
+        color: var(--color-accent-text);
+        background-color: rgba($color-accent-primary, 0.1);
+        border-left-color: var(--color-accent);
         font-weight: 500;
       }
     }
@@ -454,14 +454,14 @@
     border-top: 1px solid var(--color-border, #e0e4ed);
     background-color: var(--color-background, #ffffff);
     font-size: 0.8125rem;
-    // The tertiary ink is for decoration: 2.41:1 in the light theme, 3.73:1 in the dark one.
+    // The secondary ink remains legible against the background in both modes.
     color: var(--color-text-secondary, #6f6862);
   }
 
   &__reading-progress {
     [data-progress-percent] {
       font-weight: 600;
-      color: var(--color-accent, #3277f6);
+      color: var(--color-accent);
     }
   }
 
@@ -763,6 +763,6 @@ body.dark-mode .difficulty-badge {
 .author-bio__social-link:focus-visible,
 .enhanced-toc a:focus-visible,
 .enhanced-toc__toggle:focus-visible {
-  outline: 3px solid var(--color-accent, #3277f6);
+  outline: 3px solid var(--color-accent);
   outline-offset: 2px;
 }

data/_sass/_print.scss

@@ -149,7 +149,7 @@ body.reading-mode {
   .reactions__status,
   .subscription-manage__status,
   .webmentions__status,
-  .enhanced-code-block__feedback {
+  .datalog-bibliography__back {
     display: none !important;
   }