From ab8e07651a40cc9a3fe333b88d6beb997ae3044e Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sun, 26 May 2024 22:25:33 +0100
Subject: [PATCH] Yeet goog fonts (smelly) Nicer accent colour

---
 src/components/Music.astro |  4 ++--
 src/layouts/Layout.astro   |  4 +---
 src/layouts/Markdown.astro |  4 ++--
 src/pages/index.astro      |  3 +--
 src/styles/_reset.scss     | 15 ++++++++++++++-
 src/styles/vars.scss       |  6 ++++--
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/Music.astro b/src/components/Music.astro
index 340ca22..0dbf006 100644
--- a/src/components/Music.astro
+++ b/src/components/Music.astro
@@ -19,7 +19,7 @@ import leg from "../assets/leg.webp";
         const data = await request.json();
 
         ( document.querySelector("#music-image") as HTMLImageElement ).src = data["track"]["image"][1]["#text"];
-        ( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `Listening to ${data["track"]["name"]}`;
+        ( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `${data["track"]["name"]}`;
         ( document.querySelector("#music-artist") as HTMLParagraphElement ).innerText = `by ${data["track"]["artist"]["#text"]}`;
         ( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`;
     });
@@ -68,6 +68,6 @@ import leg from "../assets/leg.webp";
     }
 
     #music-title {
-        font-weight: bold;
+        font-weight: 600;
     }
 </style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5534ac3..3e90069 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,9 +18,7 @@ const { title} = Astro.props;
         <meta name="generator" content={Astro.generator} />
 
         <link rel="icon" type="image/webp" href="/src/assets/leg.webp" />
-        <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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=jet-brains-mono@400&f[]=general-sans@1&display=swap">
 
         <title>{title}</title>
     </head>
diff --git a/src/layouts/Markdown.astro b/src/layouts/Markdown.astro
index 145ff40..5e927aa 100644
--- a/src/layouts/Markdown.astro
+++ b/src/layouts/Markdown.astro
@@ -103,7 +103,7 @@ const date = new Date(post.data.pubDate);
 
         a {
             text-decoration: none;
-            color: $orange;
+            color: $accent;
             transition: all 0.1s ease-in-out;
 
             &:hover, &:focus-visible {
@@ -144,7 +144,7 @@ const date = new Date(post.data.pubDate);
 
             font-style: italic;
 
-            border-left: 2px solid $orange;
+            border-left: 2px solid $accent;
         }
 
         table {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 26a7eef..eb30c69 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,10 +34,9 @@ const posts = await getPosts("posts");
 			My favorite language currently is Go, but I also know a few other languages that are listed below!
 			<br><br>
 			I use Arch btw.
+			<br><br>
 		</p>
-	</div>
 
-	<div class="section">
 		<ul class="pill-list" role="list">
 			<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
 			<li><a class="button" href="https://bsky.app/profile/leggy.dev" target="_blank">BlueSky</a></li>
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 42acc6d..e782a78 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -4,12 +4,16 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: "IBM Plex Mono", monospace;
 }
 
 html {
     min-height: 100vh;
+
     font-size: 100%;
+    font-family: $font-regular;
+    font-weight: 420;
+    line-height: 1.5;
+
     text-size-adjust: none;
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
@@ -27,11 +31,20 @@ body {
     color: $light;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+}
+
+
 ul[role="list"],
 ol[role="list"] {
     list-style: none;
 }
 
+code *, pre * {
+    font-family: $font-mono !important;
+}
+
 img,
 picture {
     max-width: 100%;
diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index 2669919..24685f9 100644
--- a/src/styles/vars.scss
+++ b/src/styles/vars.scss
@@ -1,7 +1,9 @@
 $dark: #312620;
 $gray: #382e28;
 $light: #f0e7e4;
-$orange: #f2672c;
-$green: #1f2d23;
+$accent: #b7a997;
 
 $radius: 4px;
+
+$font-regular: 'General Sans', sans-serif;
+$font-mono: 'JetBrains Mono', sans-serif;