chore(docs): better color, animated <details>, minor tweaks

docs/.vitepress/composables/outline.ts

@@ -55,7 +55,6 @@ export function resolveTitle(theme: DefaultTheme.Config) {
 
 export function getHeaders(range: DefaultTheme.Config['outline']) {
   const headers = [
-    // @ts-expect-error copied script
     ...document.querySelectorAll('article :where(h1,h2,h3,h4,h5,h6)'),
   ]
     .filter(el => el.id && el.hasChildNodes())
@@ -74,7 +73,6 @@ export function getHeaders(range: DefaultTheme.Config['outline']) {
 
 function serializeHeader(h: Element): string {
   let ret = ''
-  // @ts-expect-error copied script
   for (const node of h.childNodes) {
     if (node.nodeType === 1) {
       if (
@@ -204,6 +202,7 @@ export function useActiveAnchor(
       }
       activeLink = link
     }
+
     activateLink(activeLink)
   }
 

docs/.vitepress/theme/index.ts

@@ -16,11 +16,11 @@ import './theme-media.css'
 import './theme-kbd.css'
 import './theme-animations.css'
 import './custom-nixie.css'
-import '@fontsource-variable/quicksand'
-import '@fontsource-variable/dm-sans'
-import '@fontsource/dm-mono'
-import '@fontsource/dm-serif-display'
-import '@fontsource-variable/comfortaa'
+import '@fontsource-variable/quicksand/index.css'
+import '@fontsource-variable/dm-sans/index.css'
+import '@fontsource/dm-mono/index.css'
+import '@fontsource/dm-serif-display/index.css'
+import '@fontsource-variable/comfortaa/index.css'
 
 export default {
   Layout,

docs/.vitepress/theme/theme-details-animated-with-input.css

@@ -0,0 +1,74 @@
+/*
+ * This requires
+ *
+ * <input type="checkbox" name="details-window-setup" id="details-window-setup" />
+ * <details open>
+ *   <summary>
+ *     <label for="details-window-setup" class="cursor-pointer">
+ *       Windows setup
+ *     </label>
+ *   </summary>
+ *   Content
+ * </details>
+ */
+
+/* The key is to start <details> element in the "open" state...
+  ...and animate its max-height value by checking a checkbox. */
+details {
+  transition: max-height 150ms ease-in-out;
+
+  max-height: 2rem; /* Set a max-height value just enough to show the summary content */
+  overflow-y: hidden; /* Hide the rest of the content */
+  overflow-x: auto;
+}
+
+summary {
+  display: block; /* This hides the summary's ::marker pseudo-element */
+}
+
+input {
+  display: none; /* Hide the checkbox element */
+}
+
+/* <label> element to check the checkbox */
+label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 1rem; /* This height value must be equal to max-height value of <details> element  */
+}
+
+label:hover {
+  cursor: pointer;
+}
+
+label::before {
+  content: "⏵";
+  font-size: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+  transition: rotate 200ms 400ms ease-out;
+}
+
+div.content {
+  padding: 0 10px;
+  border: 2px solid #888;
+}
+
+/* Here you can choose two approaches to animate <details> element:
+  1) Use adjacent sibling combinator (+)
+  2) Use :has() pseudo-class, but this might not work in Firefox.
+*/
+
+input:checked + details,
+details:has(input:checked) {
+  max-height: 800px; /* Set a max-height value enough to show all the content */
+}
+
+input:checked + details label::before,
+details:has(input:checked) label::before {
+  rotate: 90deg;
+  transition: rotate 200ms ease-out;
+}

docs/.vitepress/theme/theme-markdown.css

@@ -6,3 +6,44 @@ ul.task-list-container li input.task-list-item-checkbox {
   display: inline-block;
   margin: 0 0.25rem 0 0;
 }
+
+/*
+ * Animate details element.
+ *
+ * https://css-tricks.com/using-styling-the-details-element/
+ *
+ * While this is better but it requires me to have <label> and <input> orchestrated correctly:
+ *
+ * - https://github.com/jgustavoas/fully-animated-details-element-using-pure-CSS-only/blob/main/index.html
+ * - https://codepen.io/jgustavoas/pen/zYLNKbN
+ */
+
+details::details-content {
+  transition: height 200ms ease-in-out, content-visibility 200ms ease-in-out allow-discrete;
+  height: 0;
+  overflow: clip;
+}
+
+summary {
+  cursor: pointer;
+  transition: transform 200ms ease-in-out;
+}
+
+summary:focus {
+  outline: none;
+}
+
+/*
+ * This is amazing, isn't it?
+ *
+ * https://css-tricks.com/almanac/pseudo-selectors/d/details-content/
+ */
+@supports (interpolate-size: allow-keywords) {
+  :root {
+    interpolate-size: allow-keywords;
+  }
+
+  [open]::details-content {
+    height: auto;
+  }
+}

docs/.vitepress/theme/theme-vitepress.css

@@ -47,7 +47,7 @@
     left: 0.75rem;
     top: 50%;
     width: 0.25rem;
-    height: calc(100% - 1.75rem);
+    height: calc(100% - 1.5rem);
     transform: translateY(-50%);
     border-radius: 999px;
   }
@@ -71,6 +71,11 @@
     margin-left: 0.5rem;
   }
 
+  pre.shiki {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
   pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
     background-color: #ffffffbd;
   }
@@ -122,11 +127,11 @@
   }
 
   & .custom-block-title {
-    @apply text-yellow-800 dark:text-yellow-300 font-semibold;
+    @apply text-yellow-700 dark:text-yellow-300 font-semibold;
   }
 
   &> p:nth-child(2) {
-    @apply dark:text-yellow-50;
+    @apply text-yellow-950 dark:text-yellow-50 leading-tight;
   }
 }
 
@@ -150,6 +155,10 @@ pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
   background-color: #f6f9ff;
 }
 
+details pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
+  background-color: #e9f0ff;
+}
+
 .dark pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
   background-color: #1e1e2e;
 }

docs/uno.config.ts

@@ -1,5 +1,3 @@
-import type { Preset } from 'unocss'
-
 import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
 import { blackA, cyan, grass, green, indigo, mauve, purple, red, slate, teal, violet } from '@radix-ui/colors'
 import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss'
@@ -34,14 +32,25 @@ export default defineConfig({
           'margin-top': '0.5rem',
           'margin-bottom': '0',
         },
+        'p': {
+          'margin-top': '0.5rem',
+          'margin-bottom': '0.5rem',
+        },
         'details': {
           'margin-top': '0.5rem',
           'margin-bottom': '0.5rem',
-          'padding': '0.5rem 1rem',
+          'padding': '1rem 1.5rem',
           'background-color': '#a6ceef1a',
         },
         '.dark details': {
-          'background-color': '#5870840f',
+          'background-color': '#191c1e',
+        },
+        'ol': {
+          'margin-top': '0.25rem',
+          'margin-bottom': '0.25rem',
+        },
+        'details ol': {
+          'padding-inline-start': '1rem',
         },
         'ul': {
           'margin-top': '0.25rem',
@@ -51,6 +60,14 @@ export default defineConfig({
           'margin-top': '0',
           'margin-bottom': '0',
         },
+        'li p': {
+          'margin-top': '0.25rem',
+          'margin-bottom': '0.25rem',
+        },
+        'li blockquote': {
+          'margin-top': '1rem',
+          'margin-bottom': '1rem',
+        },
       },
     }),
     presetWind3(),
@@ -87,7 +104,7 @@ export default defineConfig({
         primary: 0,
         complementary: 180,
       },
-    }) as Preset,
+    }),
   ],
   content: {
     filesystem: [