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 bcd9e8b76ee4e5125e9724c052bd5732e6e6d2ec..ee6301ee29cbba530618bdf0c3df30bb94c166c7 100644 (file)
--- 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;