Change CSS to Stylus

Also reworks some lint commands

.prettierignore

@@ -1,4 +1,11 @@
+*.png
+*.jpg
+*.webm
+*.webp
+*.ico
+*.svg
 *.md
+*.styl
 *.vue
 dist
 pnpm-lock.yaml

.stylintrc

@@ -0,0 +1,47 @@
+{
+	"blocks": false,
+	"brackets": "always",
+	"colons": "always",
+	"colors": "always",
+	"commaSpace": "always",
+	"commentSpace": "always",
+	"cssLiteral": "never",
+	"customProperties": [],
+	"depthLimit": false,
+	"duplicates": true,
+	"efficient": "always",
+	"exclude": [],
+	"extendPref": "@extends",
+	"globalDupe": true,
+	"groupOutputByFile": true,
+	"indentPref": false,
+	"leadingZero": "always",
+	"maxErrors": false,
+	"maxWarnings": false,
+	"mixed": true,
+	"mixins": [],
+	"namingConvention": false,
+	"namingConventionStrict": false,
+	"none": "always",
+	"noImportant": false,
+	"parenSpace": "never",
+	"placeholders": "always",
+	"prefixVarsWithDollar": "always",
+	"quotePref": "double",
+	"reporterOptions": {
+		"columns": ["lineData", "severity", "description", "rule"],
+		"columnSplitter": "	",
+		"showHeaders": false,
+		"truncate": true
+	},
+	"semicolons": "never",
+	"sortOrder": ["grouped", "alphabetical"],
+	"stackedProperties": "never",
+	"trailingWhitespace": "never",
+	"universal": false,
+	"valid": true,
+	"zeroUnits": "never",
+	"zIndexNormalize": false,
+	"stylusSupremacy.selectorSeparator": ",\n",
+	"stylusSupremacy.insertNewLineAroundBlocks": true
+}

package.json

@@ -13,11 +13,15 @@
 	},
 	"scripts": {
 		"docs:dev": "vitepress dev src",
-		"docs:build": "vitepress build src",
+		"docs:build": "npm run lint && vitepress build src",
 		"docs:preview": "vitepress preview src",
-		"format": "prettier --check --write .",
+		"lint": "npm run lint:prettier && npm run lint:mdl && npm run lint:style",
-		"format:fail": "prettier --check .",
+		"lint:fix": "npm run lint:prettier:fix && npm run lint:style:fix",
-		"lint:mdl": "markdownlint \"**/*.md\" \".github/**/*.md\" --enable sentences-per-line --disable MD025 MD033"
+		"lint:prettier": "prettier --check \"src/**/*\"",
+		"lint:prettier:fix": "prettier --check --write \"src/**/*\"",
+		"lint:mdl": "markdownlint \"**/*.md\" \".github/**/*.md\" --enable sentences-per-line --disable MD025 MD033",
+		"lint:style": "stylelint \"**/*.{styl,vue}\" \"src/.vitepress/**/*.{styl,vue}\"",
+		"lint:style:fix": "stylelint --fix \"**/*.{styl,vue}\" \"src/.vitepress/**/*.{styl,vue}\""
 	},
 	"devDependencies": {
 		"@mdit/plugin-attrs": "^0.4.8",
@@ -34,6 +38,9 @@
 		"prettier": "^3.0.0",
 		"sentences-per-line": "^0.2.1",
 		"sitemap": "^7.1.1",
+		"stylelint": "^15.10.2",
+		"stylelint-stylus": "^0.18.0",
+		"stylus": "^0.59.0",
 		"vitepress": "^1.0.0-beta.6",
 		"vue": "^3.3.4"
 	},

src/.vitepress/theme/index.ts

@@ -2,7 +2,7 @@
 import { h } from "vue";
 import Theme from "vitepress/theme";
 import CustomLayout from "./layouts/CustomLayout.vue";
