Styling revamp, minor page edits

8 files changed, 422 insertions, 230 deletions

diff --git a/footer.html b/footer.html
index 2fee066..096d621 100644
--- a/footer.html
+++ b/footer.html
@@ -1,19 +1,11 @@
 </main>
+
 <footer role="contentinfo">
-    <ul id="menu">
-        <li><a href="/">Home</a></li>
-        <li><a href="/posts">Posts</a></li>
-        <li><a href="/projects">Projects</a></li>
-        <li><a href="/uses">Uses</a></li>
-        <li><a href="/wiki">Wiki</a></li>
-        <li><a href="/resume">Resume</a></li>
-        <li><a href="/colophon">Colophon</a></li>
-        <li><a href="/now">Now</a></li>
-        <li><a href="/pizza">Pizza</a></li>
-        <li><a href="/recipes">Recipes</a></li>
-        <li><a href="/index.rss">RSS</a></li>
-        <li><a href="#top">&uarr; Top</a></li>
-    </ul>
+    <nav id="menu">
+        <ul>
+            <li><a href="/">Home</a></li><li><a href="/posts">Posts</a></li><li><a href="/projects">Projects</a></li><li><a href="/uses">Uses</a></li><li><a href="/wiki">Wiki</a></li><li><a href="/resume">Resume</a></li><li><a href="/colophon">Colophon</a></li><li><a href="/now">Now</a></li><li><a href="/pizza">Pizza</a></li><li><a href="/recipes">Recipes</a></li><li><a href="/index.rss">RSS</a></li><li><a href="#top">&uarr; Top</a></li>
+        </ul>
+    </nav>
     <small>
         Built with <a href="https://wruby.btxx.org">wruby</a> <br>
         Running on <a href=" https://dartnode.com?aff=btxx ">Dartnode</a><br>
diff --git a/header.html b/header.html
index b37d46d..29cc254 100644
--- a/header.html
+++ b/header.html
@@ -11,7 +11,9 @@
 </head>
 
 <nav id="top">
-	<a href="/">Home</a><a href="#menu">Menu &darr;</a>
+	<ul>
+		<li><a href="/">Home</a></li><li><a href="#menu">Menu</a></li>
+	</ul>
 </nav>
 
 <main>
diff --git a/index.md b/index.md
index 8bbad8d..a07d173 100644
--- a/index.md
+++ b/index.md
@@ -1,10 +1,10 @@
 # btxx
 
-**Fullstack Developer / UX Designer**
+## Fullstack Developer / UX Designer
 
-As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several [open source projects](/projects).
+As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I'm passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal [brain dumps](/posts/dump).
 
-I'm passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal [brain dumps](/posts/dump).
+I also actively maintain several [open source projects](/projects).
 
 ## Skills & Languages
 
diff --git a/pages/colophon.md b/pages/colophon.md
index 0aadaeb..144fc2a 100644
--- a/pages/colophon.md
+++ b/pages/colophon.md
@@ -6,14 +6,43 @@ This website is a collection of living, breathing documents. As I mention on the
 
 For those interested I try to keep the details of the blog up-to-date with the information below:
 
-## Website Fast Facts
+<div class="table-container">
+<table>
+  <caption>Website Fast Facts</caption>
+  <thead>
+    <tr>
+      <th>Parameter</th>
+      <th>Source</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Built with:</td>
+      <td><a href="https://wruby.btxx.org">wruby</a></td>
+    </tr>
+    <tr>
+      <td>Hosted on:</td>
+      <td><a href="https://dartnode.com?aff=btxx">DartNode</a></td>
+    </tr>
+    <tr>
+      <td>Source code available:</td>
+      <td><a href="https://git.sr.ht/~bt/btxx.org">sourcehut</a></td>
+    </tr>
+    <tr>
+      <td>Licensed under:</td>
+      <td><a href="https://choosealicense.com/licenses/mit/">MIT</a></td>
+    </tr>
+    <tr>
+      <td>Developed on:</td>
+      <td>ThinkPad X220 &amp; M73 Tiny</td>
+    </tr>
+    <tr>
+      <td>Operating system:</td>
+      <td>OpenBSD &amp; Alpine Linux</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+Keep note: items are subject to change.
 
