Testing style changes, fonts, drafts

7 files changed, 124 insertions, 16 deletions

diff --git a/_drafts/react-os-vmm.md b/_drafts/react-os-vmm.md
new file mode 100644
index 0000000..b8ec522
--- /dev/null
+++ b/_drafts/react-os-vmm.md
@@ -0,0 +1,38 @@
+# Playing Old Windows Games on ReactOS Running Inside OpenBSD
+
+2025-03-10
+
+* toc
+{:toc}
+
+## Before We Begin
+
+I would like to begin this article (and/or tutorial) with a fitting quote from Jurassic Park:
+
+> Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.
+> 
+> · *Dr. Ian Malcolm (played by Jeff Goldblum)*
+
+We are not going to debate the merits of running a separate operating system inside OpenBSD's `vmm` in order to play games that mostly work running directly on OpenBSD itself. Where would the fun in that be? Instead, we going to dive right in - starting off by downloading the proper Boot CD and configuring `vmm` to launch into the installer.
+
+<div class="alert note">
+  <span><b>Preface:</b> There are better ways to play old school games on OpenBSD. I did this for fun and because I felt like making things difficult for myself. Please put away your pitchforks...</span>
+</div>
+
+For reference, my testing machine has the following specs:
+
+**X220 ThinkPad**
+
+- Intel Core i5 2540M @ 2.6 GHz
+- 16GB RAM
+- OpenBSD 7.6 running `dwm`
+
+## Getting the ReactOS Boot CD
+
+## Playing Some Games
+
+### Baldur's Gate 2
+
+### Half-Life 2
+
+### SimCity 3000
\ No newline at end of file
diff --git a/header.html b/header.html
index 8d23f90..1770203 100644
--- a/header.html
+++ b/header.html
@@ -12,7 +12,7 @@
 
 <header id="top">
 	<nav>
-		<a href="/"><b>btxx.org</b></a><span> | </span><a href="#menu">Menu</a>
+		<a href="/"><b>btxx.org</b></a><a href="#menu">Menu</a>
 	</nav>
 </header>
 
diff --git a/pages/colophon.md b/pages/colophon.md
index c8e94ce..7de10e6 100644
--- a/pages/colophon.md
+++ b/pages/colophon.md
@@ -33,12 +33,16 @@ For those interested I try to keep the details of the blog up-to-date with the i
       <td><a href="https://choosealicense.com/licenses/mit/">MIT</a></td>
     </tr>
     <tr>
-      <td>Developed on:</td>
-      <td>ThinkPad X220 &amp; M73 Tiny</td>
+      <td>Hardware used:</td>
+      <td>X220, M2 MacBook Air, &amp; M73 Tiny</td>
+    </tr>
+    <tr>
+      <td>Fonts used:</td>
+      <td>Fira Sans, system monospace</td>
     </tr>
     <tr>
-      <td>Operating system:</td>
-      <td>OpenBSD &amp; Alpine Linux</td>
+      <td>Developed on:</td>
+      <td>OpenBSD, MacOS &amp; Alpine Linux</td>
     </tr>
   </tbody>
 </table>
diff --git a/public/fonts/FiraSans-Italic.woff2 b/public/fonts/FiraSans-Italic.woff2
new file mode 100644
index 0000000..0d5fef5
--- /dev/null
+++ b/public/fonts/FiraSans-Italic.woff2
diff --git a/public/fonts/FiraSans-Medium.woff2 b/public/fonts/FiraSans-Medium.woff2
new file mode 100644
index 0000000..da1d5fd
--- /dev/null
+++ b/public/fonts/FiraSans-Medium.woff2
diff --git a/public/fonts/FiraSans-Regular.woff2 b/public/fonts/FiraSans-Regular.woff2
new file mode 100644
index 0000000..45f844e
--- /dev/null
+++ b/public/fonts/FiraSans-Regular.woff2
diff --git a/public/style.css b/public/style.css
index 394db8e..3381ddd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,18 +2,43 @@
     box-sizing: border-box;
 }
 
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('/public/fonts/FiraSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('/public/fonts/FiraSans-Medium.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('/public/fonts/FiraSans-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+
 body {
-	font-family: sans-serif;
+    background-attachment: fixed;
+    background-color: #f6fff8;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%236d6d6d' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+	font-family: "Fira Sans", sans-serif;
     line-height: 1.4;
     margin: 0 auto;
-    max-width: 75ch;
+    max-width: 800px;
     padding: 12px;
 }
 
 h1 {
     line-height: 1.2;
     font-weight: normal;
-    margin-bottom: 0;
+    margin-bottom: 10px;
+    margin-top: 0;
 }
 h1 + p {
     margin-top: 0;
@@ -30,6 +55,33 @@ h2,h3,h4,h5,h6 {
   margin: 2.5rem 0 0;
 }
 
+a {
+    color: forestgreen;
+}
+a:visited {
+    color: #174521;
+}
+a:hover, a:active {
+    color: black;
+}
+
+header, main, footer {
+    background: #f9f9f9;
+    border: 1px solid #2d2d2d;
+    box-shadow: 5px 5px 0px 0px #2d2d2d;
+    margin-bottom: 1.2rem;
+    padding: 16px;
+}
+
+header nav {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+header nav a:first-of-type {
+    font-size: 120%;
+}
+
 .posts {
     padding: 0 0 0 18px;
 }
@@ -69,7 +121,7 @@ p code, ul code, ol code, blockquote code {
 
 #markdown-toc {
     background: #f8f9fa;
-    padding: 10px 10px 20px 40px;
+    padding: 10px 10px 10px 40px;
     position: relative;
 }
 #markdown-toc::before {
@@ -96,11 +148,9 @@ pre {
 }
 
 blockquote {
-    border-left: 2px solid;
+    border-left: 4px solid;
     color: brown;
-    font-family: serif;
-    font-style: italic;
-    font-size: 110%;
+    margin: 1rem 0;
     padding: 0 0 0 8px;
 }
 
@@ -145,10 +195,11 @@ figure figcaption {
 }
 
 footer {
-    border-top: 1px solid #ddd;
-    margin: 2rem 0 0;
     position: relative;
 }
+footer > p {
+    margin-top: 0;
+}
 footer nav ul {
     list-style: none;
     padding: 0;
@@ -166,11 +217,26 @@ footer nav ul li {
 
 @media(prefers-color-scheme: dark) {
   body {
-    background: #2d2d2d;
+    background-color: #787878;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23fff' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
   }
+  a {
+    color: goldenrod;
+    }
+    a:visited {
+        color: darkgoldenrod;
+    }
+    a:hover, a:active {
+        color: yellow;
+    }
   h2, #markdown-toc::before {
     border-color: #aaa;
   }
+  header, main, footer {
+    background: #424242;
+    border-color: black;
+    box-shadow: 5px 5px 0px 0px black;
+  }
   code, pre {
     background: #000 !important;
   }