Replace styles with blackstone.css (#171)

package.json

@@ -43,5 +43,8 @@
 	},
 	"browserslist": [
 		"defaults"
-	]
+	],
+	"dependencies": {
+		"blackstone.css": "^0.1.2"
+	}
 }

public/master.css

@@ -1,72 +1,8 @@
-:root {
-	--colour-black: #24272d;
-	--colour-blue: #61afef;
-	--colour-green: #98c379;
-	--colour-orange: #e5c07b;
-	--colour-red: #e06c75;
-	--colour-teal: #56b6c2;
-
-	--button-text-colour: #f8f8f8;
-	--card-colour: #37393f;
-	--card-shadow-colour: #0005;
-	--input-shadow-colour: #0005;
-	--load-done-colour: #f0f0f0;
-	--load-remaining-colour: #111;
-	--text-colour: #f0f0f0;
-}
-
 body {
-	font-family: Avenir, Helvetica, Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	background-color: #111;
+	-webkit-font-smoothing: antialiased;
 	background-attachment: fixed;
+	background-color: #111;
+	font-family: Helvetica, Arial, sans-serif;
 	margin: 0;
 }
-
-* {
-	box-sizing: border-box;
-}
-
-button {
-	font-weight: bold;
-	color: var(--button-text-colour);
-}
-
-button:hover {
-	cursor: pointer;
-}
-
-input,
-button {
-	border: none;
-	border-radius: 0.1em;
-	padding: 0.5rem;
-	box-shadow: 0 0 0.2em var(--input-shadow-colour);
-	font-size: 0.9rem;
-	transition: 0.2s;
-}
-
-input:hover,
-button:hover {
-	box-shadow: 0 0.1em 0.4em var(--input-shadow-colour);
-}
-
-h1 {
-	font-size: 1.6em;
-}
-
-h2 {
-	font-size: 1.4em;
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-	opacity: 0.7;
-	transition: opacity 0.2s;
-}
-
-a:hover {
-	opacity: 1;
-}

src/components/FooterCard.vue

@@ -1,31 +1,50 @@
 <template>
-	<ContentCard>
-		<a href="https://github.com/man90es/BDO-Leaderboards" target="_blank" :style="{ backgroundImage: assets.star }">GitHub</a>
-		<a href="https://github.com/man90es/BDO-REST-API" target="_blank" :style="{ backgroundImage: assets.construction }">API</a>
-		<a href="https://www.hemlo.cc/finances" target="_blank" :style="{ backgroundImage: assets.donate }">Donate</a>
-		<a href="https://github.com/man90es" target="_blank">man90 © {{ (new Date()).getFullYear() }}</a>
-	</ContentCard>
+	<div class="bs-card">
+		<a
+			:href
+			:key="href"
+			:style="{ backgroundImage: icon }"
+			class="bs-link"
+			target="_blank"
+			v-for="{ href, icon, name } of links"
+		>
+			{{ name }}
+		</a>
+	</div>
 </template>
 
 <script lang="ts" setup>
-	import { ContentCard } from "@/components"
-
-	const assets = {
-		construction: `url(${process.env.BASE_URL}assets/construction_black_24dp.svg)`,
-		donate: `url(${process.env.BASE_URL}assets/paid_black_24dp.svg)`,
-		star: `url(${process.env.BASE_URL}assets/star_black_24dp.svg)`,
-	}
+	const links = [
+		{
+			href: "https://github.com/man90es/BDO-Leaderboards",
+			icon: `url(${process.env.BASE_URL}assets/star_black_24dp.svg)`,
+			name: "GitHub",
+		},
+		{
+			href: "https://github.com/man90es/BDO-REST-API",
+			icon: `url(${process.env.BASE_URL}assets/construction_black_24dp.svg)`,
+			name: "API",
+		},
+		{
+			href: "https://www.hemlo.cc/finances",
+			icon: `url(${process.env.BASE_URL}assets/paid_black_24dp.svg)`,
+			name: "Donate",
+		},
+		{
+			href: "https://github.com/man90es",
+			name: `man90 © ${(new Date()).getFullYear()}`,
+		},
+	]
 </script>
 
 <style scoped>
