Add Hyperlegible and add a seperator to the footer

package.json

@@ -10,6 +10,7 @@
 		"astro": "astro"
 	},
 	"dependencies": {
+		"@fontsource/atkinson-hyperlegible": "^4.5.11",
 		"astro": "^2.1.0"
 	}
 }

pnpm-lock.yaml

@@ -1,9 +1,11 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@fontsource/atkinson-hyperlegible': ^4.5.11
   astro: ^2.1.0
 
 dependencies:
+  '@fontsource/atkinson-hyperlegible': 4.5.11
   astro: 2.3.0
 
 packages:
@@ -539,6 +541,10 @@ packages:
     dev: false
     optional: true
 
+  /@fontsource/atkinson-hyperlegible/4.5.11:
+    resolution: {integrity: sha512-ounnhVVjseNci+G0dGPBwUY7RYM2h8FsfyhzvpUnQYKeiuUcRtGahCswnrKPrvSXNRCl1uqnRSxP3ahJ4miYIQ==}
+    dev: false
+
   /@jridgewell/gen-mapping/0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}

src/components/Footer.astro

@@ -1,3 +1,4 @@
 <footer aria-label="my websites footer">
+	<hr>
 	<a href="https://git.solarpunk.moe/fries/fries-website">Source Code</a>
 </footer>

src/layouts/Layout.astro

@@ -4,6 +4,7 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+import '@fontsource/atkinson-hyperlegible';
 import Footer from "../components/Footer.astro";
 import Navigation from "../components/Navigation.astro";
 import "../styles/global.css";

src/styles/global.css

@@ -1,38 +1,44 @@
+@media (prefers-color-scheme: light) {
+	:root {
+		--background-color: #eff1f5;
+		--text-color: #1e1e2e;
+		--link-color: #1a1adc;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background-color: #1e1e2e;
+		--text-color: #cdd6f4;
+		--link-color: #8cb8ff;
+	}
+}
+
 body {
-	font-family: sans-serif;
+	font-family: "Atkinson Hyperlegible", sans-serif;
 	text-align: center;
 }
 
-section {
+section,
+footer {
 	max-width: 600px;
 	margin: auto;
 }
 
 p {
-	font-size: 20px;
+	font-size: 22px;
-}
-	a {
-		font-size: 20px;
-	}
-
-@media (prefers-color-scheme: light) {
-	body {
-		background-color: #eff1f5;
-		color: #1e1e2e;
-	}
-
-	a {
-		color: #1a1adc;
-	}
 }
 
-@media (prefers-color-scheme: dark) {
+a {
-	body {
+	font-size: 22px;
-		background-color: #1e1e2e;
+	color: var(--link-color);
-		color: #cdd6f4;
+}
-	}
+
-
+body {
-	a {
+	background-color: var(--background-color);
-		color: #8cb8ff;
+	color: var(--text-color)
-	}
+}
+
+hr {
+	color: var(--text-color);
 }