refactor: Move global styles to `app.css`

.pre-commit-config.yaml

@@ -11,7 +11,7 @@ repos:
   hooks:
   - id: conventional-pre-commit
     stages: [commit-msg]
-    args: [feat, fix, chore, test, build, merge]
+    args: [feat, fix, chore, test, build, merge, refactor]
 - repo: local
   hooks:
   - id: eslint

src/app.css

@@ -95,3 +95,60 @@ html {
 hr {
   @apply separator;
 }
+
+a, button {
+	color: theme('colors.eucalyptus.400');
+	&:hover,
+	&:focus {
+		color: theme('colors.java.500');
+	}
+}
+.dark a:not(.disabled-link),button {
+	text-shadow: 0 0 5px;
+}
+.nav-link {
+	@apply text-lg;
+	font-weight: 500;
+	font-family: serif;
+}
+a.disabled-link {
+	color: rgb(128,128,128);
+	pointer-events: none;
+}
+a:not(.icon) {
+	position: relative;
+	text-decoration: inherit;
+
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		position: absolute;
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: theme('colors.java.500');
+		transform: scaleX(0);
+		transition: transform 0.3s ease;
+	}
+
+	&:hover,
+	&:focus {
+		&::after {
+			content: "";
+			position: absolute;
+			transform: scaleX(1);
+		}
+	}
+}
+a.current-link {
+	color: theme('colors.magenta.500');
+
+	&::after {
+		background-color: theme('colors.magenta.500');
+	}
+	&:hover,
+	&:focus {
+		color: theme('colors.magenta.500');
+	}
+}

src/routes/+layout.svelte

@@ -31,59 +31,6 @@
 {/if}
 
 <style>
-	:global(.nav-link) {
-		@apply text-lg;
-		font-weight: 500;
-		font-family: serif;
-	}
-	:global(a.disabled-link) {
-		color: rgb(128,128,128);
-		pointer-events: none;
-	}
-	:global(a), :global(button) {
-		color: theme('colors.eucalyptus.400');
-		&:hover,
-		&:focus {
-			color: theme('colors.java.500');
-		}
-	}
-	:global(a):not(.icon) {
-		position: relative;
-		text-decoration: inherit;
-
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			position: absolute;
-			height: 2px;
-			bottom: 0;
-			left: 0;
-			background-color: theme('colors.java.500');
-			transform: scaleX(0);
-			transition: transform 0.3s ease;
-		}
-
-		&:hover,
-		&:focus {
-			&::after {
-				content: "";
-				position: absolute;
-				transform: scaleX(1);
-			}
-		}
-	}
-	:global(a.current-link) {
-		color: theme('colors.magenta.500');
-
-		&::after {
-			background-color: theme('colors.magenta.500');
-		}
-		&:hover,
-		&:focus {
-			color: theme('colors.magenta.500');
-		}
-	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;
@@ -107,11 +54,6 @@
 			gap: 20px;
 		}
 	}
-	@media (prefers-color-scheme: dark) {
-		:global(a), :global(button) {
-			text-shadow: 0 0 5px;
-		}
-	}
 	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;