From: Max Charrier <max@puffer.fish>
Date: Sun, 20 Apr 2025 15:44:20 +0000 (+0200)
Subject: Implement System Font Stack
X-Git-Tag: 25w17a~7
X-Git-Url: https://git.puffer.fish/?a=commitdiff_plain;h=9f89b3198d8309c2bf77784c8c783d76f2c94794;p=max%2Fwww.git

Implement System Font Stack

More information: https://systemfontstack.com/
CSS variables are very usefull to avoid long list of fonts each time.
Also, it's easier to read and maintain.

Signed-off-by: Max Charrier <max@puffer.fish>
---

diff --git a/stylesheet.css b/stylesheet.css
index bcd9e8b..ee6301e 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,3 +1,6 @@
+:root {
+	--system-ui: 'comic_monobold', ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+}
 body {
 	background-color: #f1e9df;
 	color: #89a06b;
@@ -6,7 +9,7 @@ body {
 	flex-direction: column;
 	align-items: center;
 	gap: 30px;
-	font-family: 'comic_monobold', ui-monospace, monospace;
+	font-family: var(--system-ui);
 	font-size: 1.4em;
 }
 header {
@@ -25,7 +28,7 @@ nav aside {
 }
 nav aside a {
 	text-align: center;
-	font-family: 'comic_monobold', ui-monospace, monospace;
+	font-family: var(--system-ui);
 	font-size: 1.2rem;
 	display: inline-block;
 	padding: 10px 20px;