-import "./styles/style.css";
+import "./styles/base.styl";
 
 export default {
 	extends: Theme,

src/.vitepress/theme/styles/base.styl

@@ -0,0 +1,89 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+	--vp-c-brand: #818cf8
+	--vp-c-brand-light: #a0a8f9
+	--vp-c-brand-lighter: #c0c5fb
+	--vp-c-brand-lightest: #dfe2fd
+	--vp-c-brand-dark: #6069ba
+	--vp-c-brand-darker: #40467c
+	--vp-c-brand-darkest: #20233e
+	--vp-c-brand-dimm: rgba(100, 108, 255, 0.08)
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+	--vp-button-brand-border: var(--vp-c-brand-light)
+	--vp-button-brand-text: var(--vp-c-black)
+	--vp-button-brand-bg: var(--vp-c-brand)
+	--vp-button-brand-hover-border: var(--vp-c-brand-light)
+	--vp-button-brand-hover-text: var(--vp-c-black)
+	--vp-button-brand-hover-bg: var(--vp-c-brand-light)
+	--vp-button-brand-active-border: var(--vp-c-brand-light)
+	--vp-button-brand-active-text: var(--vp-c-black)
+	--vp-button-brand-active-bg: var(--vp-button-brand-bg)
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+	--vp-home-hero-name-color: transparent
+	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark))
+	--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-light) 50%, var(--vp-c-brand-lighter) 50%)
+	--vp-home-hero-image-filter: blur(40px)
+}
+
+.dark {
+	--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-darker) 25%, var(--vp-c-brand-darkest) 25%)
+}
+
+@media (min-width 640px) {
+	:root {
+		--vp-home-hero-image-filter: blur(56px)
+	}
+}
+
+@media (min-width 960px) {
+	:root {
+		--vp-home-hero-image-filter: blur(72px)
+	}
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+	--vp-custom-block-tip-border: var(--vp-c-brand)
+	--vp-custom-block-tip-text: var(--vp-c-brand-darker)
+	--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
+}
+
+.dark {
+	--vp-custom-block-tip-border: var(--vp-c-brand)
+	--vp-custom-block-tip-text: var(--vp-c-brand-lightest)
+	--vp-custom-block-tip-bg: var(--vp-c-brand-dimm)
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+	--docsearch-primary-color: var(--vp-c-brand) !important
+}
+
+.VPImage.image-src {
+	border-radius: 8px
+}

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

