@abreen/tada 1.16.1 → 1.16.3

package/src/search/style.scss

@@ -127,7 +127,9 @@ header {
     }
 
     ol a .title {
-      font-weight: 500;
+      // Values above 500 resolve to the supplied bold face when a custom
+      // family provides only fixed 400 and 700 weights.
+      font-weight: 600;
       line-height: var(--heading-line-height);
     }
 
@@ -138,10 +140,10 @@ header {
 
     ol li .excerpt {
       grid-row-start: 3;
-      height: 7.5ex;
+      height: 4.2em;
       overflow: hidden;
       font-size: var(--font-size-small);
-      line-height: 2.5ex;
+      line-height: 1.4;
       color: var(--fg2-color);
 
       mark {

package/src/style.scss

@@ -3,6 +3,8 @@
 @use 'base';
 @use 'layout';
 @use 'alerts';
+@include theme.custom-font-faces;
+@include theme.custom-font-tuning;
 
 @font-face {
   font-family: Inter;
@@ -93,9 +95,9 @@ a.disabled {
 .external-link-tail::after,
 a.external:not(:has(.external-link-tail))::after {
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
+  width: var(--icon-external-link-size);
+  height: var(--icon-external-link-size);
+  vertical-align: text-top;
   content: '';
 
   @include contained-mask(var(--icon-external-link));
@@ -272,6 +274,10 @@ 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;
 }
@@ -385,9 +391,11 @@ h6.has-subtitle {
 }
 
 .small-caps {
-  font-size: 0.9em;
-  font-weight: 600;
+  margin-right: -0.05em;
+  font-variant-caps: all-small-caps;
+  font-synthesis-small-caps: none;
   text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 dl {
@@ -413,8 +421,8 @@ a.breadcrumb {
 
   &::after {
     display: inline-block;
-    width: 1em;
-    height: 1em;
+    width: var(--icon-parent-size);
+    height: var(--icon-parent-size);
     vertical-align: middle;
     content: '';
 

package/src/timezone/index.ts

@@ -3,6 +3,7 @@ import {
   detectPeriodStyle,
   normalizeHM,
   to12Hour,
+  to12HourMarkup,
   type PeriodStyle,
 } from './time-format';
 
@@ -22,6 +23,23 @@ function parseHHMM(hhmm: string) {
   return Number(h) * 60 + Number(m);
 }
 
+function getRangeEnd(el: HTMLTimeElement): HTMLTimeElement | null {
+  const separator = el.nextSibling;
+  const candidate = separator?.nextSibling;
+  if (
+    separator?.nodeType !== 3 ||
+    !/^\s*(?:--|–|—)\s*$/.test(separator.textContent ?? '') ||
+    candidate?.nodeType !== 1
+  ) {
+    return null;
+  }
+
+  const end = candidate as HTMLElement;
+  return end.tagName === 'TIME' && end.hasAttribute('datetime')
+    ? (end as HTMLTimeElement)
+    : null;
+}
+
 // Compute UTC offset (in minutes) for a time zone at given date (DST-aware)
 function getOffsetMinutes(tz: string, date: Date): number {
   const dtf = new Intl.DateTimeFormat('en-US', {
@@ -172,11 +190,33 @@ export default (window: Window) => {
       const originalStyle = periodStyles.get(el) ?? null;
       const originalIsPm = Math.floor(baseMinutes / 60) >= 12;
       const periodChanged = originalIsPm !== h >= 12 || dayShift !== 0;
-      const style =
+      let style =
         originalStyle === null && periodChanged
           ? pagePeriodStyle
           : originalStyle;
-      el.innerHTML = to12Hour(h, m, style) + suffix;
+
+      const rangeEnd = getRangeEnd(el);
+      const rangeEndDatetime = rangeEnd?.getAttribute('datetime');
+      const rangeEndMinutes = rangeEndDatetime
+        ? parseHHMM(rangeEndDatetime)
+        : NaN;
+      if (
+        originalStyle === null &&
+        rangeEnd !== null &&
+        !isNaN(rangeEndMinutes)
+      ) {
+        const [rangeEndHour] = normalizeHM(rangeEndMinutes + deltaMinutes);
+        style =
+          h >= 12 === rangeEndHour >= 12
+            ? null
+            : (periodStyles.get(rangeEnd) ?? pagePeriodStyle);
+      }
+
+      const timeZone =
+        isDefault || style === null || rangeEnd !== null
+          ? ''
+          : ` <span class="small-caps">${target.abbreviation}</span>`;
+      el.innerHTML = to12HourMarkup(h, m, style) + timeZone + suffix;
 
       if (isDefault) {
         el.classList.remove('is-modified');

package/src/timezone/style.scss

@@ -1,9 +1,3 @@
-time[datetime] {
-  &.is-modified {
-    text-decoration: var(--fg2-color) underline dotted;
-  }
-}
-
 span.next-prev-day {
   font-style: italic;
   color: var(--fg2-color);

package/src/timezone/time-format.ts

@@ -35,6 +35,19 @@ export function to12Hour(
   return `${hour12}:${pad(m)} ${period}`;
 }
 
+export function to12HourMarkup(
+  h: number,
+  m: number,
+  style: PeriodStyle | null = DEFAULT_PERIOD_STYLE,
+) {
+  const hour12 = ((h + 11) % 12) + 1;
+  if (!style) {
+    return `${hour12}:${pad(m)}`;
+  }
+  const period = h >= 12 ? style[1] : style[0];
+  return `${hour12}:${pad(m)} <span class="small-caps">${period}</span>`;
+}
+
 export function normalizeHM(totalMinutes: number) {
   const mins = ((totalMinutes % 1440) + 1440) % 1440;
   const h = Math.floor(mins / 60);

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-size-adjust: var(--mono-font-size-adjust);
   font-feature-settings: var(--mono-font-feature-settings);
 }
 
@@ -30,6 +31,7 @@ body.code .toc ol a {
   display: block;
   font-family: var(--mono-font);
   font-size: var(--font-size-small);
+  font-size-adjust: var(--mono-font-size-adjust);
   font-style: italic;
   font-feature-settings: var(--mono-font-feature-settings);
   text-align: center;
@@ -131,22 +133,26 @@ body.code .toc ol a {
   position: relative;
 }
 
+.toc ol li.alert-item.warning {
+  --toc-alert-icon: var(--icon-warning-compact);
+  --toc-alert-icon-size: var(--icon-warning-compact-size);
+}
+
+.toc ol li.alert-item.note {
+  --toc-alert-icon: var(--icon-info-compact);
+  --toc-alert-icon-size: var(--icon-info-compact-size);
+}
+
 .toc ol li.alert-item.warning a::before,
 .toc ol li.alert-item.note a::before {
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--toc-alert-icon-size);
+  height: var(--toc-alert-icon-size);
   margin-right: 4px;
-  vertical-align: bottom;
+  vertical-align: sub;
   content: '';
-}
-
-.toc ol li.alert-item.warning a::before {
-  @include contained-mask(var(--icon-warning));
-}
 
-.toc ol li.alert-item.note a::before {
-  @include contained-mask(var(--icon-info));
+  @include contained-mask(var(--toc-alert-icon));
 }
 
 .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-size-adjust: var(--mono-font-size-adjust, none);
   font-feature-settings: var(--mono-font-feature-settings, normal);
 
   .trace-separator {

package/templates/_theme.scss

@@ -1,3 +1,13 @@
+@mixin custom-font-faces {
+  /* Site-configured font faces are inserted below. */
+  /* TADA_CUSTOM_FONT_FACES */
+}
+
+@mixin custom-font-tuning {
+  /* Site-configured font tuning is inserted below. */
+  /* TADA_CUSTOM_FONT_TUNING */
+}
+
 :root {
   --theme-color: <%= themeColorLight %>;
   --theme-color-text: <%= themeColorTextLight %>;
@@ -41,20 +51,22 @@
     '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-font: <%= serifFontStack %>;
   --serif-preview-font: 'Times New Roman', 'Times', serif;
-  --serif-mono-font: 'Libertinus Mono', 'Courier New', 'Courier', monospace;
+  --serif-mono-font: <%= serifMonoFontStack %>;
   --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;
+  --serif-font-feature-settings: <%= serifFontFeatureSettings %>;
+  --serif-mono-font-feature-settings: <%= serifMonoFontFeatureSettings %>;
   --font: var(--sans-font);
   --heading-font: var(--font);
   --heading-line-height: 1.3;
   --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-adjust: none;
+  --mono-font-size-adjust: none;
   --font-size: 1rem;
   --font-size-smaller: 0.9375em;
   --font-size-small: 0.8125em;

package/templates/_top.html

@@ -54,21 +54,33 @@
           }
         }
       } catch {}
+      let contrastPreference;
       try {
-        const preference = window.localStorage.getItem('contrastPreference');
-        const configured =
-          document.documentElement.dataset.defaultContrastPreference;
+        contrastPreference = window.localStorage.getItem('contrastPreference');
+      } catch {}
+      const configuredContrast =
+        document.documentElement.dataset.defaultContrastPreference;
+      if (
+        contrastPreference !== 'high' &&
+        contrastPreference !== 'standard'
+      ) {
+        contrastPreference = configuredContrast;
         if (
-          (preference === 'high' || preference === 'standard') &&
-          preference !== configured
+          configuredContrast !== 'high' &&
+          typeof window.matchMedia === 'function'
         ) {
-          if (preference === 'high') {
-            document.documentElement.dataset.contrastPreference = 'high';
-          } else {
-            delete document.documentElement.dataset.contrastPreference;
-          }
+          try {
+            if (window.matchMedia('(prefers-contrast: more)').matches) {
+              contrastPreference = 'high';
+            }
+          } catch {}
         }
-      } catch {}
+      }
+      if (contrastPreference === 'high') {
+        document.documentElement.dataset.contrastPreference = 'high';
+      } else {
+        delete document.documentElement.dataset.contrastPreference;
+      }
     </script>
     <% if (!isWatchMode) { %>
     <script type="speculationrules">

package/templates/code.html

@@ -3,7 +3,7 @@
 <div class="main-content">
   <main class="body" data-pagefind-body>
     <div class="file-header">
-      <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
+      <h1 class="file-title" data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
       <%= render('_download.html') %>
     </div>
     <div class="code-body">

package/assets/material-symbols/contrast_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm40-83q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z"/></svg>

package/assets/material-symbols/contrast_rtl_off_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M819-28 701-146q-48 32-103.5 49T480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-62 17-117.5T146-701L27-820l57-57L876-85l-57 57ZM480-160q45 0 85.5-12t76.5-33L480-367v207Zm335-100-59-59q21-35 32.5-75.5T800-480q0-133-93.5-226.5T480-800v205L260-815q48-31 103.5-48T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 61-17 116.5T815-260Z"/></svg>

package/assets/material-symbols/info_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/assets/material-symbols/north_east_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>

package/assets/material-symbols/search_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/assets/material-symbols/south_east_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-200v-80h264L160-744l56-56 464 464v-264h80v400H360Z"/></svg>

package/assets/material-symbols/tag_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m240-160 40-160H120l20-80h160l40-160H180l20-80h160l40-160h80l-40 160h160l40-160h80l-40 160h160l-20 80H660l-40 160h160l-20 80H600l-40 160h-80l40-160H360l-40 160h-80Zm140-240h160l40-160H420l-40 160Z"/></svg>

package/assets/material-symbols/warning_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>