Added fonts

Moved assets to /assets

.eleventy.js

@@ -111,6 +111,7 @@ module.exports = function(eleventyConfig) {
       'js',
       'crt',
       'pem',
+      'ttf',
       'webmanifest',
     ],
 

_src/_includes/base.njk

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title or metadata.title }}</title>
     <meta name="description" content="{{ description or metadata.description }}">
-    <link rel="stylesheet" href="/base.css">
+    <link rel="stylesheet" href="/assets/base.css">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#020202">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png">
+    <link rel="manifest" href="/assets/site.webmanifest">
+    <link rel="mask-icon" href="/assets/img/safari-pinned-tab.svg" color="#020202">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#020202">
   </head>

_src/assets/base.css

@@ -8,6 +8,20 @@
   --black: #000;
 }
 
+/* Fonts */
+@font-face {
+	font-family: 'vt323';
+	src: url('/assets/fonts/VT323-Regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'ShareTechMono';
+	src: url('/assets/fonts/ShareTechMono-Regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'RobotoMono';
+	src: url('/assets/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
+}
+
 /* Global stylesheet */
 * {
   box-sizing: border-box;
@@ -41,7 +55,10 @@ html {
   background-color: var(--darkgray);
   overflow-x: hidden;
 }
-h1, h2, h3, h4, h5, h6 { color: var(--purple); }
+h1, h2, h3, h4, h5, h6 {
+  color: var(--purple);
+  font-family: 'ShareTechMono', monospace;
+}
 pre, code, a { color: var(--lightgray); }
 body {
   margin: 0;
@@ -52,7 +69,7 @@ main {
   margin: 0 auto;
   padding: 4vw calc(1em + 2vw);
   max-width: calc(100vh + 10vw);
-  font-family: monospace;
+  font-family: 'RobotoMono', monospace;
 }
 main, h1, h2, h3, h4, h5, h6, pre, ul, ol, p, table, input, button {
   background-color: rgba(2,2,2,.75);

_src/assets/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/assets/img/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/assets/img/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }