go back to bunny fonts for serving fonts (rip iosevka), change separator to a <hr>, and "fix" header being bloated on chromium

2024-11-06 09:33:57 +00:00
parent ad38ebeff9
commit 5253c08aa9
3 changed files with 20 additions and 17 deletions
@@ -4,7 +4,6 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preload" href="fonts/IosevkaCustom-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="style.css">
    <title>« futile »</title>
    <script> let FF_FOUC_FIX; </script>
@@ -14,9 +13,7 @@
    <div class="box">
        <h1 class="main-title">futile</h1>
    </div>
-    <div class="box">
-        <p class="separator">─────</p>
-    </div>
+    <hr class="separator">
    <div class="box">
        <p class="content">
            hello, my name is futile. i am a weird concept from the internet (or a person from europe, depending
@@ -1,17 +1,13 @@
-@font-face {
-    font-family: 'Bokor';
-    src: url('fonts/Bokor-Regular.woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka';
-    src: url('fonts/IosevkaCustom-Regular.woff2');
-}
+@import url(https://fonts.bunny.net/css?family=bokor:400|ibm-plex-mono:400);

 body {
    background-color: black;
    color: white;
-    font-family: 'Iosevka', monospace;
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+p {
+    letter-spacing: -0.02em;
 }

 .email {
@@ -20,19 +16,29 @@ body {
 }

 .main-title {
-    font-family: 'Bokor', display;
+    font-family: 'Bokor', serif;
    font-size: 5em;
    line-height: 1em;
    margin-top: 0.2em;
    margin-bottom: 0em;
    user-select: none;
+    font-weight: normal;
+}
+
+/* hacky way of making my font look nicer on firefox 
+   while having chrome's rendering of it not be bloated 
+*/
+@supports (-moz-appearance: none) {
+    .main-title {
+        font-weight: bold;
+    }
 }

 .separator {
-    line-height: 0em;
+    color: white;
    margin-top: 0.5em;
    margin-bottom: 0em;
-    user-select: none;
+    width: 50px;
 }

 .content {