@@ -1,32 +0,0 @@
-.page-neko .image-bg {
-	display: none;
-}
-
-.page-neko ::selection {
-	background: rgba(255, 109, 137, 0.2);
-}
-
-/**
- * Colors
- * -------------------------------------------------------------------------- */
-
-:root .page-neko {
-	--vp-c-brand: #ff6884 !important;
-	--vp-c-brand-light: #ff8da2;
-	--vp-c-brand-lighter: #ffb3c1;
-	--vp-c-brand-lightest: #ffd9e0;
-	--vp-c-brand-dark: #bf4e63;
-	--vp-c-brand-darker: #7f3442;
-	--vp-c-brand-darkest: #3f1a21;
-	--vp-c-brand-dimm: rgba(255, 109, 137, 0.08);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-: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/neko.styl

@@ -0,0 +1,34 @@
+.page-neko {
+	.image-bg {
+		display: none
+	}
+
+	::selection {
+		background: rgba(255, 109, 137, 0.2)
+	}
+}
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root .page-neko {
+	--vp-c-brand: #ff6884 !important
+	--vp-c-brand-light: #ff8da2
+	--vp-c-brand-lighter: #ffb3c1
+	--vp-c-brand-lightest: #ffd9e0
+	--vp-c-brand-dark: #bf4e63
+	--vp-c-brand-darker: #7f3442
+	--vp-c-brand-darkest: #3f1a21
+	--vp-c-brand-dimm: rgba(255, 109, 137, 0.08)
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+: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/tachiyomi-az.css

@@ -1,396 +0,0 @@
-.page-tachiyomiaz .image-bg {
-	display: none;
-}
-
-.page-tachiyomiaz ::selection {
-	background: rgba(255, 204, 77, 0.2);
-}
-
-/**
- * Colors
- * -------------------------------------------------------------------------- */
-
-:root .page-tachiyomiaz {
-	--vp-c-brand: #ffcc4d;
-	--vp-c-brand-light: #ffd879;
-	--vp-c-brand-lighter: #ffe5a6;
-	--vp-c-brand-lightest: #fff2d2;
-	--vp-c-brand-dark: #bf9939;
-	--vp-c-brand-darker: #7f6626;
-	--vp-c-brand-darkest: #3f3313;
-	--vp-c-brand-dimm: rgba(255, 204, 77, 0.08);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-: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);
-}
-
-/**
- * Component: Dumb
- * -------------------------------------------------------------------------- */
-
-@font-face {
-	font-family: "Comic Sans MS";
-	src: url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot");
-	src:
-		url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot?#iefix") format("embedded-opentype"),
-		url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff2") format("woff2"),
-		url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff") format("woff"),
-		url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.ttf") format("truetype"),
-		url("//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.svg#Comic Sans MS") format("svg");
-}
-.azContainer {
-	width: 100%;
-	overflow: hidden;
-}
-.azContainer .azMarquee {
-	display: inline-block;
-	overflow: hidden;
-	white-space: nowrap;
-	animation: marquee 10s linear infinite;
-	padding-left: 100%;
-}
-.azContainer .azMarquee .azWiggleText {
-	padding: 2em;
-	width: fit-content;
-	animation: wiggleAnimation 1s ease-out infinite;
-}
-.azContainer .azMarquee .azWiggleText:hover {
-	animation: barrelRollAnimation 0.6s;
-}
-.azContainer .azMarquee .azWiggleText .azText {
-	font-family: "Comic Sans MS", "Comic Sans", cursive;
-	font-size: 2em;
-	display: inline-block;
-	-webkit-text-stroke: 1px #000;
-	text-shadow:
-		-1px -1px 0 #000,
-		1px -1px 0 #000,
-		-1px 1px 0 #000,
-		1px 1px 0 #000;
-	animation:
-		rainbowTextColorAnimation 0.5s linear infinite,
-		scaleXTextAnimation 2s infinite;
-}
-@-moz-keyframes marquee {
-	0% {
-		transform: translate(0, 0);
-	}
-	100% {
-		transform: translate(-100%, 0);
-	}
-}
-@-webkit-keyframes marquee {
-	0% {
-		transform: translate(0, 0);
-	}
-	100% {
-		transform: translate(-100%, 0);
-	}
-}
-@-o-keyframes marquee {
-	0% {
-		transform: translate(0, 0);
-	}
-	100% {
-		transform: translate(-100%, 0);
-	}
-}
-@keyframes marquee {
-	0% {
-		transform: translate(0, 0);
-	}
-	100% {
-		transform: translate(-100%, 0);
-	}
-}
-@-moz-keyframes barrelRollAnimation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-@-webkit-keyframes barrelRollAnimation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-@-o-keyframes barrelRollAnimation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-@keyframes barrelRollAnimation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-@-moz-keyframes wiggleAnimation {
-	0% {
-		transform: rotate(0deg);
-	}
-	25% {
-		transform: rotate(-15deg);
-	}
-	50% {
-		transform: rotate(0deg);
-	}
-	75% {
-		transform: rotate(15deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}
-@-webkit-keyframes wiggleAnimation {
-	0% {
-		transform: rotate(0deg);
-	}
-	25% {
-		transform: rotate(-15deg);
-	}
-	50% {
-		transform: rotate(0deg);
-	}
-	75% {
-		transform: rotate(15deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}
-@-o-keyframes wiggleAnimation {
-	0% {
-		transform: rotate(0deg);
-	}
-	25% {
-		transform: rotate(-15deg);
-	}
-	50% {
-		transform: rotate(0deg);
-	}
-	75% {
-		transform: rotate(15deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}
-@keyframes wiggleAnimation {
-	0% {
-		transform: rotate(0deg);
-	}
-	25% {
-		transform: rotate(-15deg);
-	}
-	50% {
-		transform: rotate(0deg);
-	}
-	75% {
-		transform: rotate(15deg);
-	}
-	100% {
-		transform: rotate(0deg);
-	}
-}
-@-moz-keyframes scaleXTextAnimation {
-	0% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-	50% {
-		transform: scaleX(1) scaleY(1);
-	}
-	100% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-}
-@-webkit-keyframes scaleXTextAnimation {
-	0% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-	50% {
-		transform: scaleX(1) scaleY(1);
-	}
-	100% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-}
-@-o-keyframes scaleXTextAnimation {
-	0% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-	50% {
-		transform: scaleX(1) scaleY(1);
-	}
-	100% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-}
-@keyframes scaleXTextAnimation {
-	0% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-	50% {
-		transform: scaleX(1) scaleY(1);
-	}
-	100% {
-		transform: scaleX(0.5) scaleY(0.5);
-	}
-}
-@-moz-keyframes rainbowTextColorAnimation {
-	0% {
-		color: #f00;
-	}
-	10% {
-		color: #f90;
-	}
-	20% {
-		color: #cf0;
-	}
-	30% {
-		color: #3f0;
-	}
-	40% {
-		color: #0f6;
-	}
-	50% {
-		color: #0ff;
-	}
-	60% {
-		color: #06f;
-	}
-	70% {
-		color: #30f;
-	}
-	80% {
-		color: #c0f;
-	}
-	90% {
-		color: #f09;
-	}
-	100% {
-		color: #f00;
-	}
-}
-@-webkit-keyframes rainbowTextColorAnimation {
-	0% {
-		color: #f00;
-	}
-	10% {
-		color: #f90;
-	}
-	20% {
-		color: #cf0;
-	}
-	30% {
-		color: #3f0;
-	}
-	40% {
-		color: #0f6;
-	}
-	50% {
-		color: #0ff;
-	}
-	60% {
-		color: #06f;
-	}
-	70% {
-		color: #30f;
-	}
-	80% {
-		color: #c0f;
-	}
-	90% {
-		color: #f09;
-	}
-	100% {
-		color: #f00;
-	}
-}
-@-o-keyframes rainbowTextColorAnimation {
-	0% {
-		color: #f00;
-	}
-	10% {
-		color: #f90;
-	}
-	20% {
-		color: #cf0;
-	}
-	30% {
-		color: #3f0;
-	}
-	40% {
-		color: #0f6;
-	}
-	50% {
-		color: #0ff;
-	}
-	60% {
-		color: #06f;
-	}
-	70% {
-		color: #30f;
-	}
-	80% {
-		color: #c0f;
-	}
-	90% {
-		color: #f09;
-	}
-	100% {
-		color: #f00;
-	}
-}
-@keyframes rainbowTextColorAnimation {
-	0% {
-		color: #f00;
-	}
-	10% {
-		color: #f90;
-	}
-	20% {
-		color: #cf0;
-	}
-	30% {
-		color: #3f0;
-	}
-	40% {
-		color: #0f6;
-	}
-	50% {
-		color: #0ff;
-	}
-	60% {
-		color: #06f;
-	}
-	70% {
-		color: #30f;
-	}
-	80% {
-		color: #c0f;
-	}
-	90% {
-		color: #f09;
-	}
-	100% {
-		color: #f00;
-	}
-}

src/.vitepress/theme/styles/forks/tachiyomi-az.styl

@@ -0,0 +1,177 @@
+.page-tachiyomi-az {
+	.image-bg {
+		display: none
+	}
+
+	::selection {
+		background: rgba(255, 204, 77, 0.2)
+	}
+}
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-az {
+	--vp-c-brand: #ffcc4d
+	--vp-c-brand-light: #ffd879
+	--vp-c-brand-lighter: #ffe5a6
+	--vp-c-brand-lightest: #fff2d2
+	--vp-c-brand-dark: #bf9939
+	--vp-c-brand-darker: #7f6626
+	--vp-c-brand-darkest: #3f3313
+	--vp-c-brand-dimm: rgba(255, 204, 77, 0.08)
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-az {
+	--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)
+}
+
+/**
+ * Component: Dumb
+ * -------------------------------------------------------------------------- */
+@font-face {
+	font-family: 'Comic Sans MS'
+	src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot')
+	src: url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.eot?#iefix') format('embedded-opentype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff2') format('woff2'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.woff') format('woff'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.ttf') format('truetype'), url('//db.onlinewebfonts.com/t/7cc6719bd5f0310be3150ba33418e72e.svg#Comic Sans MS') format('svg')
+}
+
+.azContainer {
+	width: 100%
+	overflow: hidden
+
+	.azMarquee {
+		display: inline-block
+		overflow: hidden
+		white-space: nowrap
+		animation: marquee 10s linear infinite
+		padding-left: 100%
+
+		.azWiggleText {
+			padding: 2em
+			width: fit-content
+			animation: wiggleAnimation 1s ease-out infinite
+
+			&:hover {
+				animation: barrelRollAnimation 0.6s
+			}
+
+			.azText {
+				font-family: 'Comic Sans MS', 'Comic Sans', cursive
+				font-size: 2em
+				display: inline-block
+				-webkit-text-stroke: 1px black
+				text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
+				animation: rainbowTextColorAnimation 0.5s linear infinite, scaleXTextAnimation 2s infinite
+			}
+		}
+	}
+}
+
+@keyframes marquee {
+	0% {
+		transform: translate(0, 0)
+	}
+
+	100% {
+		transform: translate(-100%, 0)
+	}
+}
+
+@keyframes barrelRollAnimation {
+	from {
+		transform: rotate(0)
+	}
+
+	to {
+		transform: rotate(360deg)
+	}
+}
+
+@keyframes wiggleAnimation {
+	0% {
+		transform: rotate(0)
+	}
+
+	25% {
+		transform: rotate(-15deg)
+	}
+
+	50% {
+		transform: rotate(0)
+	}
+
+	75% {
+		transform: rotate(15deg)
+	}
+
+	100% {
+		transform: rotate(0)
+	}
+}
+
+@keyframes scaleXTextAnimation {
+	0% {
+		transform: scaleX(0.5) scaleY(0.5)
+	}
+
+	50% {
+		transform: scaleX(1) scaleY(1)
+	}
+
+	100% {
+		transform: scaleX(0.5) scaleY(0.5)
+	}
+}
+
+@keyframes rainbowTextColorAnimation {
+	0% {
+		color: hsl(0, 100%, 50%)
+	}
+
+	10% {
+		color: hsl(36, 100%, 50%)
+	}
+
+	20% {
+		color: hsl(72, 100%, 50%)
+	}
+
+	30% {
+		color: hsl(108, 100%, 50%)
+	}
+
+	40% {
+		color: hsl(144, 100%, 50%)
+	}
+
+	50% {
+		color: hsl(180, 100%, 50%)
+	}
+
+	60% {
+		color: hsl(216, 100%, 50%)
+	}
+
+	70% {
+		color: hsl(252, 100%, 50%)
+	}
+
+	80% {
+		color: hsl(288, 100%, 50%)
+	}
+
+	90% {
+		color: hsl(324, 100%, 50%)
+	}
+
+	100% {
+		color: hsl(360, 100%, 50%)
+	}
+}

src/.vitepress/theme/styles/forks/tachiyomi-j2k.css

@@ -1,32 +0,0 @@
-.page-tachiyomij2k .image-bg {
-	display: none;
-}
-
-.page-tachiyomij2k ::selection {
-	background: rgba(9, 82, 175, 0.2);
-}
-
-/**
- * Colors
- * -------------------------------------------------------------------------- */
-
-:root .page-tachiyomij2k {
-	--vp-c-brand: #0952af;
-	--vp-c-brand-light: #467dc3;
-	--vp-c-brand-lighter: #84a8d7;
-	--vp-c-brand-lightest: #c1d3eb;
-	--vp-c-brand-dark: #063d83;
-	--vp-c-brand-darker: #042957;
-	--vp-c-brand-darkest: #02142b;
-	--vp-c-brand-dimm: rgba(9, 82, 175, 0.08);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-: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/tachiyomi-j2k.styl

@@ -0,0 +1,34 @@
+.page-tachiyomi-j2k {
+	.image-bg {
+		display: none
+	}
+
+	::selection {
+		background: rgba(9, 82, 175, 0.2)
+	}
+}
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-j2k {
+	--vp-c-brand: #0952af
+	--vp-c-brand-light: #467dc3
+	--vp-c-brand-lighter: #84a8d7
+	--vp-c-brand-lightest: #c1d3eb
+	--vp-c-brand-dark: #063d83
+	--vp-c-brand-darker: #042957
+	--vp-c-brand-darkest: #02142b
+	--vp-c-brand-dimm: rgba(9, 82, 175, 0.08)
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-j2k {
+	--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/tachiyomi-sy.css

@@ -1,32 +0,0 @@
-.page-tachiyomisy .image-bg {
-	display: none;
-}
-
-.page-tachiyomisy ::selection {
-	background: rgba(206, 40, 40, 0.2);
-}
-
-/**
- * Colors
- * -------------------------------------------------------------------------- */
-
-:root .page-tachiyomisy {
-	--vp-c-brand: #ce2828;
-	--vp-c-brand-light: #da5d5d;
-	--vp-c-brand-lighter: #e69393;
-	--vp-c-brand-lightest: #f2c9c9;
-	--vp-c-brand-dark: #9a1e1e;
-	--vp-c-brand-darker: #671414;
-	--vp-c-brand-darkest: #330a0a;
-	--vp-c-brand-dimm: rgba(206, 40, 40, 0.08);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-: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/.vitepress/theme/styles/forks/tachiyomi-sy.styl

@@ -0,0 +1,34 @@
+.page-tachiyomi-sy {
+	.image-bg {
+		display: none
+	}
+
+	::selection {
+		background: rgba(206, 40, 40, 0.2)
+	}
+}
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-sy {
+	--vp-c-brand: #ce2828
+	--vp-c-brand-light: #da5d5d
+	--vp-c-brand-lighter: #e69393
+	--vp-c-brand-lightest: #f2c9c9
+	--vp-c-brand-dark: #9a1e1e
+	--vp-c-brand-darker: #671414
+	--vp-c-brand-darkest: #330a0a
+	--vp-c-brand-dimm: rgba(206, 40, 40, 0.08)
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root .page-tachiyomi-sy {
+	--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/style.css

@@ -1,99 +0,0 @@
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
-
-/**
- * Colors
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-c-brand: #818cf8;
-	--vp-c-brand-light: #a0a8f9;
-	--vp-c-brand-lighter: #c0c5fb;
-	--vp-c-brand-lightest: #dfe2fd;
-	--vp-c-brand-dark: #6069ba;
-	--vp-c-brand-darker: #40467c;
-	--vp-c-brand-darkest: #20233e;
-	--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-button-brand-border: var(--vp-c-brand-light);
-	--vp-button-brand-text: var(--vp-c-black);
-	--vp-button-brand-bg: var(--vp-c-brand);
-	--vp-button-brand-hover-border: var(--vp-c-brand-light);
-	--vp-button-brand-hover-text: var(--vp-c-black);
-	--vp-button-brand-hover-bg: var(--vp-c-brand-light);
-	--vp-button-brand-active-border: var(--vp-c-brand-light);
-	--vp-button-brand-active-text: var(--vp-c-black);
-	--vp-button-brand-active-bg: var(--vp-button-brand-bg);
-}
-
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-home-hero-name-color: transparent;
-	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark));
-
-	--vp-home-hero-image-background-image: linear-gradient(
-		-45deg,
-		var(--vp-c-brand-light) 50%,
-		var(--vp-c-brand-lighter) 50%
-	);
-	--vp-home-hero-image-filter: blur(40px);
-}
-
-.dark {
-	--vp-home-hero-image-background-image: linear-gradient(
-		-45deg,
-		var(--vp-c-brand-darker) 25%,
-		var(--vp-c-brand-darkest) 25%
-	);
-}
-
-@media (min-width: 640px) {
-	:root {
-		--vp-home-hero-image-filter: blur(56px);
-	}
-}
-
-@media (min-width: 960px) {
-	:root {
-		--vp-home-hero-image-filter: blur(72px);
-	}
-}
-
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-custom-block-tip-border: var(--vp-c-brand);
-	--vp-custom-block-tip-text: var(--vp-c-brand-darker);
-	--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-}
-
-.dark {
-	--vp-custom-block-tip-border: var(--vp-c-brand);
-	--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
-	--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
-}
-
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-
-.DocSearch {
-	--docsearch-primary-color: var(--vp-c-brand) !important;
-}
-
-.VPImage.image-src {
-	border-radius: 8px;
-}

src/.vitepress/theme/styles/tree.css

@@ -1,74 +0,0 @@
-.tree {
-	border-radius: 8px;
-	margin: 16px;
-	padding: 16px;
-	color: var(--vp-code-block-color);
-	background-color: var(--vp-code-block-bg);
-	font-family: "Roboto Mono", monospace;
-	font-size: 0.85rem;
-	line-height: 1.5;
-}
-
-.tree > ul {
-	margin: 0;
-}
-
-.tree li + li {
-	margin-top: 0;
-}
-
-.tree span.folder.main {
-	color: var(--vp-c-brand) !important;
-}
-
-.tree span.folder,
-.tree span.file.zip {
-	color: var(--vp-c-brand-lighter) !important;
-}
-
-.tree ul {
-	padding-left: 5px;
-	list-style: none;
-}
-
-.tree ul li {
-	position: relative;
-	padding-left: 15px;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.tree ul li:before {
-	top: 15px;
-	left: 0;
-	width: 10px;
-	height: 1px;
-	margin: auto;
-}
-
-.tree ul li:after {
-	top: 0;
-	bottom: 0;
-	left: 0;
-	width: 1px;
-	height: 100%;
-}
-
-.tree ul li:before,
-.tree ul li:after {
-	position: absolute;
-	content: "";
-	background-color: var(--vp-c-code-dimm);
-}
-
-.tree ul li:last-child:after {
-	height: 15px;
-}
-
-.tree-icon {
-	height: 12px;
-	width: 12px;
-	margin-right: 6px;
-	display: inline-block;
-}

src/.vitepress/theme/styles/tree.styl

@@ -0,0 +1,82 @@
+.tree {
+	border-radius: 8px
+	margin: 16px
+	padding: 16px
+	color: var(--vp-code-block-color)
+	background-color: var(--vp-code-block-bg)
+	font-family: 'Roboto Mono', monospace
+	font-size: 0.85rem
+	line-height: 1.5
+
+	& > ul {
+		margin: 0
+	}
+
+	li {
+		& + li {
+			margin-top: 0
+		}
+	}
+
+	span {
+		&.folder {
+			&.main {
+				color: var(--vp-c-brand) !important
+			}
+		}
+
+		&.folder,
+		&.file.zip {
+			color: var(--vp-c-brand-lighter) !important
+		}
+	}
+
+	ul {
+		padding-left: 5px
+		list-style: none
+
+		li {
+			position: relative
+			padding-left: 15px
+			-webkit-box-sizing: border-box
+			-moz-box-sizing: border-box
+			box-sizing: border-box
+
+			&:before {
+				top: 15px
+				left: 0
+				width: 10px
+				height: 1px
+				margin: auto
+			}
+
+			&:after {
+				top: 0
+				bottom: 0
+				left: 0
+				width: 1px
+				height: 100%
+			}
+
+			&:before,
+			&:after {
+				position: absolute
+				content: ''
+				background-color: var(--vp-c-code-dimm)
+			}
+
+			&:last-child {
+				&:after {
+					height: 15px
+				}
+			}
+		}
+	}
+
+	&-icon {
+		height: 12px
+		width: 12px
+		margin-right: 6px
+		display: inline-block
+	}
+}

src/docs/guides/local-manga.md

@@ -230,5 +230,5 @@ The app will then use your custom image in the local source listing.
 
 
 <style scoped>
-	@import "../../.vitepress/theme/styles/tree.css"
+	@import "../../.vitepress/theme/styles/tree.styl"
 </style>

src/forks/neko.md

@@ -60,5 +60,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/styles/forks/neko.css"
+	@import "../.vitepress/theme/styles/forks/neko.styl"
 </style>

src/forks/tachiyomi-az.md

@@ -3,7 +3,7 @@ title: TachiyomiAZ
 description: Hentai-focused with legacy features
 
 layout: home
-pageClass: page-tachiyomiaz
+pageClass: page-tachiyomi-az
 
 hero:
   name: TachiyomiAZ
@@ -78,5 +78,5 @@ const members = [
 </div>
 
 <style scoped>
-	@import "../.vitepress/theme/styles/forks/tachiyomi-az.css"
+	@import "../.vitepress/theme/styles/forks/tachiyomi-az.styl"
 </style>

src/forks/tachiyomi-j2k.md

@@ -3,7 +3,7 @@ title: TachiyomiJ2K
 description: New approach to the design of the base app along with several other enhancements
 
 layout: home
-pageClass: page-tachiyomij2k
+pageClass: page-tachiyomi-j2k
 
 hero:
   name: TachiyomiJ2K
@@ -52,5 +52,5 @@ const members = [
 </script>
 
 <style>
-	@import "../.vitepress/theme/styles/forks/tachiyomi-j2k.css"
+	@import "../.vitepress/theme/styles/forks/tachiyomi-j2k.styl"
 </style>

src/forks/tachiyomi-sy.md

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

stylelint.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+	plugins: ["stylelint-stylus"],
+	rules: {
+		"stylus/pythonic": "never",
+		"stylus/declaration-colon": "always",
+		"stylus/semicolon": "never",
+		"stylus/single-line-comment-double-slash-space-after": "always",
+		"stylus/property-no-unknown": null,
+		"stylus/selector-type-no-unknown": null,
+		"stylus/selector-list-comma": "always",
+		"stylus/indentation": [
+			"tab",
+			{
+				indentInsideParens: "twice",
+			},
+		],
+		"rule-empty-line-before": [
+			"always",
+			{
+				except: ["first-nested"],
+			},
+		],
+	},
+	extends: ["stylelint-stylus/standard"],
+};