@abreen/tada 1.16.2 → 1.16.3

package/build/custom-fonts.ts

@@ -119,7 +119,8 @@ const HEADING_SIZES = Object.freeze({
 });
 
 function formatCssNumber(value: number): string {
-  return Number(value.toFixed(4)).toString();
+  const rounded = Number(value.toFixed(4));
+  return (rounded === 0 && value !== 0 ? value : rounded).toString();
 }
 
 export function renderCustomFontTuningScss(
@@ -130,6 +131,18 @@ export function renderCustomFontTuningScss(
   const monoTuning = fontOverrides?.serifMono?.tuning;
   const rootSelector = ":root[data-font-preference='serif']";
 
+  if (serifTuning?.fontSizeAdjust !== undefined) {
+    rules.push(
+      `  ${rootSelector} {\n    --font-size-adjust: cap-height ${formatCssNumber(serifTuning.fontSizeAdjust)};\n  }`,
+    );
+  }
+
+  if (monoTuning?.fontSizeAdjust !== undefined) {
+    rules.push(
+      `  ${rootSelector} {\n    --mono-font-size-adjust: cap-height ${formatCssNumber(monoTuning.fontSizeAdjust)};\n  }`,
+    );
+  }
+
   if (serifTuning?.scale !== undefined) {
     rules.push(
       `  ${rootSelector} {\n    --font-size: ${formatCssNumber(serifTuning.scale)}rem;\n  }`,

package/build/types.d.ts

@@ -8,11 +8,13 @@ export interface SerifFontTuning {
   lineHeight?: number;
   headingScale?: number;
   headingWeight?: 400 | 700;
+  fontSizeAdjust?: number;
 }
 
 export interface SerifMonoFontTuning {
   scale?: number;
   lineHeight?: number;
+  fontSizeAdjust?: number;
 }
 
 export interface FontFamilyOverride<Tuning = unknown> {

package/init/content/markdown.md

@@ -414,7 +414,8 @@ Here's a time range:
 <time datetime="12:45">12:45</time>--<time datetime="13:45">1:45 pm</time>
 
 - When a `<time>` element is adjusted,
-  * the appearance of the element changes slightly to indicate it was updated,
+  * the selected time zone abbreviation is shown after its AM/PM period (or
+    after the final endpoint of a time range),
   * hovering over the text produces a tooltip telling the user the original time
     and time zone, and
   * if the time adjustment crosses a day boundary, *(next day)* or *(prev. day)*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "png-to-ico": "^3.0.1",
     "quote-quote": "^1.2.0",
     "sass": "^1.99.0",
-    "sharp": "^0.34.5",
+    "sharp": "^0.35.3",
     "shiki": "^4.0.2",
     "string-strip-html": "^8.5.0"
   },

package/schema/site.schema.json

@@ -93,7 +93,8 @@
             "scale": { "$ref": "#/$defs/fontScale" },
             "lineHeight": { "$ref": "#/$defs/fontLineHeight" },
             "headingScale": { "$ref": "#/$defs/fontScale" },
-            "headingWeight": { "type": "integer", "enum": [400, 700] }
+            "headingWeight": { "type": "integer", "enum": [400, 700] },
+            "fontSizeAdjust": { "$ref": "#/$defs/fontSizeAdjust" }
           },
           "additionalProperties": false
         }
@@ -117,7 +118,8 @@
           "type": "object",
           "properties": {
             "scale": { "$ref": "#/$defs/fontScale" },
-            "lineHeight": { "$ref": "#/$defs/fontLineHeight" }
+            "lineHeight": { "$ref": "#/$defs/fontLineHeight" },
+            "fontSizeAdjust": { "$ref": "#/$defs/fontSizeAdjust" }
           },
           "additionalProperties": false
         }
@@ -126,6 +128,7 @@
     },
     "fontScale": { "type": "number", "minimum": 0.75, "maximum": 1.5 },
     "fontLineHeight": { "type": "number", "minimum": 1, "maximum": 2.5 },
+    "fontSizeAdjust": { "type": "number", "exclusiveMinimum": 0 },
     "publicWoff2Path": {
       "type": "string",
       "minLength": 6,

package/src/_base.scss

@@ -32,6 +32,7 @@ h1 {
 body {
   font-family: var(--font);
   font-size: var(--font-size);
+  font-size-adjust: var(--font-size-adjust);
   font-weight: var(--font-weight);
   font-feature-settings: var(--font-feature-settings);
   line-height: var(--line-height);
@@ -83,9 +84,18 @@ pre,
 tt,
 code {
   font-family: var(--mono-font);
+  font-size-adjust: var(--mono-font-size-adjust);
   font-feature-settings: var(--mono-font-feature-settings);
 }
 
+[font-family='var(--mono-font)'] {
+  font-size-adjust: var(--mono-font-size-adjust);
+}
+
+.katex {
+  font-size-adjust: none;
+}
+
 tt,
 code {
   padding: var(--mono-padding);

package/src/appearance-picker/style.scss

@@ -78,6 +78,7 @@
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
     sans-serif;
+  font-size-adjust: none;
   font-feature-settings: normal;
 }
 
@@ -85,6 +86,7 @@
   // Avoid requesting the bundled serif face just to render the inactive
   // preview on a default sans page.
   font-family: var(--serif-preview-font);
+  font-size-adjust: none;
   font-feature-settings: var(--serif-font-feature-settings);
 }
 
@@ -95,6 +97,7 @@
 
 :root[data-font-preference='serif'] .font-picker-option-serif {
   font-family: var(--serif-font);
+  font-size-adjust: var(--font-size-adjust);
 }
 
 .preference-picker-option[aria-pressed='true'] {

package/src/code.scss

@@ -35,6 +35,7 @@ body.code {
   padding: 0 0.75em;
   margin-right: var(--gap);
   font-family: var(--mono-font);
+  font-size-adjust: var(--mono-font-size-adjust);
   font-feature-settings: var(--mono-font-feature-settings);
   color: var(--fg2-color);
   text-align: right;

package/src/style.scss

@@ -391,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 {

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;

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

@@ -65,6 +65,8 @@
   --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;