M assets/css/style.css → assets/css/style.css

@@ -17,6 +17,8 @@
 h1,
 h2 {
   font-style: italic;
+  font-family: monospace;
+  color: var(--f_med);
 }
 
 hr {

M pages/keyboard.html → pages/keyboard.html

@@ -1,33 +1,51 @@
 {{ define "head" }}
 <link rel="stylesheet" href="{{.StylePath}}">
+<style>
+    img {
+        width: 100%;
+        margin-top: 1rem;
+        border-radius: var(--border-radius);
+    }
+    .body-2-col {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+    }
+    .body-2-col > div {
+        flex: 1;
+    }
+    @media screen and (max-width: 600px) {
+        .body-2-col {
+            flex-direction: column;
+        }
+    }
+</style>
 {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<style>
-img {
-    width: 100%;
-    margin-top: 1rem;
-    border-radius: var(--border-radius);
-}
-</style>
-<img src="/assets/img/keyboard.jpg"/>
-
-<p>
-    My keyboard is a hand-built Atreus62 from Profet Keyboards.
-    This project was a few firsts for me: it was my first soldering
-    project (all those surface-mount diodes were a challenge) and 
-    it was my first time using a laser cutter to cut the acrylic for the case.
-</p>
-<h2>hardware</h2>
-<p>
-    The keyswitches for the alphanumerics are Cherry MX Clears, while the
-    modifiers use Cherry MX Browns.
-</p>
-<h2>firmware</h2>
-<p>
-    The firmware is built using <a href="https://qmk.fm/">QMK</a>.
-</p>
+<div class="body-2-col">
+    <div id="body-left">
+        <img src="/assets/img/keyboard.jpg"/>
+    </div>
+    <div>
+        <p>
+            My keyboard is a hand-built Atreus62 from Profet Keyboards.
+            This project was a few firsts for me: it was my first soldering
+            project (all those surface-mount diodes were a challenge) and 
+            it was my first time using a laser cutter to cut the acrylic for the case.
+        </p>
+        <h2>hardware</h2>
+        <p>
+            The keyswitches for the alphanumerics are Cherry MX Clears, while the
+            modifiers use Cherry MX Browns.
+        </p>
+        <h2>firmware</h2>
+        <p>
+            The firmware is built using <a href="https://qmk.fm/">QMK</a>.
+        </p>
+    </div>
+</div>
 {{ end }}
 
 {{ define "scripts" }}

M templates/header.html → templates/header.html

@@ -1,5 +1,8 @@
 {{ define "header" }}
 <style>
+.header {
+  margin-bottom: 3rem;
+}
 .logo {
   width: 4rem;
   margin: 1rem auto;
@@ -41,7 +44,7 @@ .breadcrumbs a {
   text-decoration: none;
 }
 </style>
-<div>
+<div class="header">
   <img class="logo" src="/assets/svg/logo-light.svg">
   <nav class="breadcrumbs">
     <ul>