change fonts to Atkinson Hyperlegible and a custom-built variant of Iosevka

static/base.css

@@ -18,56 +18,57 @@
 body {
     margin: 0;
     color: var(--color-text);
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
 /* Fonts */
 
 @font-face {
-    font-family: "Fira Sans";
+    font-family: "Atkinson Hyperlegible";
     src:
-        local("Fira Sans Regular"),
+        local("Atkinson Hyperlegible Regular"),
-        url("font/FiraSans-Regular.ttf");
+        url("font/AtkinsonHyperlegible-Regular.ttf");
     font-weight: 400;
 }
 
 @font-face {
-    font-family: "Fira Sans";
+    font-family: "Atkinson Hyperlegible";
     src:
-        local("Fira Sans Italic"),
+        local("Atkinson Hyperlegible Italic"),
-        url("font/FiraSans-Italic.ttf");
+        url("font/AtkinsonHyperlegible-Italic.ttf");
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
-    font-family: "Fira Sans";
+    font-family: "Atkinson Hyperlegible";
     src:
-        local("Fira Sans Bold"),
+        local("Atkinson Hyperlegible Bold"),
-        url("font/FiraSans-Bold.ttf");
+        url("font/AtkinsonHyperlegible-Bold.ttf");
     font-weight: 700;
 }
 
 @font-face {
-    font-family: "Fira Sans";
+    font-family: "Atkinson Hyperlegible";
     src:
-        local("Fira Sans Bold Italic"),
+        local("Atkinson Hyperlegible Bold Italic"),
-        url("font/FiraSans-BoldItalic.ttf");
+        url("font/AtkinsonHyperlegible-BoldItalic.ttf");
     font-weight: 700;
     font-style: italic;
 }
 
 @font-face {
-    font-family: "Fira Code";
+    /* NOTE: This is my own variant of Iosevka that more or less follows the stylistic choices
+       of Atkinson Hyperlegible. */
+    font-family: "Iosevka Hyperlegible";
     src:
-        local("Fira Code"),
+        local("Iosevka Hyperlegible"),
-        url("font/FiraCode-VariableFont_wght.ttf");
+        url("font/IosevkaHyperlegible-Regular.woff2");
     font-weight: 400;
 }
 
 :root {
-    font-size: 87.5%;
+    font-family: "Atkinson Hyperlegible", sans-serif;
-    font-family: "Fira Sans", sans-serif;
 }
 
 button, textarea, input {
@@ -76,7 +77,8 @@ button, textarea, input {
 }
 
 pre, code, textarea {
-    font-family: "Fira Code", monospace;    
+    font-family: "Iosevka Hyperlegible", monospace;
+    line-height: 1.5;
 }
 
 /* Buttons */

static/index.css

@@ -201,6 +201,7 @@ rkgk-connection-status {
     --border-radius: 4px;
     
     display: flex;
+    align-items: center;
     box-sizing: border-box;
 
     width: fit-content;
@@ -214,6 +215,8 @@ rkgk-connection-status {
         padding: 4px 8px;
         text-decoration: none;
 
+        line-height: 1;
+
         &:hover {
             background-color: var(--color-shaded-background);
         }