@abreen/tada 1.15.13 → 1.16.1

package/src/style.scss

@@ -37,6 +37,32 @@
   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: 'Libertinus Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('libertinus-mono/LibertinusMono-Regular.woff2') format('woff2');
+  font-display: swap;
+}
+
 ::selection {
   color: var(--bg-color);
   background: var(--fg-color);
@@ -93,35 +119,14 @@ a.external:not(:has(.external-link-tail))::after {
   margin: 0;
 }
 
-.footnotes ol {
-  padding-left: 0;
-  list-style: none;
-}
-
 .footnotes li {
-  position: relative;
-  padding-left: 1.8em;
   margin-bottom: 8px;
 }
 
 a.footnote-ref {
   font-size: 0.8em;
-  font-weight: 600;
-  vertical-align: text-bottom;
-}
-
-.footnote-marker {
-  @include user-select(none);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  font-weight: 500;
-}
-
-a.footnote-ref,
-.footnote-marker {
-  font-feature-settings: 'ss06'; // squared numbers
+  vertical-align: super;
+  border-bottom: none;
 }
 
 .footnote-item {
@@ -131,10 +136,7 @@ a.footnote-ref,
   }
 }
 
-a.footnote-ref {
-  @include user-select(none);
-}
-
+a.footnote-ref,
 .footnotes .footnote-backref {
   display: inline-block;
 
@@ -416,7 +418,7 @@ a.breadcrumb {
     vertical-align: middle;
     content: '';
 
-    @include contained-mask(var(--icon-breadcrumb));
+    @include contained-mask(var(--icon-parent));
   }
 }
 

package/src/toc/style.scss

