Attempt better Forks styling

src/.vitepress/theme/index.ts

@@ -1,15 +1,12 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from "vue";
 import Theme from "vitepress/theme";
-import "./style.css";
+import CustomLayout from "./layouts/CustomLayout.vue";
+import "./styles/style.css";
 
 export default {
 	extends: Theme,
-	Layout: () => {
-		return h(Theme.Layout, null, {
-			// https://vitepress.dev/guide/extending-default-theme#layout-slots
-		});
-	},
+	Layout: CustomLayout,
 	enhanceApp({ app, router, siteData }) {
 		// ...
 	},

src/.vitepress/theme/layouts/CustomLayout.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+	<div :class="frontmatter.pageClass">
+		<DefaultTheme.Layout />
+	</div>
+</template>

src/.vitepress/theme/styles/forks/neko.css

@@ -1,8 +1,8 @@
-.image-bg {
+.page-neko .image-bg {
 	display: none;
 }
 
-::selection {
+.page-neko ::selection {
 	background: rgba(255, 109, 137, 0.2);
 }
 
@@ -10,8 +10,8 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-:root {
-    --vp-c-brand: #ff6884;
+ :root .page-neko  {
+    --vp-c-brand: #ff6884 !important;
 	--vp-c-brand-light: #ff8da2;
 	--vp-c-brand-lighter: #ffb3c1;
 	--vp-c-brand-lightest: #ffd9e0;
@@ -25,7 +25,7 @@
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-neko  {
 	--vp-button-brand-text: var(--vp-c-black);
 	--vp-button-brand-hover-text: var(--vp-c-black);
 	--vp-button-brand-active-text: var(--vp-c-black);

src/.vitepress/theme/styles/forks/tachiyomiaz.css

@@ -1,8 +1,8 @@
-.image-bg {
+.page-tachiyomiaz .image-bg {
 	display: none;
 }
 
-::selection {
+.page-tachiyomiaz ::selection {
 	background: rgba(255, 204, 77, 0.2);
 }
 
@@ -10,7 +10,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomiaz {
     --vp-c-brand: #ffcc4d;
 	--vp-c-brand-light: #ffd879;
 	--vp-c-brand-lighter: #ffe5a6;
@@ -25,7 +25,7 @@
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomiaz {
 	--vp-button-brand-text: var(--vp-c-black);
 	--vp-button-brand-hover-text: var(--vp-c-black);
 	--vp-button-brand-active-text: var(--vp-c-black);

src/.vitepress/theme/styles/forks/tachiyomij2k.css

@@ -1,8 +1,8 @@
-.image-bg {
+.page-tachiyomij2k .image-bg {
 	display: none;
 }
 
-::selection {
+.page-tachiyomij2k ::selection {
 	background: rgba(9, 82, 175, 0.2);
 }
 
@@ -10,7 +10,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomij2k {
     --vp-c-brand: #0952af;
 	--vp-c-brand-light: #467dc3;
 	--vp-c-brand-lighter: #84a8d7;
@@ -25,7 +25,7 @@
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomij2k {
 	--vp-button-brand-text: var(--vp-c-white);
 	--vp-button-brand-hover-text: var(--vp-c-white);
 	--vp-button-brand-active-text: var(--vp-c-white);

src/.vitepress/theme/styles/forks/tachiyomisy.css

@@ -1,8 +1,8 @@
-.image-bg {
+.page-tachiyomisy .image-bg {
 	display: none;
 }
 
-::selection {
+.page-tachiyomisy ::selection {
 	background: rgba(206, 40, 40, 0.2);
 }
 
@@ -10,7 +10,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomisy {
     --vp-c-brand: #ce2828;
 	--vp-c-brand-light: #da5d5d;
 	--vp-c-brand-lighter: #e69393;
@@ -25,7 +25,7 @@
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-:root {
+:root .page-tachiyomisy {
 	--vp-button-brand-text: var(--vp-c-white);
 	--vp-button-brand-hover-text: var(--vp-c-white);
 	--vp-button-brand-active-text: var(--vp-c-white);

src/forks/neko.md

@@ -3,6 +3,7 @@ title: Neko
 description: LongDesc
 
 layout: home
+pageClass: page-neko
 
 hero:
   name: Neko
@@ -66,5 +67,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/forks/neko.css"
+	@import "../.vitepress/theme/styles/forks/neko.css"
 </style>

src/forks/tachiyomiaz.md

@@ -3,6 +3,7 @@ title: TachiyomiAZ
 description: LongDesc
 
 layout: home
+pageClass: page-tachiyomiaz
 
 hero:
   name: TachiyomiAZ
@@ -74,5 +75,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/forks/tachiyomiaz.css"
+	@import "../.vitepress/theme/styles/forks/tachiyomiaz.css"
 </style>

src/forks/tachiyomij2k.md

@@ -3,6 +3,7 @@ title: TachiyomiJ2K
 description: LongDesc
 
 layout: home
+pageClass: page-tachiyomij2k
 
 hero:
   name: TachiyomiJ2K
@@ -67,5 +68,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/forks/tachiyomij2k.css"
+	@import "../.vitepress/theme/styles/forks/tachiyomij2k.css"
 </style>

src/forks/tachiyomisy.md

@@ -3,6 +3,7 @@ title: TachiyomiSY
 description: LongDesc
 
 layout: home
+pageClass: page-tachiyomisy
 
 hero:
   name: TachiyomiSY
@@ -83,5 +84,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/forks/tachiyomisy.css"
+	@import "../.vitepress/theme/styles/forks/tachiyomisy.css"
 </style>