System Initiative

<script setup lang="ts"> import DefaultTheme from "vitepress/theme"; import { onMounted } from "vue"; import { useRouter } from "vitepress"; import mediumZoom from "medium-zoom"; const { Layout } = DefaultTheme; const router = useRouter(); // Setup medium zoom with the desired options const setupMediumZoom = () => { mediumZoom("[data-zoomable]", { background: "transparent", }); }; // Apply medium zoom on load onMounted(setupMediumZoom); // Subscribe to route changes to re-apply medium zoom effect router.onAfterRouteChanged = setupMediumZoom; </script> <template> <Layout /> </template> <style> .medium-zoom-overlay { backdrop-filter: blur(5rem); } .medium-zoom-overlay, .medium-zoom-image--opened { z-index: 999; } /* Enable soft-wrapping for code blocks */ div[class*='language-'] pre, div[class*='language-'] code { white-space: pre-wrap !important; word-break: break-word; } * { scrollbar-width: thin; } html:not(.dark), html:not(.dark) * { scrollbar-color: #E5E5E5 #FFFFFF; } html.dark, html.dark * { scrollbar-color: #333333 #000000; } </style>