@abreen/tada 1.0.2 → 1.2.0

package/src/search/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 header {
   .search-controls {
@@ -8,27 +8,7 @@ header {
     gap: 0.5rem;
 
     input.search {
-      background-color: var(--bg-color);
-      background-image: 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='hsl(20deg 8% 8%)' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-      background-repeat: no-repeat;
-      background-position: left 6px center;
-      background-size: 16px 16px;
-      padding-left: 2rem;
-
-      border-radius: 18px;
       flex: 1;
-      min-width: 0;
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      input.search {
-        background-image: 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='hsl(20deg 20% 90%)' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-      }
     }
   }
 
@@ -48,13 +28,6 @@ header {
   .results {
     opacity: 0;
     pointer-events: none;
-
-    @media (prefers-reduced-motion: no-preference) {
-      transform: translateY(-8px);
-      transition:
-        opacity 0.25s ease,
-        transform 0.25s ease;
-    }
     margin: 0 auto;
     background: var(--bg-color);
     color: var(--fg-color);
@@ -68,6 +41,13 @@ header {
     min-height: 80px;
     @include user-select(none);
 
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(-8px);
+      transition:
+        opacity 0.25s ease,
+        transform 0.25s ease;
+    }
+
     .results-info {
       display: flex;
       align-items: center;

package/src/style.scss

@@ -1,5 +1,8 @@
-@import './_mixins.scss';
-@import 'config/theme';
+@use 'mixins' as *;
+@use 'config/theme';
+@use 'base';
+@use 'layout';
+@use 'alerts';
 
 @font-face {
   font-family: 'Inter';
@@ -34,38 +37,6 @@
     format('woff2');
 }
 
-:root {
-  --box-border-width: 5px;
-
-  --gap: 12px;
-  --border-radius: 12px;
-  --control-border-width: 2px;
-  --label-border-width: 2px;
-  --focus-border-width: 3px;
-  --table-padding: 12px;
-  --details-padding: 12px;
-  --section-padding: 64px;
-
-  --main-width: 900px;
-
-  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 8% 8%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 20% 90%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 6% 60%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='hsl(20deg 6% 55%)' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='black' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-dark-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='white' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-
-  --icon-external-translucent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-  --icon-external-translucent-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='hsl(20deg 85% 90%)' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-warning-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-p {
-  margin: 0 0 1rem 0;
-}
-
 ::selection {
   color: var(--bg-color);
   background: var(--fg-color);
@@ -76,116 +47,18 @@ p {
   outline-offset: 1px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--heading-font);
-  -webkit-break-after: avoid;
-  break-after: avoid;
-  line-height: 1.3;
-
-  // Enable Inter's ligatures (for style)
-  font-feature-settings: 'dlig';
-}
-
-h1 {
-  font-size: 250%;
-  font-weight: 700;
-}
-
-.info {
-  @include user-select(none);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: baseline;
-  color: var(--fg2-color);
-  font-size: var(--font-size-smaller);
-
-  @media (width < 450px) {
-    grid-template-columns: 1fr;
-  }
-
-  aside.author {
-    a {
-      text-decoration: none;
-
-      .text {
-        color: var(--fg2-color);
-        text-decoration: underline;
-        text-decoration-color: var(--fg2-color);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 3px;
-      }
-    }
-
-    .avatar {
-      width: 24px;
-      height: 24px;
-      vertical-align: middle;
-      margin-left: 4px;
-    }
-  }
-}
-
-body {
-  color: var(--fg-color);
-  background-color: var(--bg-color);
-
-  font-family: var(--font);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-
-  /*
-   * Enable Inter's features for legibility:
-   * ss03 - round quotes & commas
-   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
-   */
-  font-feature-settings: 'ss03', 'ss04';
-
-  @media (prefers-color-scheme: dark) {
-    & {
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-}
-
-html {
-  overscroll-behavior: none;
-  background: var(--bg-color);
-}
-
-a {
-  color: var(--fg-color);
-  text-decoration-color: var(--fg2-color);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-}
-
 a.disabled {
   color: var(--fg-color-translucent);
   text-decoration-color: var(--fg-color-translucent);
   cursor: not-allowed;
-}
 
-@media (hover: hover) {
-  a:hover {
-    color: var(--fg2-color);
-  }
-
-  a.disabled:hover {
-    color: var(--fg-color-translucent);
+  @media (hover: hover) {
+    &:hover {
+      color: var(--fg-color-translucent);
+    }
   }
 }
 
-a:active {
-  color: var(--link-active-color);
-}
-
 a.external::after {
   content: '';
   background: var(--icon-external-link);
@@ -196,15 +69,6 @@ a.external::after {
   padding-right: 18px;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external::after {
-    background: var(--icon-external-link-dark);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
 @media (hover: hover) {
   a.external:hover::after {
     background: var(--icon-external-link-hover);
@@ -214,15 +78,6 @@ a.external::after {
   }
 }
 
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  a.external:hover::after {
-    background: var(--icon-external-link-dark-hover);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
 a.external:active::after {
   background: var(--icon-external-link-active) !important;
   background-size: contain !important;
@@ -230,15 +85,6 @@ a.external:active::after {
   background-position: center center !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external:active::after {
-    background: var(--icon-external-link-dark-active) !important;
-    background-size: contain !important;
-    background-repeat: no-repeat !important;
-    background-position: center center !important;
-  }
-}
-
 a.external.disabled::after,
 a.external.disabled:active::after {
   background: var(--icon-external-translucent) !important;
@@ -247,16 +93,6 @@ a.external.disabled:active::after {
   background-position: center center !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  a.external.disabled::after,
-  a.external.disabled:active::after {
-    background: var(--icon-external-translucent-dark) !important;
-    background-size: contain !important;
-    background-repeat: no-repeat !important;
-    background-position: center center !important;
-  }
-}
-
 .footnotes {
   margin-top: calc(var(--thematic-break-margin) / 2);
   padding-top: 32px;
@@ -355,16 +191,6 @@ main details {
   border: 2px solid var(--fg-color);
 }
 
-input[type='text'],
-input[type='search'] {
-  background: var(--bg-color);
-  color: var(--fg-color);
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-  font-size: 12pt;
-  padding: 4px 4px;
-}
-
 button,
 a.button,
 input[type='submit'] {
@@ -401,7 +227,7 @@ input[type='submit']:focus-visible,
 input[type='text']:focus-visible,
 input[type='search']:focus-visible {
   border-color: var(--fg-color);
-  background: var(--bg2-color);
+  background-color: var(--bg2-color);
 }
 
 button.icon-button {
@@ -508,114 +334,6 @@ tbody tr:last-child td {
   border-bottom: none;
 }
 
-.alert {
-  border: 3px solid var(--bg2-color);
-  position: relative;
-  margin: 1rem 0;
-}
-
-.alert.warning {
-  background: var(--warning-bg-color);
-  border-color: var(--warning-bg-color);
-}
-
-.alert.note {
-  background: var(--note-bg-color);
-  border-color: var(--note-bg-color);
-}
-
-.alert .title {
-  padding: 10px 6px;
-}
-
-.alert .content {
-  padding: 12px;
-
-  .styled-list {
-    color: var(--fg-color);
-  }
-
-  tt,
-  code {
-    background: inherit;
-    padding: inherit;
-  }
-
-  time[datetime].is-modified {
-    // Reset the underline color
-    text-decoration: underline dotted;
-  }
-
-  a {
-    text-decoration-color: var(--fg-color);
-  }
-
-  dfn {
-    color: inherit;
-  }
-}
-
-.alert .content > *:first-child {
-  margin-top: 0;
-}
-
-.alert .content > *:last-child {
-  margin-bottom: 0;
-}
-
-.alert .title::before {
-  left: 8px;
-  top: 8px;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-}
-
-.alert.warning .title::before {
-  content: var(--icon-warning);
-}
-
-i.warning {
-  background: var(--icon-warning);
-  background-size: contain;
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: sub;
-}
-
-@media (prefers-color-scheme: dark) {
-  .alert.warning .title::before {
-    content: var(--icon-warning-dark);
-  }
-
-  i.warning {
-    background: var(--icon-warning-dark);
-    background-size: contain;
-  }
-}
-
-.alert.note .title::before {
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .alert.note .title::before {
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-.alert .title {
-  font-weight: 700;
-  @include user-select(none);
-  padding-left: 48px;
-  margin: 0;
-}
-
-.alert > p:last-child {
-  margin-bottom: 0;
-}
-
 section {
   background: linear-gradient(
     0deg,
@@ -700,6 +418,10 @@ dl {
           text-decoration-color: var(--fg2-color);
         }
       }
+
+      &:active {
+        text-decoration-color: var(--link-active-color);
+      }
     }
   }
 
@@ -718,15 +440,9 @@ dfn {
   @include user-select(none);
 
   &::after {
-    content: 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='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+    content: var(--icon-breadcrumb);
     vertical-align: middle;
   }
-
-  @media (prefers-color-scheme: dark) {
-    &::after {
-      content: 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='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-    }
-  }
 }
 
 img {
@@ -775,33 +491,6 @@ select {
   font-size: inherit;
 }
 
-pre,
-tt,
-code {
-  font-family: var(--mono-font);
-}
-
-tt,
-code {
-  font-size: var(--mono-font-size);
-  background: var(--bg2-color);
-  border-radius: var(--mono-border-radius);
-  padding: 0.12em 0.25em;
-  overflow-wrap: anywhere;
-}
-
-pre {
-  background: var(--bg2-color);
-  border-radius: var(--mono-border-radius);
-  line-height: var(--mono-line-height);
-  overflow: auto;
-  padding: var(--gap);
-
-  code {
-    padding: 0;
-  }
-}
-
 // Shiki dual-theme support (defaultColor: false — CSS custom properties only,
 // no inline color/background-color, so no !important needed)
 .shiki span {

package/src/timezone/index.ts

@@ -84,14 +84,13 @@ function getOffsetMinutes(tz: string, date: Date): number {
   return (utcTs - date.getTime()) / 60000;
 }
 
-// window.siteVariables.timezones is replaced by DefinePlugin at build time.
-// The typeof guard prevents a ReferenceError in test environments where
-// window is not defined.
-const TIMEZONES: TimezoneDef[] =
-  typeof window !== 'undefined' ? window.siteVariables.timezones : [];
+// typeof guard prevents ReferenceError when tests import this module
+// without going through the bundler (which substitutes __SITE_TIMEZONES__).
+const TIMEZONES: TimeZone[] =
+  typeof __SITE_TIMEZONES__ !== 'undefined' ? __SITE_TIMEZONES__ : [];
 
 function getDefaultTimezone() {
-  const value = window.siteVariables.defaultTimeZone;
+  const value = __SITE_DEFAULT_TIMEZONE__;
   return TIMEZONES.find(tz => tz.value === value)!;
 }
 

package/src/toc/style.scss

@@ -1,4 +1,4 @@
-@import '../_mixins.scss';
+@use '../mixins' as *;
 
 :root {
   --highlight-hue: 59deg;
@@ -136,58 +136,24 @@ body.code .toc ol a {
 }
 
 .toc ol li.alert-item.warning a::before {
-  // fg-color
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.warning a::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
+  content: var(--icon-warning-sm);
 }
 
 @media (hover: hover) {
   .toc ol li.alert-item.warning:hover a::before,
   .toc ol li.alert-item.warning a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.warning:hover a::before,
-  .toc ol li.alert-item.warning a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/></svg>");
+    content: var(--icon-warning-sm-hover);
   }
 }
 
 .toc ol li.alert-item.note a::before {
-  // fg-color
-  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 8% 8%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 8% 8%)' stroke-width='2' stroke-linecap='round'/></svg>");
-}
-
-@media (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.note a::before {
-    // fg-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 20% 90%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 20% 90%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
+  content: var(--icon-note-sm);
 }
 
 @media (hover: hover) {
   .toc ol li.alert-item.note:hover a::before,
   .toc ol li.alert-item.note a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 6% 60%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 6% 60%)' stroke-width='2' stroke-linecap='round'/></svg>");
-  }
-}
-
-@media (hover: hover) and (prefers-color-scheme: dark) {
-  .toc ol li.alert-item.note:hover a::before,
-  .toc ol li.alert-item.note a:hover::before {
-    // fg2-color
-    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='hsl(20deg 6% 55%)' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='hsl(20deg 6% 55%)' stroke-width='2' stroke-linecap='round'/></svg>");
+    content: var(--icon-note-sm-hover);
   }
 }
 

package/src/util.ts

@@ -1,9 +1,12 @@
-export function debounce(fn: Function, time: number) {
+export function debounce<T extends (...args: unknown[]) => void>(
+  fn: T,
+  time: number,
+) {
   let timer: number;
-  return (...args: any[]) => {
+  return (...args: Parameters<T>) => {
     window.clearTimeout(timer);
     timer = window.setTimeout(() => {
-      fn.apply(null, args);
+      fn(...args);
     }, time);
   };
 }
@@ -31,7 +34,7 @@ export function applyBasePath(subPath: string): string {
     throw new Error('invalid internal path, must start with "/": ' + subPath);
   }
 
-  let path = window.siteVariables.basePath || '/';
+  let path = __SITE_BASE_PATH__;
   if (path.endsWith('/')) {
     path = path.slice(0, -1);
   }
@@ -106,8 +109,8 @@ export function formatDuration(ms: number): string {
 
   if (absMs < 1000) {
     // 0.0000ms - 999.99ms
-    let decimals = absMs < 10 ? 4 : absMs < 100 ? 3 : 2;
-    let val = roundTo(absMs, decimals);
+    const decimals = absMs < 10 ? 4 : absMs < 100 ? 3 : 2;
+    const val = roundTo(absMs, decimals);
     if (val >= 1000) {
       return sign + formatSecondsFromMs(absMs);
     }