Use fontsource for fonts

index.html

@@ -8,19 +8,6 @@
 		<meta name="viewport"
 			  content="width=device-width, initial-scale=1.0" />
 
-		<!-- Fonts -->
-		<link rel="preconnect"
-			  href="https://fonts.googleapis.com">
-		<link rel="preconnect"
-			  href="https://fonts.gstatic.com"
-			  crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&display=swap"
-			  rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap"
-			  rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@900&display=swap"
-			  rel="stylesheet">
-
 		<!-- Meta -->
 		<title>Bookshelf</title>
 		<meta name="description"

package.json

@@ -10,6 +10,9 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@fontsource/kanit": "^4.5.10",
+		"@fontsource/open-sans": "^4.5.13",
+		"@fontsource/roboto-slab": "^4.5.9",
 		"buffer": "^6.0.3",
 		"debounce": "^1.2.1",
 		"fimfic-parser": "https://github.com/Jaezmien/fimfic-parser",

src/App.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import DragDrop from '@/views/drag.vue';
+import "@fontsource/open-sans/300-italic.css";
+import "@fontsource/open-sans/300.css";
+import "@fontsource/open-sans/400-italic.css";
+import "@fontsource/open-sans/400.css";
+import "@fontsource/open-sans/600-italic.css";
+import "@fontsource/open-sans/600.css";
 import { RouterView } from 'vue-router';
 import { useDatabaseStore } from './stores/database';
 import FadeTransition from './transitions/FadeTransition.vue';

src/components/Bookshelf.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import '@fontsource/roboto-slab/500.css';
+
 defineProps({
 	clickable: {
 		type: Boolean,

src/components/StoryView/Navigation.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FadeTransition from '@/transitions/FadeTransition.vue';
 import { BookshelfChapterInfo } from '@/types';
+import '@fontsource/kanit/900.css';
 import { FIMStory } from 'fimfic-parser';
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
 import { computed, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';

src/views/index.vue

@@ -177,6 +177,7 @@ $BACKGROUND: #1f2229;
 #index-container {
 	height: 100vh;
 	overflow-x: hidden;
+
 	display: grid;
 
 	grid-template-areas:
@@ -195,10 +196,17 @@ $BACKGROUND: #1f2229;
 	display: flex;
 	flex-direction: column;
 
+	min-height: 0;
+
 	#story-bookshelf-stories {
 		flex-grow: 1;
 
 		background-color: lighten($BACKGROUND, 10%);
+		display: flex;
+		flex-direction: column;
+
+		height: 100%;
+		overflow-y: auto;
 
 		.story {
 			--completion: 0%;
@@ -311,121 +319,6 @@ $BACKGROUND: #1f2229;
 	}
 }
 
-#story-add-container {
-	grid-area: insert;
-
-	display: grid;
-	place-items: center;
-
-	#story-add {
-		height: 6rem;
-		width: 100%;
-		display: block;
-		border-radius: 1rem;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-
-		border: dashed 2px transparentize(white, 0.8);
-		transition: border 200ms ease;
-
-		&.dragging {
-			border: dashed 2px white;
-		}
-
-		cursor: pointer;
-
-		p {
-			margin: 0 1rem;
-			text-align: center;
-		}
-
-		// Animation
-		.spinner {
-			animation-name: spin;
-			animation-timing-function: ease-in-out;
-			animation-iteration-count: infinite;
-			animation-duration: 2000ms;
-		}
-
-		@keyframes spin {
-			0% {
-				transform: rotate(0deg);
-			}
-
-			100% {
-				transform: rotate(720deg);
-			}
-		}
-	}
-}
-
-#story-list-options {
-	grid-area: options;
-
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-}
-
-#story-list-container {
-	grid-area: list;
-	overflow-y: auto;
-	overflow-x: hidden;
-	max-height: 100%;
-
-	#story-container-empty {
-		text-align: center;
-		opacity: 50%;
-	}
-
-	background-color: lighten($BACKGROUND, 10%);
-	border-radius: 0.5rem;
-
-	.os-host {
-		max-height: inherit;
-	}
-
-	.story {
-		--completion: 0%;
-		--progress-light: #{transparent};
-		--progress-dark: #{lighten($BACKGROUND, 5%)};
-
-		padding: 1rem 2rem;
-		background-color: transparent;
-		transition: background 200ms ease;
-
-		cursor: pointer;
-
-		&:hover {
-			--progress-light: #{transparentize(black, 0.9)};
-			--progress-dark: #{lighten($BACKGROUND, 2%)};
-		}
-
-		background: linear-gradient(90deg, var(--progress-dark) var(--completion), var(--progress-light) var(--completion));
-
-		.story-title,
-		.story-author {
-			margin: 0;
-		}
-
-		.story-delete {
-			float: right;
-			cursor: pointer;
-			color: lighten(red, 20%);
-			margin-left: 1rem;
-			transition: color 200ms ease;
-
-			&:hover {
-				color: lighten(red, 0%);
-			}
-		}
-	}
-
-}
-
 input[type=file] {
 	display: none;
 }

yarn.lock

@@ -905,6 +905,21 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@fontsource/kanit@^4.5.10":
+  version "4.5.10"
+  resolved "https://registry.yarnpkg.com/@fontsource/kanit/-/kanit-4.5.10.tgz#603bd61ad3a648edbf5f584ed67f4bbd0c332500"
+  integrity sha512-spOSUiwTw6Y7pD0mU6mzydiG5i3SUilXbzISCJKAWWDGljGpTF724lGHUdQ/QFiLrPo9KAYbThcwbNKGUx+/NA==
+
+"@fontsource/open-sans@^4.5.13":
+  version "4.5.13"
+  resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.5.13.tgz#2c99e4c055d129a75f14c11b77d040282e0388b8"
+  integrity sha512-/UzqP7ZFk145XAq8KG4pvFPP7UQhtreDGXgqXZjagCDreKxcrhwn/x7DYz9rPcycWkLUVApIybcoczGZiM0cRg==
+
+"@fontsource/roboto-slab@^4.5.9":
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto-slab/-/roboto-slab-4.5.9.tgz#4e24dfb20c4ab89c3cb9c43ff736c4bb4e623a85"
+  integrity sha512-NTb8uSQSYqN5duI1EPZSigqrOeWkddQxixR1PhUemIXIIrmn+A3EoWOzcBlO0ZabTvHaoUSQo5bh9JOYMknjzQ==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"