@abreen/tada 1.16.12 → 1.17.0

package/build/utils/markdown.ts

@@ -517,10 +517,11 @@ export function createMarkdown(
           '</span></p>' +
           '<div class="question-a">' +
           '<p class="question-a-label">A.</p>' +
-          '<div class="question-a-body" data-pagefind-ignore>\n'
+          '<div class="question-a-body" data-pagefind-ignore>\n' +
+          '<div class="question-a-content">\n'
         );
       } else {
-        return '</div></div></div>\n';
+        return '</div></div></div></div>\n';
       }
     },
   });

package/init/content/labs/02/index.md

@@ -49,11 +49,11 @@ The innermost statement compares `nums[i]` and `nums[curr]`.
 - when `i` is $n - 3$, the comparison is executed two times
 - when `i` is $n - 2$, the comparison is executed one time
 
-Therefore the total number of comparisons $C(n)$ is
-
+??? question What is the exact number of comparisons $C(n)$?
 $$
 (n-1) + (n-2) + \dots + 1 = \sum_{i=1}^{n-1}i = \frac{n(n-1)}{2}
 $$
+???
 
 ??? question What complexity class does $C(n)$ belong to?
 It's a quadratic function. The class is $O(n^2)$.

package/package.json

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

package/src/appearance-picker/style.scss

@@ -38,7 +38,7 @@
   transform: translateX(0);
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform 0.2s ease;
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
   }
 }
 

package/src/header/_base.scss

