Switch to local Unscii font and begin work on new stylesheet

Remove Google Fonts and the old external stylesheet link. Add (inline for now)
@font-face rules for unscii fonts and new link/p/ul styles, and set the
root font to unscii16. Minor UI tweaks: style the skip link background,
remove the "Tools" nav item for now, fix the contact page title and link
markup, and replace the homepage copy with an "Under Construction"
message.

public/style.css

@@ -7,7 +7,7 @@
 
 /* Base styles */
 body {
-  font-family: "Courier New", Courier, monospace;
+  /*font-family: "Courier New", Courier, monospace;*/
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.6;

src/layouts/BaseLayout.astro

@@ -5,26 +5,71 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <link rel="stylesheet" type="text/css" href="/style.css" />
+    <!--<link rel="stylesheet" type="text/css" href="/style.css" />-->
     <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
-      rel="stylesheet"
-    />
     <script>
       const yearSpan = document.querySelector("#copyright-year");
       if (yearSpan) {
         yearSpan.innerHTML = new Date().getFullYear().toString();
       }
     </script>
+    <style is:inline>
+      @font-face {
+        font-family: "unscii16";
+        src:
+          url("unscii-16.woff") format("woff"),
+          url("unscii-16.ttf") format("ttf");
+      }
+      @font-face {
+        font-family: "unscii8";
+        src:
+          url("unscii-8.woff") format("woff"),
+          url("unscii-8.ttf") format("ttf");
+      }
+      a {
+        color: #333;
+        text-decoration: none;
+
+        &:visited {
+          color: #555;
+        }
+        &:hover {
+          color: #555;
+          text-decoration: underline;
+          text-decoration-style: dashed;
+        }
+      }
+      p a {
+        margin: 0 -0.5rem;
+        padding: 0 0.5rem;
+
+        &:hover::before {
+          content: "[";
+        }
+        &:hover::after {
+          content: "]";
+        }
+        &:hover {
+          text-decoration: none;
+          padding: 0;
+        }
+      }
+
+      ul {
+        list-style-type: square;
+      }
+    </style>
     <style>
+      h1 {
+        font-family: "unscii16", monospace;
+        font-size: 32px;
+        text-align: center;
+      }
       :root {
         --min-body-width: 30ch;
         --max-body-width: 120ch;
         font-size: 16px;
-        font-family: "VT323", monospace;
+        font-family: "unscii16", monospace;
         font-weight: 400;
         font-style: normal;
       }
@@ -46,6 +91,8 @@
         position: absolute;
         top: 0;
         left: 0;
+        background-color: #ccc;
+        color: #000;
       }
 
       header {
@@ -91,7 +138,6 @@
               <option value="city-destroyed">Apocalypse</option>
             </select>
           </li>
-          <li><a href="/tools">Tools</a></li>
           <li><a href="/contact">Contact</a></li>
           <li><a href="https://git.badblocks.dev" target="_blank">Git</a></li>
         </ul>

src/pages/contact.astro

@@ -115,10 +115,12 @@ const msgValue = pickValue("msg");
   }
   label[for="captcha"] {
     grid-area: captcha;
+    a {
+      color: #000;
+    }
   }
   #captchaStatus {
     padding: 0.8rem 0;
-    font-size: small;
   }
   button {
     height: 39px;
@@ -150,9 +152,12 @@ const msgValue = pickValue("msg");
   }
 </style>
 <Layout>
-  <title slot="head">Home</title>
+  <title slot="head">Contact</title>
   <Fragment slot="content">
     <h2>Contact</h2>
+    <p><a href="https://kagi.com">Link Style 1</a></p><a href="https://kagi.com"
+      >Link Style 2</a
+    >
     {
       (nextAction != "complete" && (
         <form method="post" x-data="{}" action={actions.contact.submitForm}>
@@ -231,7 +236,7 @@ const msgValue = pickValue("msg");
           </fieldset>
           <label for="captcha">
             {/* prettier-ignore */}
-            <a href="https://capjs.js.org/" tabindex="-1">Cap</a>tcha
+            <a href="https://capjs.js.org/" tabindex="-1">Captcha</a>
             <input type="hidden" id="captcha" name="captcha" />
             <div id="captchaStatus">
               <iconify-icon id="initIcon" icon="line-md:loading-loop" />

src/pages/index.astro

@@ -140,11 +140,8 @@ import Layout from "@layouts/BaseLayout.astro";
         <div class="layer layer-4"></div>
         <div class="layer layer-5"></div>
       </div>
-      <h2>Lorem Ipsum</h2>
+      <h2>Under Construction</h2>
-      <p>
+      <p>Pardon the dust!</p>
-        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
-        consectetur, adipisci velit.
-      </p>
     </article>
   </Fragment>
 </Layout>