diff --git a/astro.config.ts b/astro.config.ts index b7c440d..6cea690 100644 --- a/astro.config.ts +++ b/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' diff --git a/src/assets/mini-bag.webp b/src/assets/mini-bag.webp new file mode 100644 index 0000000..4454293 Binary files /dev/null and b/src/assets/mini-bag.webp differ diff --git a/src/components/PageFrame.astro b/src/components/PageFrame.astro new file mode 100644 index 0000000..397d06e --- /dev/null +++ b/src/components/PageFrame.astro @@ -0,0 +1,11 @@ +--- +import type { Props } from "@astrojs/starlight/props"; +import StarlightPageFrame from "@astrojs/starlight/components/PageFrame.astro"; +--- + + + + + + +
\ No newline at end of file diff --git a/src/content/docs/basics/pseudos.mdx b/src/content/docs/basics/pseudos.mdx index cf34c3a..c08b79f 100644 --- a/src/content/docs/basics/pseudos.mdx +++ b/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"))