Merge branch 'main' into feature/svg-animations

astro.config.ts

@@ -37,7 +37,8 @@ export default defineConfig({
     title: '@vtbag',
     components: {
       Head: "./src/components/NHead.astro",
-      PageTitle: "./src/components/PageTitle.astro"
+      PageTitle: "./src/components/PageTitle.astro",
+      PageFrame: "./src/components/PageFrame.astro",
     },
     plugins: [starlightImageZoom()],
     tableOfContents: {
@@ -56,7 +57,7 @@ export default defineConfig({
     pagination: true,
     favicon: "/bag4.png",
     logo: {
-      src: "./src/assets/bag.webp"
+      src: "./src/assets/mini-bag.webp"
     },
     social: {
       github: 'https://github.com/vtbag/website'

src/components/PageFrame.astro

@@ -0,0 +1,11 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import StarlightPageFrame from "@astrojs/starlight/components/PageFrame.astro";
+---
+
+<StarlightPageFrame {...Astro.props}>
+  <slot slot="sidebar" name="sidebar"/>
+  <slot slot="header" name="header"/>
+  <slot slot="default" name="default"/>
+</StarlightPageFrame>
+<div id="the_unexpected"/>

src/content/docs/basics/pseudos.mdx

@@ -161,7 +161,7 @@ All these pseudo-elements only exist briefly during the transition effect, makin
 
 To make spotting pseudo-elements in the DOM easier, you can set very long animation durations, giving you more time to investigate the DOM in the browser's DevTools.
 
-Alternatively, in the Inspection Chamber's Full Control Mode, time freezes, allowing for detailed examination of the pseudo-elements. During an active view transition, click on a name in the Animation Groups panel to copy a command to your clipboard. You can then paste this command into the browser’s DevTools console for closer inspection.
+Alternatively, in the [Inspection Chamber](/tools/inspection-chamber/)'s Full Control Mode, time freezes, allowing for detailed examination of the pseudo-elements. During an active view transition, click on a name in the Animation Groups panel to copy a command to your clipboard. You can then paste this command into the browser’s DevTools console for closer inspection.
 
 ```console
 inspect(top.document.querySelector("#vtbag-main-frame").contentDocument.querySelector(":root"))