Revert "Complete styling changes - again"

This reverts commit 068badb857215f0e10500ddd29a8b335efe3b2bd.

15 files changed, 243 insertions, 118 deletions

diff --git a/Makefile b/Makefile
index 28a6eb2..2207bdc 100644
--- a/Makefile
+++ b/Makefile
@@ -6,3 +6,5 @@ clean:
 	rm -rf build/*
 
 .PHONY: build clean
+
+	find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -exec gzip -k -f {} \;
diff --git a/footer.html b/footer.html
index 9bab6a5..8e89757 100644
--- a/footer.html
+++ b/footer.html
@@ -6,19 +6,13 @@
             <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>
-    <nav>
-        <ul>
-            <span>Across the web:</span><br>
-            <li><a href="https://mastodon.bsd.cafe/@bt">Mastodon</a></li><li><a href="https://lobste.rs/~bt">Lobsters</a></li><li><a href="https://news.ycombinator.com/user?id=bradley_taunt">HackerNews</a></li><li><a href="https://lowendtalk.com/profile/btxx">LowEndTalk</a></li>
-        </ul>
-    </nav>
     <small>
-        Built with <a href="https://wruby.btxx.org">wruby</a><br>
-        Type set in <a href="https://www.lettersoup.de/sofia-sans/">Sofia Sans</a><br>
+        Built with <a href="https://wruby.btxx.org">wruby</a> <br>
         Running on <a href="https://openbsd.org">OpenBSD</a> via <a href="https://billing.linveo.com/order/forms/a/MTM4Ng==">Linveo</a><br>
         Supporter of <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a> & <a href="https://usefathom.com/ref/DKHJVX">Fathom Analytics</a><br/>
-        All site content is <a
-          href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> and the <a href="https://git.sr.ht/~bt/btxx.org">source code</a>
+        The content for this site is <a
+          href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a><br>
+        The <a href="https://git.sr.ht/~bt/btxx.org">code for this site</a>
         is <a href="https://git.sr.ht/~bt/btxx.org/tree/master/item/LICENSE">MIT</a>
     </small>
 </footer>
diff --git a/gzip.sh b/gzip.sh
deleted file mode 100644
index 653b18b..0000000
--- a/gzip.sh
+++ /dev/null
@@ -1 +0,0 @@
-find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.jpg" -o -name "*.png" -o -name "*.webp" -o -name "*.woff2" \) -exec gzip -k -f {} \;
\ No newline at end of file
diff --git a/header.html b/header.html
index 1aae739..29cc254 100644
--- a/header.html
+++ b/header.html
@@ -11,7 +11,9 @@
 </head>
 
 <nav id="top">
-	<a href="/">Home</a><span>&nbsp;|&nbsp;</span><a href="#menu">Menu</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 cacae98..a07d173 100644
--- a/index.md
+++ b/index.md
@@ -1,14 +1,16 @@
-# btxx.org
+# btxx
 
-*Fullstack Developer / UX Designer*
+## Fullstack Developer / UX Designer
 
-I'm Brad, 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).
+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 also actively maintain several [open source projects](/projects).
 
-Core tools are HTML, CSS, Ruby, JavaScript & PHP. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif).
+## Skills & Languages
 
-*Design Thought Experiments:*
+Core tools are HTML, CSS, Ruby, JavaScript & PHP. Currently improving my skills with Rails & MongoDB. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif).
+
+## Design Thought Experiments
 
 * [Stop Using Hamburger Menus (Sometimes)](/posts/hamburgers)
 * [Better Search Results](https://search.btxx.org)
diff --git a/pages/now.md b/pages/now.md
index 88f71e7..5d4bd7b 100644
--- a/pages/now.md
+++ b/pages/now.md
@@ -8,7 +8,7 @@ This page is based off the [now page concept](https://nownownow.com/about) by De
 
 ## Life
 
-- Raising my three children (aged 6, 5 and 2 respectively) with my wonderful wife
+- Raising my three children (aged 6, 4 and 2 respectively) with my wonderful wife
 - Trying to contribute more to open source projects that I actively use
 - Slowly teaching myself C & RSpec
 - Advancing my knowledge of Ruby
diff --git a/public/fonts/IBMPlexSans-Bold.woff2 b/public/fonts/IBMPlexSans-Bold.woff2
new file mode 100644
index 0000000..b570504
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Bold.woff2
diff --git a/public/fonts/IBMPlexSans-Italic.woff2 b/public/fonts/IBMPlexSans-Italic.woff2
new file mode 100644
index 0000000..57523c9
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Italic.woff2
diff --git a/public/fonts/IBMPlexSans-Regular.woff2 b/public/fonts/IBMPlexSans-Regular.woff2
new file mode 100644
index 0000000..ca64cc5
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Regular.woff2
diff --git a/public/fonts/SofiaSans-Medium.woff2 b/public/fonts/SofiaSans-Medium.woff2
deleted file mode 100644
index b251a2c..0000000
--- a/public/fonts/SofiaSans-Medium.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-MediumItalic.woff2 b/public/fonts/SofiaSans-MediumItalic.woff2
deleted file mode 100644
index 4ebf61b..0000000
--- a/public/fonts/SofiaSans-MediumItalic.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-Regular.woff2 b/public/fonts/SofiaSans-Regular.woff2
deleted file mode 100644
index 4d16f7a..0000000
--- a/public/fonts/SofiaSans-Regular.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-SemiBold.woff2 b/public/fonts/SofiaSans-SemiBold.woff2
deleted file mode 100644
index c690dcc..0000000
--- a/public/fonts/SofiaSans-SemiBold.woff2
+++ /dev/null
diff --git a/public/style.css b/public/style.css
index 58e63c7..4d8fd13 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,147 +2,275 @@
     box-sizing: border-box;
 }
 
-@font-face {
-    font-family: 'Sofia Sans';
-    font-style: normal;
-    font-weight: normal;
-    src: url('/public/fonts/SofiaSans-Regular.woff2') format('woff2');
+:root {
+	--main-color: #228427;
 }
-@font-face {
-    font-family: 'Sofia Sans';
-    font-style: italic;
-    font-weight: normal;
-    src: url('/public/fonts/SofiaSans-MediumItalic.woff2') format('woff2');
-}
-@font-face {
-    font-family: 'Sofia Sans';
-    font-weight: bold;
-    src: url('/public/fonts/SofiaSans-SemiBold.woff2') format('woff2');
+
+html {
+	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
+	padding: 0;
+	margin: 0;
+    scroll-behavior: smooth;
 }
 
 body {
-	color: #2d2d2d;
-	font-family: "Sofia Sans", serif;
-  	line-height: 1.48;
-    font-size: 16px;
-    padding: 0 10px;
-    margin: 4rem auto;
-    max-width: 680px;
+	background-color: #f9f9f9;
+	color: #333;
+	font-size: 100%;
+	max-width: 85%;
+  	margin: 1rem auto;
+	padding: 0;
 }
 
-nav#top a {
-	display: inline-block;
-	margin: 0 0 1rem 0;
+nav > ul {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+    flex-wrap: wrap;
+	font-weight: bold;
+	flex-direction: row;
+	position: relative;
 }
 
+nav > ul > li {
+	align-items: center;
+	display: inline-flex;
+}
+
+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;
+}
+
+nav > ul > li > a:hover, nav > ul > li > a:active {
+	text-decoration: none;
+	background-color: var(--main-color);
+	color: #fff;
+}
+
+/*--- End Top Nav ---*/
+
 main {
-	max-width: 42em;
-	margin:15 auto;
+	display: block;
+	width: 100%;
+	margin: 0;
+	padding: 1px 0 20px 0;
+	border: 1px solid var(--main-color);
+	background-color: #fff;
 }
 