-| Parameter | Source |
-|---|---|
-|Typeface used:|IBM Plex Sans|
-|Built with:|[wruby](https://wruby.btxx.org)|
-|Hosted on:|[DartNode](https://dartnode.com?aff=btxx)|
-|Source code available:|[sourcehut](https://git.sr.ht/~bt/btxx.org)|
-|Licensed under:|[MIT](https://choosealicense.com/licenses/mit/)|
-|Developed on:|ThinkPad X220 & M73 Tiny|
-|Operating system:|OpenBSD & Alpine Linux|
diff --git a/pages/projects.md b/pages/projects.md
index c678d07..390788d 100644
--- a/pages/projects.md
+++ b/pages/projects.md
@@ -6,6 +6,7 @@ All git repos are hosted on: [sourcehut](https://git.sr.ht/~bt/)
 
 ## Active Projects
 
+* [caddy.ninja](https://caddy.ninja): Setup an HTTPS-enabled web server with `caddy` on Alpine Linux
 * [httpd.rocks](https://httpd.rocks): Setup an HTTPS-enabled web server with `httpd` on OpenBSD
 * [jsfree](https://jsfree.org): Collection of web services that work without JavaScript
 * [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project
diff --git a/pages/resume.md b/pages/resume.md
index 12c6cf2..6cadb4d 100644
--- a/pages/resume.md
+++ b/pages/resume.md
@@ -9,21 +9,65 @@ As a designer/developer hybrid, I help software companies improve their user exp
 
 Core programming languages are HTML, CSS, JavaScript, and Ruby. For design work, my preferred tools are Sketch, GIMP, and Figma. I also enjoy tinkering with basic shell scripts and Unix systems.
 
-## Experience
+<div class="table-container">
+<table>
+  <caption>Experience</caption>
+  <thead>
+    <tr>
+      <th>Title</th>
+      <th>Company</th>
+      <th>Duration</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Full Stack Engineer</td>
+      <td>SerpApi</td>
+      <td>2023-Now</td>
+    </tr>
+    <tr>
+      <td>Senior UX Designer</td>
+      <td>Donorbox</td>
+      <td>2021-2023</td>
+    </tr>
+    <tr>
+      <td>Senior Designer</td>
+      <td>Purism</td>
+      <td>2019-2021</td>
+    </tr>
+    <tr>
+      <td>Lead Product Designer</td>
+      <td>Benbria</td>
+      <td>2012-2019</td>
+    </tr>
+    <tr>
+      <td>Web Designer</td>
+      <td>Netvatise</td>
+      <td>2009-2012</td>
+    </tr>
+  </tbody>
+</table>
+</div>
 
-|Title|Company|Duration|
-|-----|-------|--------|
-|Full Stack Engineer|SerpApi|2023-Now|
-|Senior UX Designer|Donorbox|2021-2023|
-|Senior Designer|Purism|2019-2021|
-|Lead Product Designer|Benbria|2012-2019|
-|Web Designer|Netvatise|2009-2012|
-
-## Education
-
-|Institution|Program|Completion|
-|-----------|-------|------|
-|Durham College|Multimedia Design|2009|
+<div class="table-container">
+<table>
+  <caption>Education</caption>
+  <thead>
+    <tr>
+      <th>Institution</th>
+      <th>Program</th>
+      <th>Completion</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Durham College</td>
+      <td>Multimedia Design</td>
+      <td>2009</td>
+    </tr>
+  </tbody>
+</table>
+</div>
 
 ## Interests
 
diff --git a/pages/uses.md b/pages/uses.md
index 69654f1..e3f726f 100644
--- a/pages/uses.md
+++ b/pages/uses.md
@@ -1,49 +1,104 @@
 # Things I Use
 
-This page contains a somewhat up-to-date listing of all hardware and software that I currently use. 
-
-Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same!
-
-## Services
-
-I'm proud to support open source products and privacy-respecting communities. The list is limited right now, but the plan is to expand this over time. All prices are in US dollars.
-
-|Service|Cost/year|
-|-------|--------------|
-|[NearlyFreeSpeech](https://nearlyfreespeech.net)<br>Domains (6 total)|~$75|
-|[DartNode](https://dartnode.com?aff=btxx)<br>VPS|$10|
-|[Migadu](https://migadu.com)<br>Email service|$19|
-|[Mullvad](https://mullvad.net)<br>Privacy focused VPN|$60|
-|[sourcehut](https://sourcehut.org)<br>Git mirrors & mailing lists|$20|
-
-## Work Device
-
-
-- **M2 MacBook Air** (Daily Driver)
-  - CPU: Apple M2
-  - RAM: 16GB
-  - Storage: 256GB
-  - OS: MacOS Sequoia
-
-## Personal Device(s)
-
-- **M73 Tiny ThinkCentre**
-  - CPU: Intel i5-4590T (4) @ 3.0GHz
-  - RAM: 16GB
-  - Storage: 128GB SSD
-  - OS: Alpine Linux (KDE Plasma)
-
-- **ThinkPad X220**
-  - CPU: Intel Core i5 2540M @ 2.6 GHz
-  - RAM: 16GB
-  - Storage: 128GB SSD
-  - OS: OpenBSD ([see build](https://sr.ht/~bt/open-suck))
-
-- **ThinkPad X201**
-  - CPU: Intel Core i5-520M @ 2.9 GHz
-  - RAM: 8GB
-  - Storage: 128GB SSD
-  - OS: Alpine Suck ([see build](https://sr.ht/~bt/alpine-suck/))
+This page contains a somewhat up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same!
+
+I'm proud to support open source products and privacy-respecting communities. The list is limited right now, but the plan is to expand this over time.
+
+<div class="table-container">
+<table>
+  <caption>Services</caption>
+  <thead>
+    <tr>
+      <th>Product</th>
+      <th>Cost per year</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>NearlyFreeSpeech (domains)</td>
+      <td>~$75</td>
+    </tr>
+    <tr>
+      <td>DartNode</td>
+      <td>$20</td>
+    </tr>
+    <tr>
+      <td>Migadu</td>
+      <td>$19</td>
+    </tr>
+    <tr>
+      <td>Mullvad</td>
+      <td>$60</td>
+    </tr>
+    <tr>
+      <td>Sourcehut</td>
+      <td>$20</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<div class="table-container">
+<table>
+  <caption>Work Devices</caption>
+  <thead>
+    <tr>
+      <th>Device</th>
+      <th>CPU</th>
+      <th>RAM</th>
+      <th>Storage</th>
+      <th>OS</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>M2 MacBook Air</td>
+      <td>Apple M2</td>
+      <td>16GB</td>
+      <td>256GB SSD</td>
+      <td>MacOS Sequoia</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<div class="table-container">
+<table>
+  <caption>Personal Devices</caption>
+  <thead>
+    <tr>
+      <th>Device</th>
+      <th>CPU</th>
+      <th>RAM</th>
+      <th>Storage</th>
+      <th>OS</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>M73 Tiny ThinkCentre</td>
+      <td>Intel i5-4590T (4) @ 3.0GHz</td>
+      <td>16GB</td>
+      <td>128GB SSD</td>
+      <td>Alpine Linux (KDE Plasma)</td>
+    </tr>
+    <tr>
+      <td>ThinkPad X220</td>
+      <td>Intel Core i5 2540M @ 2.6 GHz</td>
+      <td>16GB</td>
+      <td>128GB SSD</td>
+      <td>OpenBSD (<a href="https://sr.ht/~bt/open-suck">see build</a>)</td>
+    </tr>
+    <tr>
+      <td>ThinkPad X201</td>
+      <td>Intel Core i5-520M @ 2.9 GHz</td>
+      <td>8GB</td>
+      <td>128GB SSD</td>
+      <td>Alpine Suck (<a href="https://sr.ht/~bt/alpine-suck">see build</a>)</td>
+    </tr>
+  </tbody>
+</table>
+</div>
 
 As you can tell: I *really* like ThinkPads...
 
diff --git a/public/style.css b/public/style.css
index 3067b57..4221819 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,200 +3,269 @@
 }
 
 :root {
-    --theme-color: #015B24;
-    --secondary-color: #00953A;
+	--main-color: #228427;
+}
 
-    --max-width: 760px;
+html {
+	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
+	padding: 0;
+	margin: 0;
+    scroll-behavior: smooth;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Regular.woff2") format("woff2");
-  font-style: normal;
-  font-weight: normal;
+body {
+	background-color: #f9f9f9;
+	color: #333;
+	font-size: 100%;
+	margin: 12px;
+	padding: 0;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Bold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: bold;
+nav > ul {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+    flex-wrap: wrap;
+	font-weight: bold;
+	flex-direction: row;
+	position: relative;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Italic.woff2") format("woff2");
-  font-style: italic;
-  font-weight: normal;
+nav > ul > li {
+	align-items: center;
+	display: inline-flex;
 }
 
-html {
-    background: beige;
+nav > ul > li > a {
+    border: 1px solid var(--main-color);
+	color: var(--main-color);
+    display: inline-block;
+    margin: 0 -1px -1px 0;
+    padding: 7px;
+	text-decoration: none;
+	white-space: nowrap;
 }
 
-body {
-    font-family: "Plex Sans", "Helvetica", sans-serif;
-    line-height: 1.55;
-    font-size: 20px;
-    margin: 0;
-    padding: 0;
+nav > ul > li > a:hover, nav > ul > li > a:active {
+	text-decoration: none;
+	background-color: var(--main-color);
+	color: #fff;
+}
+
+/*--- End Top Nav ---*/
+
+main {
+	display: block;
+	width: 100%;
+	margin: 0;
+	padding: 1px 0 20px 0;
+	border: 1px solid var(--main-color);
+	background-color: #fff;
+}
+
+main > p > em {
+	font-weight: normal;
+	font-style: italic;
+}
+
+main ul, main ol {
+	padding-right: 10px;
+}
+
+/*--- Begin Footer ---*/
+
+footer nav ul {
+	margin: -1px 0 0 0;
+}
+footer small {
+    display: block;
+    margin: 20px 0 0 0;
+    padding: 0 0 0 10px;
 }
 
-a,a:visited {
-    color: var(--theme-color);
+/*--- Links ---*/
+
+a {
+	color: var(--main-color);
 }
-a:hover,a:focus {
-    background: var(--theme-color);
-    color: white;
+
+a:hover {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
+}
+
+a:active {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
+}
+
+a, img {
+	border: none;
 }
 
+a:focus, img:focus {
+	outline: none;
+}
+
+/*--- Header Styles ---*/
+
 h1 {
-    background-color: var(--theme-color);
-    color: white;
-    font-size: 180%;
-    margin: 0;
-    padding: 1.2rem;
-    position: relative;
-    text-align: center;
+	font-size: 190%;
+	margin: 18px 18px 0 18px;
+}
+
+h2 {
+	font-size: 125%;
+	margin: 18px 18px 0 18px;
 }
-h2,h3,h4,h5,h6 {
-    font-size: 140%;
-    margin: 2em 0 0;
+
+h3 {
+	font-size: 113%;
+	margin: 18px 18px 0 18px;
 }
 
-blockquote {
-    border-left: 4px solid;
-    margin: 2em 0 2em 2em;
-    padding: 2px 8px;
+h4 {
+	margin: 18px 18px 0 18px;
 }
-blockquote p {
-  font-style: italic;
-  margin: 0;
-  padding: 0;
+
+p {
+	margin: 12px 18px 18px 18px;
+	padding: 0;
+	line-height: 1.25em;
+}
+
+hr {
+    margin: 2rem 0;
 }
+
 img {
+    height: auto;
     max-width: 100%;
 }
+
 pre {
-    border: 1px solid;
+    background: #eee;
+    padding: 20px;
     overflow: auto;
-    padding: 5px;
+}
+
+code {
+	font-size: 110%;
+}
+
+.table-container {
+	margin: 2rem 0;
+	overflow-y: scroll;
 }
 table {
+    border-collapse: collapse;
+    min-width: 500px;
     text-align: left;
     width: 100%;
 }
-nav {
-  padding: 10px 20px;
-  margin: 0 auto;
-  max-width: var(--max-width);
-}
-nav a:last-of-type {
-  float: right;
+table caption {
+	background: #eee;
+	font-weight: bold;
+	font-size: 120%;
+	padding: 10px;
+	text-align: left;
 }
-#menu,
-.posts {
-    list-style: none;
-    padding: 0;
+table tr {
+    border-bottom: 1px solid;
 }
-.posts li {
-    margin-bottom: 8px;
+table th, table td {
+    padding: 10px;
 }
-.posts li span {
-    display: block;
-    font-size: 90%;
+
+blockquote {
+	background: #f2f2f2;
+	border-left: 2px solid grey;
+	padding: 6px;
 }
-#menu {
-    align-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+blockquote p {
+	margin: 0;
 }
-#menu li {
-    display: inline-block;
-    margin: 0;
-    padding: 0 15px 15px 0;
+
+.footnotes {
+	font-size: 90%;
 }
-main {
-    margin: 0 auto;
-    max-width: var(--max-width);
-    padding: 0 10px 10px;
-}
-main h1 + p {
-    background-color: var(--secondary-color);
-    color: white;
-    font-weight: bold;
-    margin-bottom: 2rem;
-    margin-top: 0;
-    padding: 0.5rem;
-    text-align: center;
-}
-main h1 + p a {
-    color: white !important;
-}
-figure {
-  margin: 3em 0;
-}
-figure img {
-  width: 100%;
-}
-figcaption {
-    font-size: 90%;
-    opacity: 0.7;
-}
-footer {
-  border-top: 1px solid;
-  margin: 2em auto;
-  max-width: var(--max-width);
-  padding: 10px;
-  text-align: center;
+
+/*--- List Styles ---*/
+
+ol {
+	line-height: 1.25em;
 }
-.footnotes {
-    font-size: 90%;
-    margin-top: 2rem;
+
+ul, ol {
+	margin: 12px 0 0 36px;
+	padding: 0 0 0 24px;
+	line-height: 1.5em;
 }
-code {
-    background: white;
-    border: 1px dotted;
-    font-size: 18px;
-    padding: 0.1rem;
+
+ul {
+	list-style-type: square;
 }
-pre:has(code) {
-    border: 1px solid;
-    background: white;
-    padding: 0.5rem;
+
+li ul, li ol {
+	margin-top: 0;
 }
-pre code {
-    border: 0;
+
+ul.posts li {
+	margin-bottom: 10px;
 }
+ul.posts li span {
+	display: block;
+} 
 
 @media(max-width:600px) {
-    body {
-        font-size: 18px;
+    nav ul {
+        display: block;
+        margin: 0 0 -1px 0;
     }
-    code {
-        font-size: 16px;
+    nav > ul > li {
+        width: 50%;
     }
-    footer {
-        text-align: left;
+    nav > ul > li > a {
+        border-right: 0;
+        display: block;
+        margin: 0;
+        width: 100%;
     }
-    #menu {
-        justify-content: flex-start;
+    nav ul li:nth-of-type(even) a {
+        border-right: 1px solid var(--main-color);
+    }
+
+    footer nav ul li {
+        margin: 0 0 -1px 0;
     }
 }
 
 @media(prefers-color-scheme: dark) {
-    html {
-        background: #1C1B22;
-    }
-    a,a:visited {
-        color: lightgreen;
-    }
-    a:hover,a:focus {
-        background: var(--secondary-color);
-        color: white;
-    }
-    code, pre:has(code) {
-        background: black;
-    }
+	:root {
+		--main-color: #eee8a7;
+	}
+	html, body {
+		background: black;
+	}
+	body {
+		color: white;
+	}
+	main {
+		background: #2d2d2d;
+	}
+	table caption {
+		background: black;
+	}
+	nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active {
+		color: black;
+	}
+	pre {
+		background: black;
+	}
+	blockquote {
+		background: black;
+	}
 }