@abreen/tada 1.17.1 → 1.18.0

package/src/style.scss

@@ -1,540 +1,28 @@
-@use 'mixins' as *;
+// The only Sass entry point, imported by src/index.ts and compiled once per
+// build into index.bundle.*.css. Every other Sass file is a partial loaded
+// here: shared partials live in src/, component styles in
+// src/<component>/_index.scss. Modules are emitted in this order, so later
+// rules win specificity ties.
+
+// Theme custom properties, generated from the site config at build time
 @use 'config/theme';
 @use 'base';
 @use 'layout';
 @use 'alerts';
-@include theme.custom-font-faces;
-@include theme.custom-font-tuning;
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 100 900;
-  src: url('inter/InterVariable.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: italic;
-  font-weight: 100 900;
-  src: url('inter/InterVariable-Italic.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Google Sans Code';
-  font-style: normal;
-  font-weight: 300 800;
-  src: url('google-sans-code/GoogleSansCodeVariable.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Google Sans Code';
-  font-style: italic;
-  font-weight: 300 800;
-  src: url('google-sans-code/GoogleSansCodeVariable-Italic.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Source Serif 4';
-  font-style: normal;
-  font-weight: 200 900;
-  src: url('source-serif-4/SourceSerif4-VariableFont_opsz,wght.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Source Serif 4';
-  font-style: italic;
-  font-weight: 200 900;
-  src: url('source-serif-4/SourceSerif4-Italic-VariableFont_opsz,wght.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: normal;
-  font-weight: 400;
-  src: url('courier-prime/CourierPrime-Regular.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: italic;
-  font-weight: 400;
-  src: url('courier-prime/CourierPrime-Italic.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: normal;
-  font-weight: 700;
-  src: url('courier-prime/CourierPrime-Bold.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: italic;
-  font-weight: 700;
-  src: url('courier-prime/CourierPrime-BoldItalic.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-::selection {
-  color: var(--bg-color);
-  background: var(--fg-color);
-}
-
-:focus-visible {
-  outline: 2px solid var(--theme-color);
-  outline-offset: 1px;
-}
-
-a.disabled {
-  color: var(--fg-color-translucent);
-  text-decoration-color: var(--fg-color-translucent);
-  cursor: not-allowed;
-
-  @media (hover: hover) {
-    &:hover {
-      color: var(--fg-color-translucent);
-      text-decoration-line: none;
-    }
-  }
-}
-
-.external-link-tail {
-  white-space: nowrap;
-}
-
-.external-link-tail::after,
-a.external:not(:has(.external-link-tail))::after {
-  vertical-align: text-top;
-
-  @include contained-mask(var(--icon-external-link));
-}
-
-.external-link-tail::after {
-  display: inline;
-
-  // With zero font metrics, block-end padding paints down from text-top.
-  padding-block-end: var(--icon-external-link-size);
-  padding-inline-start: var(--icon-external-link-size);
-  font-size: 0;
-  line-height: 0;
-  content: '\2060' / '';
-}
-
-a.external:not(:has(.external-link-tail))::after {
-  display: inline-block;
-  width: var(--icon-external-link-size);
-  height: var(--icon-external-link-size);
-  content: '';
-}
-
-.footnotes {
-  padding-top: 32px;
-  margin-top: calc(var(--thematic-break-margin) / 2);
-  font-size: 0.9em;
-  border-top: 3px solid var(--bg2-color);
-}
-
-.footnotes .title {
-  @include user-select(none);
-
-  font-size: larger;
-  font-weight: 700;
-}
-
-.footnotes p {
-  margin: 0;
-}
-
-.footnotes li {
-  margin-bottom: 8px;
-}
-
-a.footnote-ref {
-  font-size: 0.8em;
-  vertical-align: super;
-  border-bottom: none;
-}
-
-.footnote-item {
-  &:target {
-    outline: 2px solid var(--theme-color);
-    outline-offset: 1px;
-  }
-}
-
-a.footnote-ref,
-.footnotes .footnote-backref {
-  display: inline-block;
-
-  @include user-select(none);
-}
-
-hr {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  margin: var(--section-padding) 0;
-  border: none;
-}
-
-hr::after {
-  display: block;
-  width: 160px;
-  height: 12px;
-  content: '';
-  background-color: var(--fg2-color);
-  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'><rect x='0' y='5.5' width='96' height='1' fill='black'/><path d='M 64,6 C 71,6 80,4.5 80,1 C 80,4.5 89,6 96,6 C 89,6 80,7.5 80,11 C 80,7.5 71,6 64,6 Z' fill='black'/><rect x='64' y='5.5' width='96' height='1' fill='black'/></svg>");
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-}
-
-button,
-a.button,
-input[type='submit'] {
-  padding: 0.25em 0.66em;
-  font-family: var(--font);
-  font-size: var(--font-size-small);
-  font-weight: 500;
-  color: var(--fg-color);
-  text-decoration: none;
-  background: var(--bg-color);
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-}
-
-button:disabled,
-input[type='submit']:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-button:active:not(:disabled),
-a.button:not(.disabled):active,
-input[type='submit']:active:not(:disabled) {
-  color: var(--bg-color) !important;
-  background: var(--link-active-color) !important;
-}
-
-@media (hover: hover) {
-  button:hover:not(:disabled),
-  a.button:not(.disabled):hover,
-  input[type='submit']:hover:not(:disabled) {
-    cursor: pointer;
-    background: var(--bg2-color);
-  }
-}
-
-button:focus,
-a.button:focus,
-input[type='submit']:focus,
-input[type='text']:focus,
-input[type='search']:focus,
-select:focus {
-  outline: 2px solid var(--theme-color);
-  outline-offset: 1px;
-  background-color: var(--bg2-color);
-  border-color: var(--fg-color);
-}
-
-button.icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  font-style: normal;
-  font-weight: 400;
-  vertical-align: top;
-  border: none;
-  border-radius: 999px;
-}
-
-button.icon-button:focus {
-  background-color: var(--bg2-color);
-}
-
-ol.styled-list,
-ul.styled-list {
-  font-weight: 700;
-  color: var(--theme-color-text);
-}
-
-ul.styled-list {
-  // Make bullet points slightly bigger
-  font-size: 1.2em;
-}
-
-ol li .styled-list-item {
-  font-size: 1em;
-  font-weight: var(--font-weight);
-  color: var(--fg-color);
-}
-
-ul li .styled-list-item {
-  font-size: 0.8333em;
-  font-weight: var(--font-weight);
-  color: var(--fg-color);
-}
-
-ul {
-  list-style-type: square;
-}
-
-ul ul {
-  list-style-type: disc;
-}
-
-ul ul ul {
-  list-style-type: circle;
-}
-
-ul ul ul ul {
-  list-style-type: square;
-}
-
-ol {
-  list-style-type: decimal;
-}
-
-:root[data-font-preference='serif'] ol > li::marker {
-  font-variant-numeric: oldstyle-nums;
-}
-
-ol ol {
-  list-style-type: lower-alpha;
-}
-
-ol ol ol {
-  list-style-type: lower-roman;
-}
-
-ol ol ol ol {
-  list-style-type: decimal;
-}
-
-ol ol ol ol ol {
-  list-style-type: lower-alpha;
-}
-
-table {
-  margin: 1rem 0;
-  overflow: scroll;
-  font-size: var(--font-size-smaller);
-  border-collapse: collapse;
-}
-
-thead {
-  text-align: left;
-}
-
-th,
-td {
-  border-bottom: 1px solid var(--fg-color);
-}
-
-th {
-  font-weight: 600;
-  color: var(--theme-color-text);
-}
-
-th,
-td {
-  padding: var(--table-padding) var(--table-padding) var(--table-padding) 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-tbody tr:last-child td {
-  border-bottom: none;
-}
-
-section {
-  padding: calc(5 * var(--gap)) calc(2 * var(--gap));
-  margin: 0 calc(-1 * var(--gap)) 2rem;
-  background: linear-gradient(
-    0deg,
-    transparent 0,
-    var(--bg2-color) 3rem,
-    var(--bg2-color) calc(100% - 3rem),
-    transparent 100%
-  );
-
-  .alert {
-    background: var(--bg-color);
-  }
-}
-
-section h2:first-child,
-section h3:first-child,
-section h4:first-child,
-section h5:first-child,
-section h6:first-child {
-  font-style: italic;
-  font-weight: 600;
-}
-
-section > p:last-child,
-section > div:last-child {
-  margin-bottom: 0;
-}
-
-section > h2 + p {
-  margin-top: 16px;
-}
-
-blockquote {
-  font-size: 1.2em;
-  font-style: italic;
-  color: var(--fg-color);
-}
-
-.heading-subtitle {
-  font-style: italic;
-}
-
-h1 .heading-subtitle,
-h2 .heading-subtitle,
-h3 .heading-subtitle,
-h4 .heading-subtitle,
-h5 .heading-subtitle,
-h6 .heading-subtitle {
-  margin-left: 1rem;
-  font-weight: 400;
-}
-
-h3.has-subtitle,
-h4.has-subtitle,
-h5.has-subtitle,
-h6.has-subtitle {
-  padding-bottom: 0.5em;
-  margin-top: 6rem;
-  margin-bottom: 0.5em;
-  border-bottom: 1px solid var(--fg-color);
-}
-
-.small-caps {
-  margin-right: -0.05em;
-  font-variant-caps: all-small-caps;
-  font-synthesis-small-caps: none;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-dl {
-  dt {
-    font-weight: 600;
-    color: var(--theme-color-text);
-  }
-
-  dd > *:first-child {
-    margin-top: 0;
-  }
-}
-
-dfn {
-  font-style: italic;
-  font-weight: 500;
-  color: var(--theme-color-text);
-}
-
-a.breadcrumb {
-  @include user-select(none);
-  @include subdued-link;
-
-  &::after {
-    display: inline-block;
-    width: var(--icon-parent-size);
-    height: var(--icon-parent-size);
-    vertical-align: middle;
-    content: '';
-
-    @include contained-mask(var(--icon-parent));
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-.avatar {
-  max-width: 100px;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  border-radius: 999px;
-}
-
-figure.bio {
-  float: left;
-  max-width: 125px;
-  margin: 1rem 1rem 1rem 0;
-
-  @media (width > 540px) {
-    max-width: 200px;
-  }
-
-  .avatar {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  figcaption {
-    margin-top: var(--gap);
-    font-style: italic;
-    text-align: center;
-  }
-}
-
-kbd {
-  display: inline-block;
-  padding: 1px 5px;
-  font-family: var(--font);
-  font-size: var(--font-size-small);
-  font-weight: 500;
-  border: 1px solid var(--fg-color);
-  border-radius: 4px;
-  box-shadow: 0 2px 0 var(--fg-color);
-}
-
-select {
-  position: relative;
-  padding: 4px;
-  font-family: var(--font);
-  font-size: inherit;
-  color: var(--fg-color);
-  background: var(--bg-color);
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-}
-
-// Shiki dual-theme support (defaultColor: false, CSS custom properties only,
-// no inline color/background-color, so no !important needed)
-.shiki span {
-  color: var(--shiki-light);
-}
-
-@media (prefers-color-scheme: dark) {
-  .shiki span {
-    color: var(--shiki-dark);
-  }
-}
+@use 'fonts';
+@use 'content';
+@use 'material-symbols';
+@use 'anchor';
+@use 'code';
+@use 'literate';
+@use 'header';
+@use 'print';
+@use 'question';
+@use 'search';
+@use 'slides';
+@use 'timezone';
+@use 'toc';
+@use 'trace';
+@use 'appearance-picker';
+@use 'navigate';
+@use 'page-update';

package/src/toc/index.ts

@@ -45,7 +45,7 @@ function getHeadingsAndAlerts(
 ): (HTMLHeadingElement | HTMLDivElement)[] {
   return Array.from(
     parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body > div.alert, .body section > div.alert',
+      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert',
     ),
   );
 }
@@ -55,7 +55,7 @@ function getTocElements(
 ): (HTMLHeadingElement | HTMLDivElement | HTMLHRElement)[] {
   return Array.from(
     parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body > div.alert, .body section > div.alert, .body > hr',
+      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert, :is(.body, .page-content) > hr',
     ),
   );
 }

package/templates/_author.html

@@ -3,13 +3,13 @@
   <% if (page.author.url) { %>
   <a href="<%- encodeAuthoredUrl(page.author.url) %>">
   <% } %>
-  <span class="text"><%= page.author.name %></span>
+  <span class="text"><%- page.author.name %></span>
   <% if (page.author.avatar) { %>
   <img
     width="32"
     height="32"
     src="<%- encodeAuthoredUrl(page.author.avatar) %>"
-    alt="Picture of <%= page.author.name %>"
+    alt="Picture of <%- page.author.name %>"
     class="avatar"
   />
   <% } else { %>

package/templates/_download.html

@@ -1 +1 @@
-<a class="button" href="<%= page.codeFilePath %>" download="<%= page.downloadName %>" data-pagefind-ignore>Download</a>
+<a class="button" href="<%= page.codeFilePath %>" download="<%- page.downloadName %>" data-pagefind-ignore>Download</a>

package/templates/_footer.html

@@ -1,5 +1,5 @@
 <% if (site.features.footer) { %>
 <footer data-pagefind-ignore>
-  <p>Built using <a href="https://github.com/abreen/Tada" target="_blank" rel="noopener noreferrer">Tada</a> <%= tadaVersion %></p>
+  <p>Built using <a href="https://github.com/abreen/Tada" target="_blank" rel="noopener noreferrer">Tada</a> <%- tadaVersion %></p>
 </footer>
 <% } %>

package/templates/_heading.html

@@ -1,14 +1,14 @@
 <div class="title-and-info" data-pagefind-body>
   <% if (page.parent) { %>
-  <a class="breadcrumb" href="<%- encodeAuthoredUrl(page.parent) %>" data-pagefind-ignore><%= page.parentLabel %></a>
+  <a class="breadcrumb" href="<%- encodeAuthoredUrl(page.parent) %>" data-pagefind-ignore><%- page.parentLabel %></a>
   <% } %>
   <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
 
   <div class="info" data-pagefind-ignore>
     <% if (page.published) { %>
     <div class="publish-date">
-      <time datetime="<%= isoDate(page.published) %>">
-        <%= readableDate(page.published) %>
+      <time datetime="<%- isoDate(page.published) %>">
+        <%- readableDate(page.published) %>
       </time>
     </div>
     <% } %>

package/templates/_nav.html

@@ -1,7 +1,7 @@
 <nav>
 <% config('nav').forEach(function(section) { %>
   <div>
-    <p><%= section.title %></p>
+    <p><%- section.title %></p>
     <ul>
       <% section.links.forEach(function(link) { %>
         <li>
@@ -10,7 +10,7 @@
             <% if (!link.disabled) { %>href="<%- encodeAuthoredUrl(link.internal || link.external) %>"<% } %>
             <% if (link.external) { %>target="_blank" rel="noopener noreferrer"<% } %>
           >
-            <%= link.text %></a>
+            <%- link.text %></a>
         </li>
       <% }) %>
     </ul>

package/templates/_page-bottom.html

@@ -0,0 +1,6 @@
+<% if (site.features.footer || site.features.pickers) { %>
+<div class="page-bottom" data-pagefind-ignore>
+  <%= render('_footer.html') %>
+  <%= render('_appearance-picker.html') %>
+</div>
+<% } %>