@abreen/tada 1.15.0 → 1.15.1

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

@@ -28,10 +28,8 @@ Selection sort's strength is its simplicity.
 - `index_smallest()` always scans from `start` to the end
 - It requires no additional memory (other than local variables)
 
-However
-
-- It has no `break` statements & can't return early
-- No difference between best, average and worst cases
+However, it has no `break` statements and therefore can't return early if
+the array is already sorted.
 
 ---
 
@@ -48,10 +46,10 @@ However
 The innermost statement compares `nums[i]` and `nums[curr]`.
 
 - when `i` is 0, the comparison is executed $n - 1$ times
-- when `i` is 1, the innermost statement is executed $n - 2$ times
+- when `i` is 1, the comparison is executed $n - 2$ times
 - $\dots$
-- when `i` is $n - 3$, the innermost statement is executed two times
-- when `i` is $n - 2$, the innermost statement is executed one time
+- 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 is
 
@@ -59,3 +57,20 @@ $$
 (n-1) + (n-2) + \dots + 1 = \sum_{i=1}^{n-1}i
 $$
 
+---
+
+## Review
+
+??? question The outer loop of selection sort runs
+- [ ] $n$ times
+- [x] $n - 1$ times
+- [ ] $n^2$ times
+- [ ] $n - 2$ times
+???
+
+??? question What is selection sort's best case?
+- [ ] An already sorted array
+- [ ] A reverse-sorted array
+- [ ] An array filled with the same element
+- [x] Its best, worst, and average cases are all the same
+???

package/package.json

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

package/src/question/style.scss

@@ -3,7 +3,7 @@
 .question {
   --question-label-width: 1.2em;
 
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 .question-q,
@@ -136,13 +136,13 @@
 .question-multiple-choice-options {
   display: flex;
   flex-direction: column;
-  gap: 0.75em;
+  gap: 0.5em;
   margin-left: calc(var(--question-label-width) + 0.5em);
 }
 
 .question-multiple-choice-option {
   position: relative;
-  padding: 0.5em calc(var(--question-result-icon-size) + 1em) 0.5em 0.5em;
+  padding: 0.25em calc(var(--question-result-icon-size) + 1em) 0.25em 0.5em;
   cursor: pointer;
   border: 0.125em solid var(--bg2-color);
   border-radius: var(--border-radius);
@@ -156,6 +156,14 @@
   }
 }
 
+.question-multiple-choice-option:has(> code):not(
+    :has(> :not(code, .question-multiple-choice-result))
+  )
+  > code {
+  padding: 0;
+  background: none;
+}
+
 .question-multiple-choice-option::after {
   position: absolute;
   top: 50%;

package/src/slides/index.ts

@@ -224,11 +224,21 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
+  function scrollToSlide(index: number): void {
+    const slide = slides[index];
+    if (!slide || typeof slide.scrollIntoView !== 'function') {
+      return;
+    }
+
+    slide.scrollIntoView({ block: 'start', inline: 'nearest' });
+  }
+
   function exitPresentation(): void {
     if (!isPresenting) {
       return;
     }
 
+    const exitingActiveIndex = activeIndex;
     const shouldExitFullscreen =
       presentationMode === 'fullscreen' &&
       domDocument.fullscreenElement != null &&
@@ -245,8 +255,16 @@ export default function mountSlides(window: Window): void | (() => void) {
     setTraceToolbarVisibility(false);
 
     if (shouldExitFullscreen) {
-      void domDocument.exitFullscreen?.();
+      void domDocument
+        .exitFullscreen()
+        .finally(() => scrollToSlide(exitingActiveIndex))
+        .catch(() => {
+          // ignored
+        });
+      return;
     }
+
+    scrollToSlide(exitingActiveIndex);
   }
 
   function resetReadyTraces(scope: HTMLElement = slidesRoot): void {
@@ -440,15 +458,7 @@ export default function mountSlides(window: Window): void | (() => void) {
       return;
     }
 
-    const activeSlide = slides[activeIndex];
-    if (!activeSlide) {
-      return;
-    }
-
-    if (
-      !(event.target instanceof domView.Node) ||
-      !activeSlide.contains(event.target)
-    ) {
+    if (!(event.target instanceof domView.Node)) {
       return;
     }
 

package/src/slides/style.scss

@@ -6,7 +6,7 @@
 }
 
 body.is-presenting {
-  --slides-scale: clamp(150%, 3.6vmin, 250%);
+  --slides-scale: clamp(150%, 2.6vmin, 200%);
 
   overflow: hidden;
 }
@@ -55,20 +55,20 @@ body.is-presenting .slide {
   @include user-select(none);
 
   position: fixed;
-  top: 50%;
+  top: 0;
   left: 50%;
   z-index: 1000;
   box-sizing: border-box;
   display: none;
-  width: min(100vw, calc(100vh * 4 / 3));
-  height: min(100vh, calc(100vw * 3 / 4));
+  width: min(calc(100vw - var(--gap) - var(--gap)), 70rem);
+  height: 100vh;
   padding: calc(3 * var(--gap));
   overflow: auto;
   font-size: var(--slides-scale);
   letter-spacing: 0.2px;
   outline: none;
   background: var(--bg-color);
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
 
   > :first-child {
     margin-top: 0;

package/templates/_theme.scss

@@ -57,8 +57,8 @@
   // Mask icons (color-agnostic, painted via background-color: currentColor)
   --icon-external-link: 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='M6 18 L20 4 M10 4 H20 V14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
+  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.8 4.2 Q12 2 13.2 4.2 L20.8 17.9 Q22 20 19.6 20 H4.4 Q2 20 3.2 17.9 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
+  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='square'/></svg>");
   --icon-check: 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='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-search: 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='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");