feat: enlarge hero image and add medium-zoom for image lightbox

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

docs/.vitepress/theme/custom.css

@@ -12,3 +12,23 @@
   --vp-c-brand-3: #ea9a7a;
   --vp-c-brand-soft: rgba(217, 119, 87, 0.16);
 }
+
+/* Hero image larger */
+.VPHero .image-container {
+  max-width: 500px !important;
+  max-height: 500px !important;
+}
+
+.VPHero .image-container .image-src {
+  max-width: 500px !important;
+  max-height: 500px !important;
+}
+
+/* medium-zoom overlay */
+.medium-zoom-overlay {
+  z-index: 30;
+}
+
+.medium-zoom-image--opened {
+  z-index: 31;
+}

docs/.vitepress/theme/index.ts

@@ -1,6 +1,20 @@
 import DefaultTheme from 'vitepress/theme'
+import mediumZoom from 'medium-zoom'
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
 import './custom.css'
 
 export default {
   extends: DefaultTheme,
+  setup() {
+    const route = useRoute()
+    const initZoom = () => {
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
+    }
+    onMounted(() => initZoom())
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    )
+  },
 }