-pre {
-	background: lightgoldenrodyellow;
-	border-radius: 2px;
-	overflow: auto;
-	padding: 8px;
+main > p > em {
+	font-weight: normal;
+	font-style: italic;
 }
 
-code {
-	background: lightgoldenrodyellow;
-	border-radius: 2px;
-	color: saddlebrown;
-	font-size: 14px;
-	padding: 1px 2px;
+main ul, main ol {
+	padding-right: 10px;
 }
 
-img {
-	height: auto;
-	max-width: 100%;
+/*--- Begin Footer ---*/
+
+footer nav ul {
+	margin: -1px 0 0 0;
+}
+footer small {
+    display: block;
+    margin: 20px 0 0 0;
+    padding: 0 0 0 10px;
 }
 
-figure {
-	margin: 3rem 0;
+/*--- Links ---*/
+
+a {
+	color: var(--main-color);
 }
-figcaption {
-	font-family: sans-serif;
-	font-size: 90%;
+
+a:hover {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
 }
 
-blockquote {
-	background: rgba(0,0,0,0.05);
-	border-left: 2px solid;
-	margin-bottom: 2rem;
-	margin-top: 2rem;
-	padding-left: 10px;
+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 {
-	font-size: 28px;
-	line-height: 1.2;
-	margin: 0 0 10px;
+	font-size: 190%;
+	margin: 18px 18px 0 18px;
 }
-h1 + p {
-	margin-bottom: 2rem;
-	margin-top: 0;
+
+h2 {
+	font-size: 125%;
+	margin: 18px 18px 0 18px;
+}
+
+h3 {
+	font-size: 113%;
+	margin: 18px 18px 0 18px;
 }
 
-h2,h3,h4,h5,h6 {
-	color: grey;
-	line-height: 1.2;
-	margin-top: 3rem;
+h4 {
+	margin: 18px 18px 0 18px;
 }
 
-.posts {
-	list-style: none;
+p {
+	margin: 12px 18px 18px 18px;
 	padding: 0;
+	line-height: 1.25em;
 }
-.posts li {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 8px;
+
+hr {
+    margin: 2rem 0;
 }
-.posts li span {
-	font-size: 90%;
-	font-style: italic;
-	margin-left: 10px;
-	min-width: 100px;
-	opacity: 0.7;
-	text-align: right;
+
+img {
+    height: auto;
+    max-width: 100%;
 }
 
-footer {
-	margin-top: 4rem;
+pre {
+    background: #eee;
+    padding: 20px;
+    overflow: auto;
 }
 
-footer nav {
-	margin-bottom: 2rem;
+code {
+	font-size: 110%;
 }
 
-footer nav ul {
-	list-style: none;
+.table-container {
+	margin: 2rem 0;
+	overflow-y: scroll;
+}
+table {
+    border-collapse: collapse;
+    min-width: 500px;
+    text-align: left;
+    width: 100%;
+}
+table caption {
+	background: #eee;
+	font-weight: bold;
+	font-size: 120%;
+	padding: 10px;
+	text-align: left;
+}
+table tr {
+    border-bottom: 1px solid;
+}
+table th, table td {
+    padding: 10px;
+}
+
+blockquote {
+	background: #f2f2f2;
+	border-left: 2px solid grey;
+	padding: 6px;
+}
+blockquote p {
 	margin: 0;
-	padding: 0;
 }
-footer nav ul li {
-	display: inline-block;
-	margin-right: 10px;
+
+.footnotes {
+	font-size: 90%;
+}
+
+/*--- List Styles ---*/
+
+ol {
+	line-height: 1.25em;
+}
+
+ul, ol {
+	margin: 12px 0 0 36px;
+	padding: 0 0 0 24px;
+	line-height: 1.5em;
+}
+
+ul {
+	list-style-type: square;
+}
+
+li ul, li ol {
+	margin-top: 0;
+}
+
+ul.posts li {
+	margin-bottom: 10px;
+}
+ul.posts li span {
+	display: block;
+} 
+
+@media(max-width:600px) {
+	body {
+		max-width: 100%;
+		margin: 12px;
+	}
+    nav ul {
+        display: block;
+        margin: 0 0 -1px 0;
+    }
+    nav > ul > li {
+        width: 50%;
+    }
+    nav > ul > li > a {
+        border-right: 0;
+        display: block;
+        margin: 0;
+        width: 100%;
+    }
+    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) {
+	:root {
+		--main-color: #eee8a7;
+	}
+	html, body {
+		background: black;
+	}
 	body {
+		color: white;
+	}
+	main {
 		background: #2d2d2d;
-		color: #f1f1f1;
 	}
-	h2,h3,h4,h5,h6 {
-		color: lightgrey;
+	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: rgba(0,0,0,0.5);
+		background: black;
 	}
 }
-
-@media(max-width:680px) {
-	body {
-		margin: 1rem auto;
-	}
-}
\ No newline at end of file
diff --git a/wruby.rb b/wruby.rb
index c646630..d4f49e6 100644
--- a/wruby.rb
+++ b/wruby.rb
@@ -58,8 +58,6 @@ def process_markdown_files(input_directory, output_directory, header_content, fo
     date = Date.parse(lines[2]&.strip || '') rescue Date.today
     html_content = Kramdown::Document.new(md_content).to_html
 
-    formatted_date = date.strftime("%b %d, %Y")
-
     relative_path = path.sub(input_directory + '/', '').sub('.md', '')
     item_dir = File.join(output_directory, relative_path)
     output_file = "#{item_dir}/index.html"
@@ -68,7 +66,7 @@ def process_markdown_files(input_directory, output_directory, header_content, fo
     header = replace_title_placeholder(header_content, title)
     File.write(output_file, header + html_content + footer_content)
 
-    items << { title: title, date: date, formatted_date: formatted_date, link: relative_path + '/', content: html_content }
+    items << { title: title, date: date, link: relative_path + '/', content: html_content }
   end
 
   items
@@ -83,7 +81,7 @@ def generate_index(posts, header_content, footer_content, root_index_file, post_
   header = replace_title_placeholder(header_content, root_title)
 
   index_content = header + root_html + "<ul class=\"posts\">\n"
-  posts.first(post_count).each { |post| index_content << "<li><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a><span>#{post[:formatted_date]}</span></li>\n" }
+  posts.first(post_count).each { |post| index_content << "<li><span>#{post[:date]}</span><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a></li>\n" }
   index_content << "</ul>\n<p><a href='/#{posts_dir}'>View all posts &rarr;</a></p>\n" + footer_content
 
   File.write("#{output_dir}/index.html", index_content)
@@ -98,7 +96,7 @@ def generate_full_posts_list(posts, header_content, footer_content, posts_index_
   header = replace_title_placeholder(header_content, posts_title)
 
   list_content = header + posts_html + "<ul class=\"posts\">\n"
-  posts.each { |post| list_content << "<li><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a><span>#{post[:formatted_date]}</span></li>\n" }
+  posts.each { |post| list_content << "<li><span>#{post[:date]}</span><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a></li>\n" }
   list_content << "</ul>\n" + footer_content
 
   File.write("#{output_dir}/posts/index.html", list_content)