Minimal stylin changes, about page, table cleanup

author: Bradley Taunt <bt@btxx.org> 2025-01-20 15:39:24 -0500
committer: Bradley Taunt <bt@btxx.org> 2025-01-20 15:39:24 -0500
commit: c0673c23500eadb6d268b9650a4c79f1f4de4f4d (patch)
tree: 20b3b48623879ea9c689a123949eb2a9d2e5b4aa
parent: 2fb22bc24f246c082bed0aca7cbee284fe26d71a (diff)
12 files changed, 199 insertions, 336 deletions
diff --git a/_config.yml b/_config.yml
index 0c19f24..d7a9584 100644
--- a/_config.yml
+++ b/_config.yml
@@ -18,4 +18,4 @@ files:
   rss: 'build/index.rss'
 
 misc:
-  post_count: 10
+  post_count: 50
diff --git a/_drafts/beginners-guide-sourcehut.md b/_drafts/beginners-guide-sourcehut.md
new file mode 100644
index 0000000..a98f571
--- /dev/null
+++ b/_drafts/beginners-guide-sourcehut.md
@@ -0,0 +1,49 @@
+# Git Your Freedom Back: A Beginner's Guide to Sourcehut
+{:.no_toc}
+
+2025-01-20
+
+This article (or guide) is targeted towards users and contributors who are currently hosting their git repositories through GitHub. The goal of this post is to convince developers to move away from GitHub altogether. I will breakdown each of GitHub's core features and provide details on Sourcehut's alternative approach for each of these. Hopefully by the end of this guide developers will try Sourcehut or, at the very least, begin to question *why* they are still using GitHub.
+
+> **Note:** Clearly the most "free" git solution would be hosting your own git server. Self-hosting is a great idea and you should do so if you have the means. That being said, this article is focused on Sourcehut since most users do not have the time to manage both their projects **and** maintain a self-hosted instance.
+
+## Before We Begin
+{:.no_toc}
+
+It is important to make this clear: I am in *no way* affiliated with Sourcehut, nor have I been approached to write this guide. I'm simply a happy Sourcehut user who wants to see the community thrive!
+
+You'll also need to approach this guide with an open-mind. If you start off angry or feel like this is an attack on you for using (and maybe even enjoying!) GitHub, then you should come back once you're in a better *headspace*. This is merely a detailed guide on how to achieve a solid set of feature parity between GitHub and Sourcehut.
+
+Alright, enough talk. Let's get into it!
+
+## Table of Contents
+{:.no_toc}
+
+* toc
+{:toc}
+
+## Why GitHub Isn't Great
+
+## GitHub Core Features
+
+- Issues (Tickets)
+- Pull Requests
+- Actions
+- Pages
+- Wiki
+
+## Sourcehut's Alternatives
+
+### Pull Requests &rarr; Patches
+
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores blanditiis consequatur possimus reprehenderit, ratione architecto magnam officia. Quos culpa vel eligendi molestias, enim aperiam fugit impedit labore at, nam autem.
+
+### Actions &rarr; Builds
+
+### Issues &rarr; TODOs
+
+### Pages &rarr; Pages
+
+### Wiki &rarr; Wiki
+
+## Why Not Use...?
+\ No newline at end of file
diff --git a/footer.html b/footer.html
index 8e89757..6bf510f 100644
--- a/footer.html
+++ b/footer.html
@@ -3,7 +3,7 @@
 <footer role="contentinfo">
     <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>
+            <li><a href="/">Home</a></li><li><a href="/about">About</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>
diff --git a/header.html b/header.html
index 29cc254..95e3327 100644
--- a/header.html
+++ b/header.html
@@ -3,17 +3,16 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="color-scheme" content="dark light">
 	<link rel="icon" href="data:,">
 	<title>{{TITLE}}</title>
 	<link href="/index.rss" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
-	<link rel="stylesheet" href="/public/style.css">
+	<link rel="stylesheet" href="/public/style.css?v=1.0">
 </head>
 