@@ -17,6 +17,7 @@
 body.code .toc ol li:has(a) {
   font-family: var(--mono-font);
   font-size: var(--mono-font-size);
+  font-feature-settings: var(--mono-font-feature-settings);
 }
 
 body.code .toc ol a {
@@ -30,6 +31,7 @@ body.code .toc ol a {
   font-family: var(--mono-font);
   font-size: var(--font-size-small);
   font-style: italic;
+  font-feature-settings: var(--mono-font-feature-settings);
   text-align: center;
   content: 'On this page';
 }
@@ -144,7 +146,7 @@ body.code .toc ol a {
 }
 
 .toc ol li.alert-item.note a::before {
-  @include contained-mask(var(--icon-note));
+  @include contained-mask(var(--icon-info));
 }
 
 .toc ol li.label {

package/src/trace/style.scss

@@ -186,6 +186,7 @@
   height: auto;
   font-family: var(--mono-font, monospace);
   font-size: 15px;
+  font-feature-settings: var(--mono-font-feature-settings, normal);
 
   .trace-separator {
     stroke: var(--fg2-color);

package/templates/_appearance-picker.html

@@ -0,0 +1,18 @@
+<div class="appearance-pickers" data-pagefind-ignore>
+  <div class="preference-picker font-picker" role="group" aria-label="Font style">
+    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="<%= site.defaultFont === 'sans' %>" disabled>
+      <span aria-hidden="true">Aa</span>
+    </button>
+    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="<%= site.defaultFont === 'serif' %>" disabled>
+      <span aria-hidden="true">Aa</span>
+    </button>
+  </div>
+  <div class="preference-picker contrast-picker" role="group" aria-label="Contrast">
+    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="<%= site.defaultContrast === 'standard' %>" disabled>
+      <span class="material-symbol-icon material-symbol-icon-contrast-standard" aria-hidden="true"></span>
+    </button>
+    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="<%= site.defaultContrast === 'high' %>" disabled>
+      <span class="material-symbol-icon material-symbol-icon-contrast-high" aria-hidden="true"></span>
+    </button>
+  </div>
+</div>

package/templates/_theme.scss

@@ -36,13 +36,25 @@
   --box-shadow: 0 2px 9px
     hsl(var(--tint-hue) calc(85% * var(--tint-amount)) 10% / 25%);
   --backdrop-filter: blur(10px);
-  --font:
+  --sans-font:
     'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
     'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol';
+  --sans-mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
+  --serif-font: 'Source Serif 4', 'Times New Roman', 'Times', serif;
+  --serif-preview-font: 'Times New Roman', 'Times', serif;
+  --serif-mono-font: 'Libertinus Mono', 'Courier New', 'Courier', monospace;
+  --sans-font-feature-settings:
+    'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
+  --sans-mono-font-feature-settings: normal;
+  --serif-font-feature-settings: normal;
+  --serif-mono-font-feature-settings: normal;
+  --font: var(--sans-font);
   --heading-font: var(--font);
   --heading-line-height: 1.3;
-  --mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
+  --mono-font: var(--sans-mono-font);
+  --font-feature-settings: var(--sans-font-feature-settings);
+  --mono-font-feature-settings: var(--sans-mono-font-feature-settings);
   --font-size: 1rem;
   --font-size-smaller: 0.9375em;
   --font-size-small: 0.8125em;
@@ -55,19 +67,30 @@
 
   // SVG icons
   // Mask icons (color-agnostic, painted via background-color: currentColor)
-  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M6 18 L20 4 M10 4 H20 V14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.8 4.2 Q12 2 13.2 4.2 L20.8 17.9 Q22 20 19.6 20 H4.4 Q2 20 3.2 17.9 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
-  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
   --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-tada: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -960 960 960'><path d='m121-172 151-426q4-11 13.48-17.5 9.47-6.5 20.3-6.5 7.22 0 13.52 2.5T331-612l277 276q5 5.4 7.5 11.7 2.5 6.3 2.5 13.5 0 10.8-6.5 20.3T594-277L167-126q-11 4-20.53.97-9.54-3.04-16.47-9.97-6.93-6.93-9.97-16.47Q117-161 121-172Zm791-506q-8 8-17 8t-17-8l-17-17q-13.8-14-34.5-14T792-695L589-491q-7.36 7-17.18 7T555-491q-7-7-7-16.82t7-17.18l203-204q28.07-28 67.53-28Q865-757 894-729l18 18q7 7.09 7 16.55 0 9.45-7 16.45ZM418-797q7.36-7 17.18-7t16.82 7l17 17q27 28.53 27 67.77Q496-673 469-644l-17 17q-7.36 7-17.18 7T418-627q-7-7-7-16.82t7-17.18l17-17q14-13.79 14-33.5T435-745l-18-18q-7-7.09-7-16.55 0-9.45 8-17.45Zm119-50q7-7 16.82-7t17.18 7l51 51q29 29 29 68.47 0 39.46-29 67.53L521-559q-7.09 7-16.55 7-9.45 0-17.45-7t-8-17.18q0-10.18 8-17.82l101-101q14-13.6 14-34t-14-34l-51-50q-7-7.36-7-17.18t7-16.82Zm340 407q-7 7-16.82 7T843-440l-51-51q-13.6-14-34-14t-34 14l-68 68q-7.36 7-17.18 7T622-423q-7-7-7-16.82t7-17.18l68-68q29-27 68.5-27.5T826-525l51 51q7 7.36 7 17.18T877-440Z'/></svg>");
+  /* TADA_MATERIAL_SYMBOL_VARIABLES */
 
   color-scheme: light dark;
 }
 
+:root[data-font-preference='serif'] {
+  --font: var(--serif-font);
+  --mono-font: var(--serif-mono-font);
+  --font-feature-settings: var(--serif-font-feature-settings);
+  --mono-font-feature-settings: var(--serif-mono-font-feature-settings);
+}
+
+:root[data-contrast-preference='high'] {
+  --fg-color: hsl(0deg 0% 0%);
+  --fg-color-translucent: hsl(0deg 0% 0% / 33%);
+  --fg2-color: hsl(0deg 0% 30%);
+  --bg-color: hsl(0deg 0% 100%);
+  --bg-color-translucent: hsl(0deg 0% 100% / 66%);
+  --bg2-color: #f4f4f4;
+  --bg2-color-translucent: rgb(244 244 244 / 66%);
+  --box-shadow: 0 2px 9px hsl(0deg 0% 0% / 25%);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --theme-color: <%= themeColorDark %>;
@@ -94,9 +117,16 @@
     --link-active-color: #fff;
     --warning-bg-color: hsl(36deg 77% 27%);
     --note-bg-color: hsl(209deg 90% 25%);
+  }
 
-    // SVG icons (dark overrides)
-    --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColorDark %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColorDark %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  :root[data-contrast-preference='high'] {
+    --fg-color: hsl(0deg 0% 100%);
+    --fg-color-translucent: hsl(0deg 0% 100% / 33%);
+    --fg2-color: hsl(0deg 0% 70%);
+    --bg-color: hsl(0deg 0% 0%);
+    --bg-color-translucent: hsl(0deg 0% 0% / 66%);
+    --bg2-color: hsl(0deg 0% 15%);
+    --bg2-color-translucent: hsl(0deg 0% 15% / 66%);
+    --box-shadow: 0 3px 8px hsl(0deg 0% 0% / 70%);
   }
 }

package/templates/_top.html

@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="en"
+      data-default-font-preference="<%= site.defaultFont %>"
+      data-default-contrast-preference="<%= site.defaultContrast %>"<% if (site.defaultFont === 'serif') { %>
+      data-font-preference="serif"<% } %><% if (site.defaultContrast === 'high') { %>
+      data-contrast-preference="high"<% } %>>
   <head>
     <% if (site.features.favicon) { %>
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -33,7 +37,39 @@
     <meta property="og:author" content="<%= page.author.name %>" />
     <% } %>
     <title><%= page.title %><%= site.titlePostfix %></title>
-    <script>document.documentElement.classList.add('js')</script>
+    <script>
+      document.documentElement.classList.add('js');
+      try {
+        const preference = window.localStorage.getItem('fontPreference');
+        const configured =
+          document.documentElement.dataset.defaultFontPreference;
+        if (
+          (preference === 'serif' || preference === 'sans') &&
+          preference !== configured
+        ) {
+          if (preference === 'serif') {
+            document.documentElement.dataset.fontPreference = 'serif';
+          } else {
+            delete document.documentElement.dataset.fontPreference;
+          }
+        }
+      } catch {}
+      try {
+        const preference = window.localStorage.getItem('contrastPreference');
+        const configured =
+          document.documentElement.dataset.defaultContrastPreference;
+        if (
+          (preference === 'high' || preference === 'standard') &&
+          preference !== configured
+        ) {
+          if (preference === 'high') {
+            document.documentElement.dataset.contrastPreference = 'high';
+          } else {
+            delete document.documentElement.dataset.contrastPreference;
+          }
+        }
+      } catch {}
+    </script>
     <% if (!isWatchMode) { %>
     <script type="speculationrules">
     {

package/templates/code.html

@@ -23,6 +23,7 @@
     </div>
     <% } %>
     <%= render('_footer.html') %>
+    <%= render('_appearance-picker.html') %>
   </main>
   <% if (page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>

package/templates/default.html

@@ -14,6 +14,7 @@
     <% } %>
     <%= content %>
     <%= render('_footer.html') %>
+    <%= render('_appearance-picker.html') %>
   </main>
   <% if (page.toc && page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>

package/templates/literate.html

@@ -8,6 +8,7 @@
     </div>
     <%= content %>
     <%= render('_footer.html') %>
+    <%= render('_appearance-picker.html') %>
   </main>
   <% if (page.toc && page.tocHtml) { %>
   <nav class="toc"><%= page.tocHtml %></nav>