-	a {
+	.bs-link {
 		background-repeat: no-repeat;
 		background-size: contain;
-		color: var(--colour-black);
+		color: #24272d;
 		filter: invert(1);
 		font-size: 0.9em;
 		padding-left: 1.5em;
-		transition: 0.2s;
 
 		&:last-child {
 			padding-left: 0;

src/components/HeaderCard.vue

@@ -1,27 +1,27 @@
 <template>
-	<ContentCard>
+	<div class="bs-card">
 		<h1>BDO Leaderboards</h1>
 		<span>Your Black Desert Online guild's leaderboard is already here!</span>
-		<img id="embellishment" src="../../public/assets/spiral.svg">
-	</ContentCard>
+		<img
+			id="embellishment"
+			src="../../public/assets/spiral.svg"
+		>
+	</div>
 </template>
 
-<script lang="ts" setup>
-	import { ContentCard } from "@/components"
-</script>
-
 <style scoped>
-	.content-card > * {
+	.bs-card>* {
 		grid-column: 1/3;
 		text-align: center;
 	}
 
 	h1 {
+		font-size: 1.6em;
 		margin: 0;
 	}
 
 	span {
-		opacity: 0.8;
+		opacity: 0.7;
 	}
 
 	#embellishment {

src/components/index.ts

@@ -1,3 +1,2 @@
-export { default as ContentCard } from "./ContentCard.vue"
 export { default as FooterCard } from "./FooterCard.vue"
 export { default as HeaderCard } from "./HeaderCard.vue"

src/constants/disciplines.ts

@@ -0,0 +1,70 @@
+export default [
+	{
+		key: "level",
+		label: "Character level"
+	},
+	{
+		key: "contribution",
+		label: "Contribution points"
+	},
+	{
+		key: "gathering",
+		label: "Gathering"
+	},
+	{
+		key: "fishing",
+		label: "Fishing"
+	},
+	{
+		key: "hunting",
+		label: "Hunting"
+	},
+	{
+		key: "cooking",
+		label: "Cooking"
+	},
+	{
+		key: "alchemy",
+		label: "Alchemy"
+	},
+	{
+		key: "processing",
+		label: "Processing"
+	},
+	{
+		key: "training",
+		label: "Training"
+	},
+	{
+		key: "trading",
+		label: "Trading"
+	},
+	{
+		key: "farming",
+		label: "Farming"
+	},
+	{
+		key: "sailing",
+		label: "Sailing"
+	},
+	{
+		key: "barter",
+		label: "Barter"
+	},
+	{
+		key: "combat",
+		label: "Combat fame"
+	},
+	{
+		key: "life",
+		label: "Life fame"
+	},
+	{
+		key: "characters",
+		label: "Family size"
+	},
+	{
+		key: "age",
+		label: "Account age"
+	},
+]

src/constants/index.ts

@@ -0,0 +1 @@
+export { default as disciplines } from "./disciplines"

src/data/supportedServers.ts

@@ -11,25 +11,25 @@ function composeGuildLink(subdomain: string, locale: string, guildName: string,
 }
 
 const supportedServers: Set<{
-    colour: string
+    className: string
     domain: RegionEnum
     getGuildLink: (arg0: string) => string
     name: string
 }> = new Set([
     {
-        colour: "var(--colour-blue)",
+        className: "bs-button-blue",
         domain: RegionEnum.EU,
         getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, RegionEnum.EU),
         name: "Europe",
     },
     {
-        colour: "var(--colour-red)",
+        className: "bs-button-red",
         domain: RegionEnum.NA,
         getGuildLink: guildName => composeGuildLink("naeu", "en-US", guildName, RegionEnum.NA),
         name: "North America",
     },
     {
-        colour: "var(--colour-orange)",
+        className: "bs-button-orange",
         domain: RegionEnum.SA,
         getGuildLink: guildName => composeGuildLink("sa", "pt-BR", guildName, RegionEnum.SA),
         name: "South America",

src/main.ts

@@ -1,3 +1,4 @@
+import "blackstone.css"
 import { createApp } from "vue"
 import { createHead } from "@vueuse/head"
 import { createPinia } from "pinia"

src/pages/home/HomePage.vue

@@ -23,27 +23,22 @@
 		align-items: center;
 		display: flex;
 		flex-direction: column;
-		gap: 0.5em;
+		gap: 0.5rem;
 		justify-content: center;
 		min-height: 100vh;
 
+		&>* {
+			box-sizing: border-box;
+			width: 25vw;
+		}
+
 		&.mobile-layout {
 			justify-content: flex-start;
-			margin-top: 0.5em;
+			margin-top: 0.5rem;
 
-			.content-card {
-				width: calc(100vw - 1em);
+			.bs-card {
+				width: calc(100vw - 1rem);
 			}
 		}
-
-		&:not(.mobile-layout) {
-			.content-card {
-				min-width: 25em;
-			}
-		}
-	}
-
-	.content-card {
-		width: 25vw;
 	}
 </style>