Complete styling changes - again

15 files changed, 118 insertions, 243 deletions

diff --git a/Makefile b/Makefile
index 2207bdc..28a6eb2 100644
--- a/Makefile
+++ b/Makefile
@@ -6,5 +6,3 @@ 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 8e89757..9bab6a5 100644
--- a/footer.html
+++ b/footer.html
@@ -6,13 +6,19 @@
             <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>
+        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>
         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/>
-        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>
+        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>
         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
new file mode 100644
index 0000000..653b18b
--- /dev/null
+++ b/gzip.sh
@@ -0,0 +1 @@
+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 29cc254..1aae739 100644
--- a/header.html
+++ b/header.html
@@ -11,9 +11,7 @@
 </head>
 
 <nav id="top">
-	<ul>
-		<li><a href="/">Home</a></li><li><a href="#menu">Menu</a></li>
-	</ul>
+	<a href="/">Home</a><span>&nbsp;|&nbsp;</span><a href="#menu">Menu</a>
 </nav>
 
 <main>
diff --git a/index.md b/index.md
index a07d173..cacae98 100644
--- a/index.md
+++ b/index.md
@@ -1,16 +1,14 @@
-# btxx
+# btxx.org
 
-## 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'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 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).
 
 I also actively maintain several [open source projects](/projects).
 
-## Skills & Languages
+Core tools are HTML, CSS, Ruby, JavaScript & PHP. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif).
 
-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
+*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 5d4bd7b..88f71e7 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, 4 and 2 respectively) with my wonderful wife
+- Raising my three children (aged 6, 5 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
deleted file mode 100644
index b570504..0000000
--- a/public/fonts/IBMPlexSans-Bold.woff2
+++ /dev/null
diff --git a/public/fonts/IBMPlexSans-Italic.woff2 b/public/fonts/IBMPlexSans-Italic.woff2
deleted file mode 100644
index 57523c9..0000000
--- a/public/fonts/IBMPlexSans-Italic.woff2
+++ /dev/null
diff --git a/public/fonts/IBMPlexSans-Regular.woff2 b/public/fonts/IBMPlexSans-Regular.woff2
deleted file mode 100644
index ca64cc5..0000000
--- a/public/fonts/IBMPlexSans-Regular.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-Medium.woff2 b/public/fonts/SofiaSans-Medium.woff2
new file mode 100644
index 0000000..b251a2c
--- /dev/null
+++ b/public/fonts/SofiaSans-Medium.woff2
diff --git a/public/fonts/SofiaSans-MediumItalic.woff2 b/public/fonts/SofiaSans-MediumItalic.woff2
new file mode 100644
index 0000000..4ebf61b
--- /dev/null
+++ b/public/fonts/SofiaSans-MediumItalic.woff2
diff --git a/public/fonts/SofiaSans-Regular.woff2 b/public/fonts/SofiaSans-Regular.woff2
new file mode 100644
index 0000000..4d16f7a
--- /dev/null
+++ b/public/fonts/SofiaSans-Regular.woff2
diff --git a/public/fonts/SofiaSans-SemiBold.woff2 b/public/fonts/SofiaSans-SemiBold.woff2
new file mode 100644
index 0000000..c690dcc
--- /dev/null
+++ b/public/fonts/SofiaSans-SemiBold.woff2
diff --git a/public/style.css b/public/style.css
index 4d8fd13..58e63c7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,275 +2,147 @@
     box-sizing: border-box;
 }
 