-<nav id="top">
-	<ul>
-		<li><a href="/">Home</a></li><li><a href="#menu">Menu</a></li>
-	</ul>
-</nav>
+<header id="top">
+	<nav>
+		<a href="/"><b>btxx.org</b></a><span> | </span><a href="#menu">Menu</a>
+	</nav>
+</header>
 
 <main>
diff --git a/index.md b/index.md
index a07d173..0a92d14 100644
--- a/index.md
+++ b/index.md
@@ -1,20 +1,3 @@
-# btxx
+# Bradley Taunt
 
-## 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 also actively maintain several [open source projects](/projects).
-
-## Skills & Languages
-
-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)
-* [My Coffee Maker Just Makes Coffee](/posts/one-thing)
-* [Blog Anonymously](https://anon.btxx.org)
-
-## Latest Posts
+*...talks about software, design, and life.*
diff --git a/pages/about.md b/pages/about.md
new file mode 100644
index 0000000..90cf06a
--- /dev/null
+++ b/pages/about.md
@@ -0,0 +1,23 @@
+# About
+
+The man behind the site...
+
+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).
+
+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)
+* [My Coffee Maker Just Makes Coffee](/posts/one-thing)
+* [Blog Anonymously](https://anon.btxx.org)
+
+Elsewhere on the web: 
+
+- [Mastodon]()
+- [Lobsters]()
+- [HackerNews]()
+- [LowEndTalk]()
diff --git a/pages/pizza.md b/pages/pizza.md
index 1989e91..a542d56 100644
--- a/pages/pizza.md
+++ b/pages/pizza.md
@@ -58,7 +58,7 @@ All prices in US dollars (USD)
 
 <form action="https://www.paypal.com/donate" method="post" target="_top">
 <input type="hidden" name="hosted_button_id" value="5A32GB38TPRBG" />
-<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
+<input type="image" src="/public/images/paypal.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
 <img alt="" border="0" src="https://www.paypal.com/en_CA/i/scr/pixel.gif" width="1" height="1" />
 </form>
 
diff --git a/posts/default-html-style-updates.md b/posts/default-html-style-updates.md
index 85a807b..e0e5cbf 100644
--- a/posts/default-html-style-updates.md
+++ b/posts/default-html-style-updates.md
@@ -57,7 +57,7 @@ That is probably the most streamlined dark mode on the web...
 
 ## The "Reading Length" Debate
 
-Proper reading length tends to be quite the point of contention on the web. Hell, even I've [written about it quite a bit](/character-unit/) in the past (and many of my side projects follow that standard). The main problem I have with this is lack of *user control*. I don't think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I *still* believe it should come down to user preference.
+Proper reading length tends to be quite the point of contention on the web. Hell, even I've [written about it quite a bit](/posts/character-unit/) in the past (and many of my side projects follow that standard). The main problem I have with this is lack of *user control*. I don't think the browser (or designers for that matter) should determine the best reading length for my own personal reading preferences. UX testing and group feedback has (somewhat) agreed upon 66-75 characters per line to be the most optimal reading experience. That is good to know. I *still* believe it should come down to user preference.
 
 Do you want to know an incredible feature built into browsers? *Window resizing*. Abandon the idea that you "know better" than your users and give them the power to adjust as they see fit. The web was meant to be personal and flexible.
 
diff --git a/posts/rss-hacks.md b/posts/rss-hacks.md
index 3d1890c..666d72c 100644
--- a/posts/rss-hacks.md
+++ b/posts/rss-hacks.md
@@ -15,8 +15,10 @@ Since the shinobi script generates valid RSS code by default, I didn't want to m
 My first attempt was to use the available `sort` parameter (in XSL version 1.1+) targeting the `dc:date` type linked to the `pubDate` element:
 
 
-    <xsl:sort select="pubDate" data-type="dc:date" order="descending"/>
-    <!-- each individual post's content here -->
+~~~html
+<xsl:sort select="pubDate" data-type="dc:date" order="descending"/>
+<!-- each individual post's content here -->
+~~~
 
 
 This did not work as intended. RSS 2.0 requires that the `pubDate` content is set to comply with the RFC-822 date-time[^4], which shinobi handles perfectly fine. The issue came from the XSL `sort` parameter not honoring this setting across all dates. My best guess is that it struggles to properly organize posts from their "month" parameter, so it sets the posts in order of date in what I refer to as "monthly sections".
@@ -32,13 +34,17 @@ Then I remembered the `category` tag which shinobi does not utilize by default.
 First I needed to convert the RFC-822 formatted date (found on the first line of all blog post text files) and render it inside a `category` tag. This was simple enough:
 
 
-    $(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y/%m/%d/%u")
+~~~sh
+$(date -j -f "%a, %d %b %Y" "$(head -n 1 $file)" +"%Y/%m/%d/%u")
+~~~
 
 
 In a nutshell, this converts the RFC-822 date into the format "2022/05/24/2". Simple numbers that can be sorted much easier by XSL. Now all that was needed was setting to `sort` parameter properly:
 
 
-    <xsl:sort select="category" order="descending"/>
+~~~sh
+<xsl:sort select="category" order="descending"/>
+~~~
 
 
 Everything worked perfectly and the RSS was still valid!
diff --git a/posts/tables.md b/posts/tables.md
index c969889..4df3742 100644
--- a/posts/tables.md
+++ b/posts/tables.md
@@ -17,9 +17,11 @@ Included below are two separate demos showing how to optimize `table` HTML for m
 Okay I will admit, this implementation isn't the *greatest* but I find it does work well with huge datasets. Simply set a `min-width` on your parent `table` element and the browser will just require the user to scroll the contents horizontally.
 
 
-    table {
-        min-width: 800px; /* Set your desired min-width here */
-    }
+~~~css
+table {
+    min-width: 800px; /* Set your desired min-width here */
+}
+~~~
 
 
 Check out the CodePen below to see it in action:
@@ -32,28 +34,29 @@ I actually prefer this method because of its simplicity and function. Users on m
 
 Using something like `flexbox` tends to work better when you are working with smaller table datasets. All you need to do is add some minor `flexbox` layout at your targeted mobile screen size.
 
-
-    /* Using 800px as mobile screen in this example */
-    @media(max-width: 800px) {
-        /* Hide the table headings */
-        table thead {
-            left: -9999px;
-            position: absolute;
-            visibility: hidden;
-        }
-        table tr {
-            border-bottom: 0;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            margin-bottom: 40px;
-        }
-        table td {
-            border: 1px solid;
-            margin: 0 -1px -1px 0; /* Removes double-borders */
-            width: 50%;
-        }
+~~~css
+/* Using 800px as mobile screen in this example */
+@media(max-width: 800px) {
+    /* Hide the table headings */
+    table thead {
+        left: -9999px;
+        position: absolute;
+        visibility: hidden;
+    }
+    table tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 40px;
+    }
+    table td {
+        border: 1px solid;
+        margin: 0 -1px -1px 0; /* Removes double-borders */
+        width: 50%;
     }
+}
+~~~
 
 
 [Check out the CodePen demo](https://codepen.io/bradleytaunt/pen/mZbvOb/)
@@ -65,47 +68,48 @@ There are some caveats with this approach:
 
 You could keep the table headings and style them the same as the `tbody` contents, but I find hiding them a little cleaner. That choice is entirely up to your personal preference. You can also decide to add heading `span` elements inside the main `tbody` elements like so:
 
-
-    /* Default span styling - hidden on desktop */
-    table td span {
-        background: #eee;
-        color: dimgrey;
-        display: none;
-        font-size: 10px;
-        font-weight: bold;
-        padding: 5px;
+~~~css
+/* Default span styling - hidden on desktop */
+table td span {
+    background: #eee;
+    color: dimgrey;
+    display: none;
+    font-size: 10px;
+    font-weight: bold;
+    padding: 5px;
+    position: absolute;
+    text-transform: uppercase;
+    top: 0;
+    left: 0;
+}
+
+/* Simple CSS for flexbox table on mobile */
+@media(max-width: 800px) {
+    table thead {
+        left: -9999px;
         position: absolute;
-        text-transform: uppercase;
-        top: 0;
-        left: 0;
+        visibility: hidden;
+    }
+    table tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 40px;
     }
-    
-    /* Simple CSS for flexbox table on mobile */
-    @media(max-width: 800px) {
-        table thead {
-            left: -9999px;
-            position: absolute;
-            visibility: hidden;
-        }
-        table tr {
-            border-bottom: 0;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            margin-bottom: 40px;
-        }
-        table td {
-            border: 1px solid;
-            margin: 0 -1px -1px 0;
-            padding-top: 35px; /* additional padding to avoid heading overlap */
-            position: relative;
-            width: 50%;
-        }
-        /* Show the heading span */
-        table td span {
-            display: block;
-        }
+    table td {
+        border: 1px solid;
+        margin: 0 -1px -1px 0;
+        padding-top: 35px; /* additional padding to avoid heading overlap */
+        position: relative;
+        width: 50%;
+    }
+    /* Show the heading span */
+    table td span {
+        display: block;
     }
+}
+~~~
 
 
 [Live CodePen Example](https://codepen.io/bradleytaunt/pen/mZdzmZ/)
diff --git a/public/images/paypal.gif b/public/images/paypal.gif
new file mode 100644
index 0000000..74b9028
--- /dev/null
+++ b/public/images/paypal.gif
diff --git a/public/style.css b/public/style.css
index 53a4b46..ccbbeeb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,144 +2,46 @@
     box-sizing: border-box;
 }
 
-:root {
-	--main-color: #228427;
-}
-
-html {
-	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
-	padding: 0;
-	margin: 0;
-    scroll-behavior: smooth;
-}
-
 body {
-	background-color: #f9f9f9;
-	color: #333;
-	font-size: 100%;
-	max-width: 920px;
-  	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;
-}
-
-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 {
-	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;
+	font-family: sans-serif;
+    line-height: 1.4;
+    padding: 12px;
 }
 
-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;
-}
-
-/*--- Links ---*/
-
-a {
-	color: var(--main-color);
-}
-
-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;
+h1 {
+    line-height: 1.2;
+    margin-bottom: 0;
 }
-
-a:focus, img:focus {
-	outline: none;
+h1 + p {
+    margin-top: 0;
 }
 
-/*--- Header Styles ---*/
-
-h1 {
-	font-size: 190%;
-	margin: 18px 18px 0 18px;
+.posts {
+    padding: 0 0 0 12px;
 }
-
-h2 {
-	font-size: 125%;
-	margin: 18px 18px 0 18px;
+.posts li {
+    margin: 0 0 10px;
 }
-
-h3 {
-	font-size: 113%;
-	margin: 18px 18px 0 18px;
+.posts li span {
+    display: none;
 }
 
-h4 {
-	margin: 18px 18px 0 18px;
+p code, ul code, ol code, blockquote code {
+    background: #f1f1f1;
+    padding: 2px;
 }
 
-p {
-	margin: 12px 18px 18px 18px;
-	padding: 0;
-	line-height: 1.25em;
+pre {
+    background: #f1f1f1;
+    overflow: auto;
+    padding: 8px;
 }
 
-hr {
-    margin: 2rem 0;
+blockquote {
+    color: brown;
+    font-family: serif;
+    font-style: italic;
+    font-size: 110%;
 }
 
 img {
@@ -147,130 +49,27 @@ img {
     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;
+    margin: 2em 0;
     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;
+    padding: 4px;
 }
-blockquote p {
-	margin: 0;
+table tr:nth-of-type(even) {
+    background: #f1f1f1;
 }
 
-.footnotes {
-	font-size: 90%;
+footer {
+    margin: 2rem 0 0;
 }
-
-/*--- 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;
-	}
-	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;
-	}
+footer nav ul {
+    list-style: none;
+    padding: 0;
 }
+footer nav ul li {
+    display: inline-block;
+    margin: 0 10px 10px 0;
+}
+\ No newline at end of file
author	Bradley Taunt <bt@btxx.org>	2025-01-20 15:39:24 -0500
committer	Bradley Taunt <bt@btxx.org>	2025-01-20 15:39:24 -0500
commit	c0673c23500eadb6d268b9650a4c79f1f4de4f4d (patch)
tree	20b3b48623879ea9c689a123949eb2a9d2e5b4aa
parent	2fb22bc24f246c082bed0aca7cbee284fe26d71a (diff)