Use nerd fonts and add the final touch to the blog page! :yayayayayay-ctp:

6 files changed, 54 insertions, 6 deletions

diff --git a/static/fonts/FantasqueSansMNerdFontMono-Bold.ttf b/static/fonts/FantasqueSansMNerdFontMono-Bold.ttf
new file mode 100644
index 0000000..65607bb
--- /dev/null
+++ b/static/fonts/FantasqueSansMNerdFontMono-Bold.ttf
diff --git a/static/fonts/FantasqueSansMNerdFontMono-BoldItalic.ttf b/static/fonts/FantasqueSansMNerdFontMono-BoldItalic.ttf
new file mode 100644
index 0000000..e16b2e0
--- /dev/null
+++ b/static/fonts/FantasqueSansMNerdFontMono-BoldItalic.ttf
diff --git a/static/fonts/FantasqueSansMNerdFontMono-Italic.ttf b/static/fonts/FantasqueSansMNerdFontMono-Italic.ttf
new file mode 100644
index 0000000..94bf599
--- /dev/null
+++ b/static/fonts/FantasqueSansMNerdFontMono-Italic.ttf
diff --git a/static/fonts/FantasqueSansMNerdFontMono-Regular.ttf b/static/fonts/FantasqueSansMNerdFontMono-Regular.ttf
new file mode 100644
index 0000000..ba35fed
--- /dev/null
+++ b/static/fonts/FantasqueSansMNerdFontMono-Regular.ttf
diff --git a/static/style.css b/static/style.css
index e6d610a..26da776 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,11 +1,41 @@
+@font-face {
+	font-family: 'FantasqueSansMono Nerd Font';
+	src: url('/fonts/FantasqueSansMNerdFontMono-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'FantasqueSansMono Nerd Font';
+	src: url('/fonts/FantasqueSansMNerdFontMono-Bold.ttf') format('truetype');
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'FantasqueSansMono Nerd Font';
+	src: url('/fonts/FantasqueSansMNerdFontMono-Italic.ttf') format('truetype');
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'FantasqueSansMono Nerd Font';
+	src: url('/fonts/FantasqueSansMNerdFontMono-BoldItalic.ttf') format('truetype');
+	font-weight: bold;
+	font-style: italic;
+	font-display: swap;
+}
+
 body {
 	background: #1e1e2f;
 	color: #cdd6f4;
-	font-family: 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', 'Arial', 'Helvetica', sans-serif;
+	font-family: 'FantasqueSansMono Nerd Font', 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', 'Arial', 'Helvetica', sans-serif;
 	font-style: normal;
-	font-size: 1.1rem;
-}
-
+	font-size: 1.1rem; }
 .container {
 	display: flex;
 	flex-direction: column;
@@ -118,7 +148,7 @@ nav a.active {
 }
 
 pre, code {
-	font-family: 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', monospace;
+	font-family: 'FantasqueSansMono Nerd Font', 'TypoPRO Fantasque Sans Mono', 'Fantasque Sans Mono', monospace;
 	background: #181825; 
 	color: #cdd6f4;
 	padding: 0.1rem 0.3rem;
@@ -247,3 +277,21 @@ a {
 	text-align: left;
 	margin: 0;
 }
+
+.blog-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+	margin-top: 0.5rem;
+}
+
+.blog-date {
+	text-decoration: none;
+	font-size: 1.1rem;
+	opacity: 0.8;
+	transition: opacity 0.2s;
+}
+
+.blog-date:hover {
+	opacity: 1;
+}
diff --git a/templates/blog.html b/templates/blog.html
index 2690196..93372d6 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -10,7 +10,7 @@
 <div class="blog-list">
 	{% for page in section.pages %}
 		<pre class="blog-entry wrap">
-			<a href="{{ page.permalink | safe}}" class="blog-date"><span class="yellow">{{ page.date }}.md</span></a>
+			<a href="{{ page.permalink | safe}}" class="blog-date"><span class="yellow"> {{ page.date }}.md</span></a>
 			{% if page.extra.image %}
 			<div class="blog-image-wrap">
 				<a href="{{ page.permalink | safe}}"><img src="{{ page.extra.image | safe}}" alt="{{ page.title }}" class="blog-thumbnail"></a>