-:root {
-	--main-color: #228427;
+@font-face {
+    font-family: 'Sofia Sans';
+    font-style: normal;
+    font-weight: normal;
+    src: url('/public/fonts/SofiaSans-Regular.woff2') format('woff2');
 }
-
-html {
-	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
-	padding: 0;
-	margin: 0;
-    scroll-behavior: smooth;
+@font-face {
+    font-family: 'Sofia Sans';
+    font-style: italic;
+    font-weight: normal;
+    src: url('/public/fonts/SofiaSans-MediumItalic.woff2') format('woff2');
 }
-
-body {
-	background-color: #f9f9f9;
-	color: #333;
-	font-size: 100%;
-	max-width: 85%;
-  	margin: 1rem auto;
-	padding: 0;
-}
-
-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: 'Sofia Sans';
+    font-weight: bold;
+    src: url('/public/fonts/SofiaSans-SemiBold.woff2') format('woff2');
 }
 
-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;
+body {
+	color: #2d2d2d;
+	font-family: "Sofia Sans", serif;
+  	line-height: 1.48;
+    font-size: 16px;
+    padding: 0 10px;
+    margin: 4rem auto;
+    max-width: 680px;
 }
 
-nav > ul > li > a:hover, nav > ul > li > a:active {
-	text-decoration: none;
-	background-color: var(--main-color);
-	color: #fff;
+nav#top a {
+	display: inline-block;
+	margin: 0 0 1rem 0;
 }
 
-/*--- 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;
+	max-width: 42em;
+	margin:15 auto;
 }
 
-/*--- Begin Footer ---*/
-
-footer nav ul {
-	margin: -1px 0 0 0;
-}
-footer small {
-    display: block;
-    margin: 20px 0 0 0;
-    padding: 0 0 0 10px;
+pre {
+	background: lightgoldenrodyellow;
+	border-radius: 2px;
+	overflow: auto;
+	padding: 8px;
 }
 
-/*--- Links ---*/
-
-a {
-	color: var(--main-color);
+code {
+	background: lightgoldenrodyellow;
+	border-radius: 2px;
+	color: saddlebrown;
+	font-size: 14px;
+	padding: 1px 2px;
 }
 
-a:hover {
-	text-decoration: none;
-	color: #fff;
-	background-color: var(--main-color);
+img {
+	height: auto;
+	max-width: 100%;
 }
 
-a:active {
-	text-decoration: none;
-	color: #fff;
-	background-color: var(--main-color);
+figure {
+	margin: 3rem 0;
 }
-
-a, img {
-	border: none;
+figcaption {
+	font-family: sans-serif;
+	font-size: 90%;
 }
 
-a:focus, img:focus {
-	outline: none;
+blockquote {
+	background: rgba(0,0,0,0.05);
+	border-left: 2px solid;
+	margin-bottom: 2rem;
+	margin-top: 2rem;
+	padding-left: 10px;
 }
 
-/*--- Header Styles ---*/
-
 h1 {
-	font-size: 190%;
-	margin: 18px 18px 0 18px;
-}
-
-h2 {
-	font-size: 125%;
-	margin: 18px 18px 0 18px;
+	font-size: 28px;
+	line-height: 1.2;
+	margin: 0 0 10px;
 }
-
-h3 {
-	font-size: 113%;
-	margin: 18px 18px 0 18px;
+h1 + p {
+	margin-bottom: 2rem;
+	margin-top: 0;
 }
 
-h4 {
-	margin: 18px 18px 0 18px;
+h2,h3,h4,h5,h6 {
+	color: grey;
+	line-height: 1.2;
+	margin-top: 3rem;
 }
 
-p {
-	margin: 12px 18px 18px 18px;
+.posts {
+	list-style: none;
 	padding: 0;
-	line-height: 1.25em;
-}
-
-hr {
-    margin: 2rem 0;
-}
-
-img {
-    height: auto;
-    max-width: 100%;
 }
-
-pre {
-    background: #eee;
-    padding: 20px;
-    overflow: auto;
-}
-
-code {
-	font-size: 110%;
-}
-
-.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;
+.posts li {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 8px;
 }
-
-.footnotes {
+.posts li span {
 	font-size: 90%;
+	font-style: italic;
+	margin-left: 10px;
+	min-width: 100px;
+	opacity: 0.7;
+	text-align: right;
 }
 
-/*--- 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;
+footer {
+	margin-top: 4rem;
 }
 
-li ul, li ol {
-	margin-top: 0;
+footer nav {
+	margin-bottom: 2rem;
 }
 
-ul.posts li {
-	margin-bottom: 10px;
+footer nav ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
-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;
-    }
+footer nav ul li {
+	display: inline-block;
+	margin-right: 10px;
 }
 
 @media(prefers-color-scheme: dark) {
-	:root {
-		--main-color: #eee8a7;
-	}
-	html, body {
-		background: black;
-	}
 	body {
-		color: white;
-	}
-	main {
 		background: #2d2d2d;
+		color: #f1f1f1;
 	}
-	table caption {
-		background: black;
-	}
-	nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active {
-		color: black;
-	}
-	pre {
-		background: black;
+	h2,h3,h4,h5,h6 {
+		color: lightgrey;
 	}
 	blockquote {
-		background: black;
+		background: rgba(0,0,0,0.5);
 	}
 }
+
+@media(max-width:680px) {
+	body {
+		margin: 1rem auto;
+	}
+}
\ No newline at end of file
diff --git a/wruby.rb b/wruby.rb
index d4f49e6..c646630 100644
--- a/wruby.rb
+++ b/wruby.rb
@@ -58,6 +58,8 @@ 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"
@@ -66,7 +68,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, link: relative_path + '/', content: html_content }
+    items << { title: title, date: date, formatted_date: formatted_date, link: relative_path + '/', content: html_content }
   end
 
   items
@@ -81,7 +83,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><span>#{post[:date]}</span><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a></li>\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" }
   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)
@@ -96,7 +98,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><span>#{post[:date]}</span><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a></li>\n" }
+  posts.each { |post| list_content << "<li><a href='/#{posts_dir}/#{post[:link]}'>#{post[:title]}</a><span>#{post[:formatted_date]}</span></li>\n" }
   list_content << "</ul>\n" + footer_content
 
   File.write("#{output_dir}/posts/index.html", list_content)