@@ -114,27 +114,34 @@ header summary .menu-icon-line {
 
 @media (prefers-reduced-motion: no-preference) {
   header summary .menu-icon-line {
-    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  header summary .menu-icon-line-middle {
     transition:
-      opacity 150ms ease-out,
-      transform 200ms cubic-bezier(0.2, 0, 0, 1);
+      transform 260ms cubic-bezier(0.65, 0, 0.35, 1),
+      stroke-dasharray 260ms cubic-bezier(0.65, 0, 0.35, 1),
+      stroke-dashoffset 260ms cubic-bezier(0.65, 0, 0.35, 1);
   }
 }
 
+// Change the drawn lengths instead of scaling so round caps keep their shape.
+// Each outer stroke forms half of one diagonal; the middle forms the other.
+// A 12px square matches the hamburger height, with diagonals of 12 * sqrt(2).
+header details[open] summary .menu-icon-line-top,
+header details[open] summary .menu-icon-line-bottom {
+  stroke-dasharray: 8.4853 36;
+  stroke-dashoffset: -4.7574;
+}
+
 header details[open] summary .menu-icon-line-top {
-  transform: translateY(6px) rotate(45deg);
+  transform: translate(-3px, 3px) rotate(45deg);
 }
 
 header details[open] summary .menu-icon-line-middle {
-  opacity: 0;
-  transform: scaleX(0.8);
+  stroke-dasharray: 16.9706 36;
+  stroke-dashoffset: -0.5147;
+  transform: rotate(-45deg);
 }
 
 header details[open] summary .menu-icon-line-bottom {
-  transform: translateY(-6px) rotate(-45deg);
+  transform: translate(3px, -3px) rotate(45deg);
 }
 
 @supports selector(details::details-content) and

package/src/navigate/style.scss

@@ -1,30 +1,39 @@
-$shift: 12px;
+$shift: 8px;
 $duration: 150ms;
+$movement-easing: cubic-bezier(0.2, 0, 0, 1);
 
-@keyframes slide-out-left {
+@keyframes page-fade-out {
   to {
     opacity: 0;
+  }
+}
+
+@keyframes page-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-left {
+  to {
     transform: translateX(-$shift);
   }
 }
 
 @keyframes slide-in-right {
   from {
-    opacity: 0;
     transform: translateX($shift);
   }
 }
 
 @keyframes slide-out-right {
   to {
-    opacity: 0;
     transform: translateX($shift);
   }
 }
 
 @keyframes slide-in-left {
   from {
-    opacity: 0;
     transform: translateX(-$shift);
   }
 }
@@ -61,18 +70,26 @@ $duration: 150ms;
 
 // Forward navigation: old content slides left, new content slides in from right
 .nav-forward::view-transition-old(root) {
-  animation: slide-out-left $duration ease-in;
+  animation:
+    slide-out-left $duration $movement-easing,
+    page-fade-out $duration ease-in;
 }
 
 .nav-forward::view-transition-new(root) {
-  animation: slide-in-right $duration ease-out;
+  animation:
+    slide-in-right $duration $movement-easing,
+    page-fade-in $duration ease-out;
 }
 
 // Back navigation: old content slides right, new content slides in from left
 .nav-back::view-transition-old(root) {
-  animation: slide-out-right $duration ease-in;
+  animation:
+    slide-out-right $duration $movement-easing,
+    page-fade-out $duration ease-in;
 }
 
 .nav-back::view-transition-new(root) {
-  animation: slide-in-left $duration ease-out;
+  animation:
+    slide-in-left $duration $movement-easing,
+    page-fade-in $duration ease-out;
 }

package/src/question/style.scss

@@ -37,6 +37,7 @@
 }
 
 .js .question-a-body {
+  display: grid;
   cursor: pointer;
 
   @include user-select(none);
@@ -54,37 +55,42 @@
   }
 }
 
-.question-a-body > *:first-child {
+.question-a-content {
+  display: flow-root;
+  min-width: 0;
+}
+
+.question-a-content > *:first-child {
   margin-top: 0;
 }
 
-.question-a-body > *:last-child {
+.question-a-content > *:last-child {
   margin-bottom: 0;
 }
 
-.question-a-body > * {
+// Composite the entire answer, including positioned math and explicit colors.
+.js .question-a-body > .question-a-content,
+.js .question-a-body::before {
+  grid-area: 1 / 1;
+
   @media (prefers-reduced-motion: no-preference) {
-    transition:
-      color 0.25s,
-      background-color 0.25s,
-      border-color 0.25s,
-      box-shadow 0.25s;
+    transition: opacity 0.25s;
   }
 }
 
-.js .question-a-body:not([data-revealed]) > * {
-  color: transparent;
+.js .question-a-body::before {
   pointer-events: none;
+  content: '';
   background-color: var(--bg2-color);
-  border-color: transparent;
-  box-shadow: none;
 }
 
-.js .question-a-body:not([data-revealed]) > * * {
-  color: transparent;
-  background-color: var(--bg2-color);
-  border-color: transparent;
-  box-shadow: none;
+.js .question-a-body[data-revealed]::before {
+  opacity: 0;
+}
+
+.js .question-a-body:not([data-revealed]) > .question-a-content {
+  pointer-events: none;
+  opacity: 0;
 }
 
 .js .question-a-body::after {
@@ -225,17 +231,16 @@
 
     @include user-select(text);
 
-    &:not([data-revealed]) > * {
-      color: inherit;
-      pointer-events: auto;
-      background-color: transparent;
+    > .question-a-content {
+      transition: none;
     }
 
-    &:not([data-revealed]) > * * {
-      color: inherit;
-      background-color: transparent;
+    &:not([data-revealed]) > .question-a-content {
+      pointer-events: auto;
+      opacity: 1;
     }
 
+    &::before,
     &::after {
       display: none;
     }

package/templates/_top.html

@@ -209,7 +209,8 @@
       <details>
         <summary aria-label="Toggle site navigation">
           <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
-               fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round">
+               fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round"
+               stroke-dasharray="18 36" stroke-dashoffset="0">
             <path class="menu-icon-line menu-icon-line-top" d="M3 6h18" />
             <path class="menu-icon-line menu-icon-line-middle" d="M3 12h18" />
             <path class="menu-icon-line menu-icon-line-bottom" d="M3 18h18" />