@abreen/tada 1.17.1 → 1.18.1

package/src/_content.scss

@@ -0,0 +1,463 @@
+@use 'mixins' as *;
+
+::selection {
+  color: var(--bg-color);
+  background: var(--fg-color);
+}
+
+:focus-visible {
+  outline: 2px solid var(--theme-color);
+  outline-offset: 1px;
+}
+
+a.disabled {
+  color: var(--fg-color-translucent);
+  text-decoration-color: var(--fg-color-translucent);
+  cursor: not-allowed;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--fg-color-translucent);
+      text-decoration-line: none;
+    }
+  }
+}
+
+.external-link-tail {
+  white-space: nowrap;
+}
+
+.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);
+  content: '';
+}
+
+.footnotes {
+  padding-top: 32px;
+  margin-top: calc(var(--thematic-break-margin) / 2);
+  font-size: 0.9em;
+  border-top: 3px solid var(--bg2-color);
+}
+
+.footnotes .title {
+  @include user-select(none);
+
+  font-size: larger;
+  font-weight: 700;
+}
+
+.footnotes p {
+  margin: 0;
+}
+
+.footnotes li {
+  margin-bottom: 8px;
+}
+
+a.footnote-ref {
+  font-size: 0.8em;
+  vertical-align: super;
+  border-bottom: none;
+}
+
+.footnote-item {
+  &:target {
+    outline: 2px solid var(--theme-color);
+    outline-offset: 1px;
+  }
+}
+
+a.footnote-ref,
+.footnotes .footnote-backref {
+  display: inline-block;
+
+  @include user-select(none);
+}
+
+hr {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  margin: var(--section-padding) 0;
+  border: none;
+}
+
+hr::after {
+  display: block;
+  width: 160px;
+  height: 12px;
+  content: '';
+  background-color: var(--fg2-color);
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'><rect x='0' y='5.5' width='96' height='1' fill='black'/><path d='M 64,6 C 71,6 80,4.5 80,1 C 80,4.5 89,6 96,6 C 89,6 80,7.5 80,11 C 80,7.5 71,6 64,6 Z' fill='black'/><rect x='64' y='5.5' width='96' height='1' fill='black'/></svg>");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+}
+
+button,
+a.button,
+input[type='submit'] {
+  padding: 0.25em 0.66em;
+  font-family: var(--font);
+  font-size: var(--font-size-small);
+  font-weight: 500;
+  color: var(--fg-color);
+  text-decoration: none;
+  background: var(--bg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: var(--border-radius);
+}
+
+button:disabled,
+input[type='submit']:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+button:active:not(:disabled),
+a.button:not(.disabled):active,
+input[type='submit']:active:not(:disabled) {
+  color: var(--bg-color) !important;
+  background: var(--link-active-color) !important;
+}
+
+@media (hover: hover) {
+  button:hover:not(:disabled),
+  a.button:not(.disabled):hover,
+  input[type='submit']:hover:not(:disabled) {
+    cursor: pointer;
+    background: var(--bg2-color);
+  }
+}
+
+button:focus,
+a.button:focus,
+input[type='submit']:focus,
+input[type='text']:focus,
+input[type='search']:focus,
+select:focus {
+  outline: 2px solid var(--theme-color);
+  outline-offset: 1px;
+  background-color: var(--bg2-color);
+  border-color: var(--fg-color);
+}
+
+button.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  font-style: normal;
+  font-weight: 400;
+  vertical-align: top;
+  border: none;
+  border-radius: 999px;
+}
+
+button.icon-button:focus {
+  background-color: var(--bg2-color);
+}
+
+ol.styled-list,
+ul.styled-list {
+  font-weight: 700;
+  color: var(--theme-color-text);
+}
+
+ul.styled-list {
+  // Make bullet points slightly bigger
+  font-size: 1.2em;
+}
+
+ol li .styled-list-item {
+  font-size: 1em;
+  font-weight: var(--font-weight);
+  color: var(--fg-color);
+}
+
+ul li .styled-list-item {
+  font-size: 0.8333em;
+  font-weight: var(--font-weight);
+  color: var(--fg-color);
+}
+
+ul {
+  list-style-type: square;
+}
+
+ul ul {
+  list-style-type: disc;
+}
+
+ul ul ul {
+  list-style-type: circle;
+}
+
+ul ul ul ul {
+  list-style-type: square;
+}
+
+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;
+}
+
+ol ol ol {
+  list-style-type: lower-roman;
+}
+
+ol ol ol ol {
+  list-style-type: decimal;
+}
+
+ol ol ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+table {
+  margin: 1rem 0;
+  overflow: scroll;
+  font-size: var(--font-size-smaller);
+  border-collapse: collapse;
+}
+
+thead {
+  text-align: left;
+}
+
+th,
+td {
+  border-bottom: 1px solid var(--fg-color);
+}
+
+th {
+  font-weight: 600;
+  color: var(--theme-color-text);
+}
+
+th,
+td {
+  padding: var(--table-padding) var(--table-padding) var(--table-padding) 0;
+  vertical-align: top;
+  text-align: left;
+}
+
+tbody tr:last-child td {
+  border-bottom: none;
+}
+
+section {
+  padding: calc(5 * var(--gap)) calc(2 * var(--gap));
+  margin: 0 calc(-1 * var(--gap)) 2rem;
+  background: linear-gradient(
+    0deg,
+    transparent 0,
+    var(--bg2-color) 3rem,
+    var(--bg2-color) calc(100% - 3rem),
+    transparent 100%
+  );
+
+  .alert {
+    background: var(--bg-color);
+  }
+}
+
+section h2:first-child,
+section h3:first-child,
+section h4:first-child,
+section h5:first-child,
+section h6:first-child {
+  font-style: italic;
+  font-weight: 600;
+}
+
+section > p:last-child,
+section > div:last-child {
+  margin-bottom: 0;
+}
+
+section > h2 + p {
+  margin-top: 16px;
+}
+
+blockquote {
+  font-size: 1.2em;
+  font-style: italic;
+  color: var(--fg-color);
+}
+
+.heading-subtitle {
+  font-style: italic;
+}
+
+h1 .heading-subtitle,
+h2 .heading-subtitle,
+h3 .heading-subtitle,
+h4 .heading-subtitle,
+h5 .heading-subtitle,
+h6 .heading-subtitle {
+  margin-left: 1rem;
+  font-weight: 400;
+}
+
+h3.has-subtitle,
+h4.has-subtitle,
+h5.has-subtitle,
+h6.has-subtitle {
+  padding-bottom: 0.5em;
+  margin-top: 6rem;
+  margin-bottom: 0.5em;
+  border-bottom: 1px solid var(--fg-color);
+}
+
+.small-caps {
+  margin-right: -0.05em;
+  font-variant-caps: all-small-caps;
+  font-synthesis-small-caps: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+dl {
+  dt {
+    font-weight: 600;
+    color: var(--theme-color-text);
+  }
+
+  dd > *:first-child {
+    margin-top: 0;
+  }
+}
+
+dfn {
+  font-style: italic;
+  font-weight: 500;
+  color: var(--theme-color-text);
+}
+
+.breadcrumbs {
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25em;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    gap: 0.25em;
+    align-items: center;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  a {
+    @include subdued-link;
+  }
+
+  [aria-current='page'] {
+    font-style: italic;
+  }
+
+  .material-symbol-icon {
+    flex-shrink: 0;
+  }
+}
+
+img {
+  max-width: 100%;
+}
+
+.avatar {
+  max-width: 100px;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 999px;
+}
+
+figure.bio {
+  float: left;
+  max-width: 125px;
+  margin: 1rem 1rem 1rem 0;
+
+  @media (width > 540px) {
+    max-width: 200px;
+  }
+
+  .avatar {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  figcaption {
+    margin-top: var(--gap);
+    font-style: italic;
+    text-align: center;
+  }
+}
+
+kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  font-family: var(--font);
+  font-size: var(--font-size-small);
+  font-weight: 500;
+  border: 1px solid var(--fg-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 0 var(--fg-color);
+}
+
+select {
+  position: relative;
+  padding: 4px;
+  font-family: var(--font);
+  font-size: inherit;
+  color: var(--fg-color);
+  background: var(--bg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: var(--border-radius);
+}
+
+// Shiki dual-theme support (defaultColor: false, CSS custom properties only,
+// no inline color/background-color, so no !important needed)
+.shiki span {
+  color: var(--shiki-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  .shiki span {
+    color: var(--shiki-dark);
+  }
+}

package/src/_fonts.scss

@@ -0,0 +1,90 @@
+@use 'config/theme';
+@include theme.custom-font-faces;
+@include theme.custom-font-tuning;
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('inter/InterVariable.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  src: url('inter/InterVariable-Italic.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  font-style: normal;
+  font-weight: 300 800;
+  src: url('google-sans-code/GoogleSansCodeVariable.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Google Sans Code';
+  font-style: italic;
+  font-weight: 300 800;
+  src: url('google-sans-code/GoogleSansCodeVariable-Italic.woff2')
+    format('woff2');
+  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: 'Courier Prime';
+  font-style: normal;
+  font-weight: 400;
+  src: url('courier-prime/CourierPrime-Regular.woff2') format('woff2');
+  font-display: swap;
+  size-adjust: 106.383%;
+}
+
+@font-face {
+  font-family: 'Courier Prime';
+  font-style: italic;
+  font-weight: 400;
+  src: url('courier-prime/CourierPrime-Italic.woff2') format('woff2');
+  font-display: swap;
+  size-adjust: 106.383%;
+}
+
+@font-face {
+  font-family: 'Courier Prime';
+  font-style: normal;
+  font-weight: 700;
+  src: url('courier-prime/CourierPrime-Bold.woff2') format('woff2');
+  font-display: swap;
+  size-adjust: 106.383%;
+}
+
+@font-face {
+  font-family: 'Courier Prime';
+  font-style: italic;
+  font-weight: 700;
+  src: url('courier-prime/CourierPrime-BoldItalic.woff2') format('woff2');
+  font-display: swap;
+  size-adjust: 106.383%;
+}

package/src/_layout.scss

@@ -18,14 +18,53 @@ body {
 
 body > .container {
   position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100dvh - var(--header-collapsed-height) - var(--gap));
   padding: 0 var(--gap);
   margin-top: calc(var(--header-collapsed-height) + var(--gap));
 }
 
+.main-content {
+  display: grid;
+  flex: 1;
+  grid-template-areas: 'heading' 'toc' 'body';
+  grid-template-rows: auto auto 1fr;
+  width: 100%;
+}
+
+.main-content > .title-and-info {
+  grid-area: heading;
+}
+
+.main-content > nav.toc {
+  grid-area: toc;
+}
+
 .body {
+  display: flex;
+  flex-direction: column;
+  grid-area: body;
+  gap: 6em;
+  min-width: 0;
   padding-bottom: 2rem;
 }
 
+.page-content {
+  display: flow-root;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.page-bottom {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: auto;
+}
+
 body.default .title-and-info,
 body.default nav.toc,
 body.literate .title-and-info,
@@ -45,7 +84,7 @@ body.default .title-and-info {
   border-bottom: 1px solid var(--fg2-color);
 }
 
-body.default main > *:first-child {
+body.default .page-content > *:first-child {
   margin-top: 0;
 }
 
@@ -55,23 +94,6 @@ body.literate main table {
 }
 
 @media (width < 900px) {
-  .toc-is-active .main-content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .toc-is-active .main-content > .title-and-info {
-    order: 0;
-  }
-
-  .toc-is-active .main-content > nav.toc {
-    order: 1;
-  }
-
-  .toc-is-active .main-content > .body {
-    order: 2;
-  }
-
   body.default.toc-is-active nav.toc,
   body.literate.toc-is-active nav.toc {
     padding: var(--gap);
@@ -97,36 +119,26 @@ body.literate main table {
   }
 
   .toc-is-active .main-content {
-    display: flex;
-    flex-wrap: wrap;
+    grid-template:
+      'heading heading' auto
+      'toc body' 1fr / var(--toc-width) minmax(0, 1fr);
     gap: 0 var(--gap);
   }
 
-  .toc-is-active .main-content > .title-and-info {
-    flex: 0 0 100%;
-  }
-
-  .toc-is-active .main-content > .body {
-    flex: 1;
-    order: 1;
-    min-width: 0;
-  }
-
   body.toc-is-active nav.toc {
     position: sticky;
     top: var(--header-collapsed-height);
     box-sizing: border-box;
-    flex-shrink: 0;
-    align-self: flex-start;
+    align-self: start;
     width: var(--toc-width);
-    height: calc(100vh - var(--header-collapsed-height));
+    max-height: calc(100vh - var(--header-collapsed-height));
     margin-bottom: 0;
     overflow-y: auto;
   }
 
   body.code.toc-is-active nav.toc {
     top: calc(var(--header-collapsed-height) + var(--gap));
-    height: calc(100vh - var(--header-collapsed-height) - var(--gap));
+    max-height: calc(100vh - var(--header-collapsed-height) - var(--gap));
   }
 }
 
@@ -203,10 +215,13 @@ body.literate main table {
 footer {
   @include user-select(none);
 
-  padding: 2rem 0 1rem;
   color: var(--fg2-color);
   text-align: center;
 
+  p {
+    margin: 0;
+  }
+
   a {
     color: var(--fg2-color);
     text-decoration: none;

package/src/{material-symbols.scss → _material-symbols.scss}

@@ -22,3 +22,10 @@
   --material-symbol-icon: var(--icon-contrast-high);
   --material-symbol-icon-size: var(--icon-contrast-high-size);
 }
+
+.material-symbol-icon-breadcrumb-separator {
+  --material-symbol-icon: var(--icon-breadcrumb-separator);
+  --material-symbol-icon-size: var(--icon-breadcrumb-separator-size);
+
+  color: var(--fg2-color);
+}

package/src/appearance-picker/{style.scss → _index.scss}

@@ -4,7 +4,7 @@
   display: flex;
   gap: 0.5rem;
   justify-content: center;
-  margin: 2rem auto 1rem;
+  margin: 0;
 }
 
 .preference-picker {