From 7dd61775b375b414ee940e8fed39d40613c7d8ac Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:16:38 -0800
Subject: [PATCH] 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             |  2 +-
 src/layouts/BaseLayout.astro | 64 +++++++++++++++++++++++++++++++-----
 src/pages/contact.astro      | 11 +++++--
 src/pages/index.astro        |  7 ++--
 4 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/public/style.css b/public/style.css
index f586a34..9ecde32 100644
--- a/public/style.css
+++ b/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;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8ad9dcb..e948d0d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 0a0a7f3..592895a 100644
--- a/src/pages/contact.astro
+++ b/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" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 23927f6..3af0af6 100644
--- a/src/pages/index.astro
+++ b/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>
-      <p>
-        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
-        consectetur, adipisci velit.
-      </p>
+      <h2>Under Construction</h2>
+      <p>Pardon the dust!</p>
     </article>
   </Fragment>
 </Layout>