@abreen/tada 1.16.6 → 1.16.8

package/README.md

@@ -243,6 +243,7 @@ fontOverrides:
 features:
   search: true
   favicon: true
+  pickers: true
 base: https://example.edu
 basePath: /cs0
 internalDomains:
@@ -274,6 +275,7 @@ vars:
 | `features.search` | Enable search UI and Pagefind index generation |
 | `features.favicon` | Enable automatically generated favicons |
 | `features.footer` | Show the Tada footer at the bottom of every page |
+| `features.pickers` | Show the font and contrast pickers at the bottom of every page (default `true`) |
 | `base` | Full base URL of the deployed site, used for metadata and URL generation |
 | `basePath` | URL prefix for deployment under a subpath (e.g., `"/cs101"`), use `"/"` at root |
 | `internalDomains` | Domain names treated as internal by link processing (not marked external) |

package/bin/validators.ts

@@ -49,8 +49,8 @@ export function validateUrl(value: string): string | null {
 }
 
 export function validateBasePath(value: string): string | null {
-  if (!/^\/[-a-zA-Z0-9]*$/.test(value)) {
-    return 'Must start with / and contain only letters, digits, and hyphens';
+  if (!/^\/(?:[-a-zA-Z0-9]+(?:\/[-a-zA-Z0-9]+)*)?$/.test(value)) {
+    return 'Must start with / and contain path segments made of letters, digits, and hyphens';
   }
   return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.6",
+  "version": "1.16.8",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/schema/site.schema.json

@@ -22,7 +22,7 @@
     "basePath": {
       "type": "string",
       "default": "/",
-      "pattern": "^\\/[-a-zA-Z0-9]*?$"
+      "pattern": "^\\/(?:[-a-zA-Z0-9]+(?:\\/[-a-zA-Z0-9]+)*)?$"
     },
     "internalDomains": {
       "type": "array",

package/src/header/_base.scss

@@ -5,6 +5,9 @@
 }
 
 header {
+  --header-search-reservation: 0px;
+  --header-to-top-reservation: 0px;
+
   position: fixed;
   top: 0;
   z-index: 1000;
@@ -14,19 +17,36 @@ header {
   background: var(--bg-color-translucent);
   backdrop-filter: var(--backdrop-filter);
   view-transition-name: site-header;
+
+  &:has(.search-controls) {
+    --header-search-reservation: 200px;
+
+    @media (width <= 400px) {
+      --header-search-reservation: 0px;
+    }
+  }
+
+  &:has(.to-top-container .is-visible) {
+    --header-to-top-reservation: 120px;
+  }
 }
 
 :root[data-contrast-preference='high'] header {
   background: var(--bg-color);
 }
 
+header > details {
+  min-width: 0;
+}
+
 header details summary {
   position: relative;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0 200px 0 0;
-  container-type: inline-size;
+  padding: 0
+    calc(var(--header-search-reservation) + var(--header-to-top-reservation)) 0
+    0;
   cursor: pointer;
   list-style-type: none;
 
@@ -47,10 +67,6 @@ header details summary {
   }
 }
 
-header:has(.to-top-container .is-visible) details summary {
-  padding-right: 320px;
-}
-
 header details summary::-webkit-details-marker {
   display: none;
 }
@@ -105,12 +121,6 @@ header summary .site-title {
   pointer-events: none;
 }
 
-@container (max-width: 200px) {
-  header summary .site-title {
-    display: none;
-  }
-}
-
 header > .header-controls {
   position: absolute;
   top: 0;

package/src/question/style.scss

@@ -220,7 +220,7 @@
 }
 
 @media print {
-  .question-a-body {
+  .js .question-a-body {
     cursor: default;
 
     @include user-select(text);

package/src/style.scss

@@ -93,14 +93,28 @@ a.disabled {
 }
 
 .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);
-  vertical-align: text-top;
   content: '';
-
-  @include contained-mask(var(--icon-external-link));
 }
 
 .footnotes {