improve accessibility and typography

Sourceless · Sourceless · commit 76a8d46267c9 · 2026-03-30T13:00:38.000+01:00
Add comprehensive accessibility improvements to Jekyll site layouts:
- Add lang attribute to html element for screen readers
- Replace div wrapper with semantic &lt;nav&gt; and &lt;main&gt; landmarks
- Add skip-to-content link for keyboard navigation
- Add aria-labels to navigation links
- Use semantic list markup for navigation
- Replace br tags with CSS margin-based spacing
- Fix heading hierarchy (h1 → h2 progression in posts)
- Remove duplicate h2 headings from post layouts

Implement IBM Plex font family for improved typography:
- Use IBM Plex Mono for code blocks, headings, and navigation
- Use IBM Plex Sans for body text and general content
- Apply monospace date formatting on index page

These changes enhance usability for all users while maintaining
visual design consistency.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
     <head>
         <title>{% if page.title %}Sourceless - {{ page.title }}{% else %}Sourceless{% endif %}</title>
         <meta name="description" content="{{ page.summary | default: '' }}"/>
@@ -10,20 +10,29 @@
         <meta name="copyright" content="2020-{{ 'now' | date: '%Y' }} Laurence Pakenham-Smith"/>
         <meta name="robots" content="index"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <link rel="preconnect" href="https://fonts.googleapis.com"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;600&display=swap"/>
         <link rel="stylesheet" type="text/css" href="{{ '/assets/css/main.css' | relative_url }}"/>
     </head>
 
     <body>
-        <code id="content">
+        <a class="skip-link" href="#main-content">Skip to content</a>
+        <div id="content">
             <h1>sourceless</h1>
 
-            <a href="{{ '/' | relative_url }}">index</a>
-            {% assign sorted_pages = site.pages | where_exp: "p", "p.nav_order" | sort: "nav_order" %}
-            {% for p in sorted_pages %}
-            <a href="{{ p.url | relative_url }}">{{ p.title }}</a>
-            {% endfor %}
+            <nav aria-label="Main navigation">
+                <a href="{{ '/' | relative_url }}">index</a>
+                {% assign sorted_pages = site.pages | where_exp: "p", "p.nav_order" | sort: "nav_order" %}
+                {% for p in sorted_pages %}
+                <a href="{{ p.url | relative_url }}">{{ p.title }}</a>
+                {% endfor %}
+            </nav>
 
-            {{ content }}
-        </code>
+            <main id="main-content">
+                {% if page.title %}<h2>{{ page.title }}</h2>{% endif %}
+                {{ content }}
+            </main>
+        </div>
     </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,9 +1,8 @@
 ---
 layout: default
 ---
-<br/>
-<br/>
-<br/>
+<ul class="post-list">
 {% for post in site.posts %}
-{{ post.date | date: "%Y-%m-%d" }} <a href="{{ post.url | relative_url }}">{{ post.title }}</a><br />
+<li><span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span> <a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
 {% endfor %}
+</ul>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,13 +2,12 @@
 layout: default
 ---
 {{ content }}
-<br/>
-Posted {{ page.date | date: "%Y-%m-%d" }}
-<br/>
-<br/>
+<p class="post-meta">Posted {{ page.date | date: "%Y-%m-%d" }}</p>
+<nav class="post-nav" aria-label="Post navigation">
 {% if page.previous %}
-<a href="{{ page.previous.url | relative_url }}">&larr; {{ page.previous.title }}</a>
+<a href="{{ page.previous.url | relative_url }}" aria-label="Previous post: {{ page.previous.title }}">&larr; {{ page.previous.title }}</a>
 {% endif %}
 {% if page.next %}
-<a href="{{ page.next.url | relative_url }}">{{ page.next.title }} &rarr;</a>
+<a href="{{ page.next.url | relative_url }}" aria-label="Next post: {{ page.next.title }}">{{ page.next.title }} &rarr;</a>
 {% endif %}
+</nav>
diff --git a/_posts/2021-01-17-how-i-built-this-site.md b/_posts/2021-01-17-how-i-built-this-site.md
@@ -4,7 +4,6 @@ title: "Getting github pages to work with my custom site generator"
 date: 2021-01-17
 tags: [tutorial, guide, how]
 ---
-## Getting github pages to work with my custom site generator
 
 So, I built a [crappy site generator](https://github.com/Sourceless/sourceless.github.io).
 It's pretty bad, which is the result of some very targeted design decisions:
diff --git a/_posts/2021-03-19-the-documentation-triangle.md b/_posts/2021-03-19-the-documentation-triangle.md
@@ -4,7 +4,6 @@ title: "The Documentation Triangle"
 date: 2021-03-19
 tags: [documentation, self-documenting, documentation-as-code, opinion, triangle]
 ---
-## The Documentation Triangle (or, why code isn't self documenting)
 
 At some point in your coding career, you've probably heard something like:
 
diff --git a/_posts/2022-06-19-relearning-to-learn.md b/_posts/2022-06-19-relearning-to-learn.md
@@ -4,7 +4,6 @@ title: "Relearning to Learn"
 date: 2022-06-19
 tags: [learning, learning-to-learn]
 ---
-## Relearning to Learn
 
 Many years ago, I took a test. It was the first step of our
 "Learning to Learn" class. After answering a series of multiple
diff --git a/_posts/2022-06-22-perfect-isnt-good-enough.md b/_posts/2022-06-22-perfect-isnt-good-enough.md
@@ -4,7 +4,6 @@ title: "Perfect isn't Good Enough"
 date: 2022-06-22
 tags: [perfect, perfection, good-enough, laziness]
 ---
-## Perfect isn't Good Enough
 
 > Perfect is the enemy of the good
 
diff --git a/_posts/2022-07-07-the-continuous-delivery-test.md b/_posts/2022-07-07-the-continuous-delivery-test.md
@@ -4,7 +4,6 @@ title: "The Continuous Delivery Test"
 date: 2022-07-07
 tags: [joel-test, devops, continuous-delivery]
 ---
-## The Continuous Delivery Test
 
 In 2000, Joel Spolsky published a piece on what he believed were the
 key factors that separated high-performing teams from the rest, in a post titled
diff --git a/_posts/2022-07-29-put-ticket-ids-in-your-commit-messages.md b/_posts/2022-07-29-put-ticket-ids-in-your-commit-messages.md
@@ -4,7 +4,6 @@ title: "Put Ticket IDs in your Commit Messages"
 date: 2022-07-29
 tags: [compliance, devops, continuous-delivery]
 ---
-## Put Ticket IDs in your Commit Messages
 
 In my previous post [The Continuous Delivery Test](https://sourceless.org/posts/the-continuous-delivery-test.html)
 I included a point:
diff --git a/_posts/2022-08-16-make-your-own-free-password-manager.md b/_posts/2022-08-16-make-your-own-free-password-manager.md
@@ -4,7 +4,6 @@ title: "Make your own (free) password manager"
 date: 2022-08-16
 tags: [passwords, security, selfhost]
 ---
-## Make your own (free) password manager
 
 > Before I say anything else, it should be noted that this solution requires
 > a little bit of background knowledge to set up and use. At the very least
diff --git a/_posts/2023-07-17-pifs-1-functions.md b/_posts/2023-07-17-pifs-1-functions.md
@@ -4,7 +4,6 @@ title: "Programming in Functional Style: Functions"
 date: 2023-07-17
 tags: [pifs, functional programming]
 ---
-## Programming in Functional Style: Functions
 
 If you've been programming for more than a couple of years, you've probably
 heard of functional programming. You might even have picked up a functional
diff --git a/_posts/2026-03-30-the-phoenix-reborn.md b/_posts/2026-03-30-the-phoenix-reborn.md
@@ -4,7 +4,6 @@ title: "The Phoenix Reborn"
 date: 2026-03-30
 tags: [ai, llms, claude, phoenix project]
 ---
-## The Phoenix Reborn
 
 If you haven't read "The Phoenix Project" yet, this is your sign from the universe
 telling you that it's time. Go on, this post will still be here when you get back.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2,6 +2,9 @@ body {
     height: 100vh;
     background: #323F4B;
     color: #CBD2D9;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
 }
 
 a {
@@ -11,6 +14,13 @@ a {
 code {
     background: #1F2933;
     color: #E4E7DB;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 1.1em;
+}
+
+nav {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 1.2em;
 }
 
 #content {
@@ -20,6 +30,18 @@ code {
     margin: 10em auto;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+h1 {
+    font-size: 2.2em;
+}
+
+h2 {
+    font-size: 1.6em;
+}
+
 h2, h3, h4, h5, h6 {
     margin-top: 3em;
 }
@@ -40,3 +62,55 @@ blockquote {
     padding-left: 1.5em;
     margin-left: 2em;
 }
+
+.skip-link {
+    position: absolute;
+    left: -9999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.skip-link:focus {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    padding: 0.5em 1em;
+    background: #1F2933;
+    color: #F5F7FA;
+    z-index: 100;
+}
+
+main {
+    margin-top: 2em;
+}
+
+main > h2:first-child {
+    margin-top: 0;
+}
+
+.post-meta {
+    margin-top: 2em;
+}
+
+.post-nav {
+    margin-top: 1em;
+}
+
+.post-list {
+    list-style: none;
+    padding-left: 0;
+    margin-top: 2em;
+}
+
+.post-list li {
+    margin-bottom: 0.25em;
+}
+
+.post-date {
+    font-family: 'IBM Plex Mono', monospace;
+    margin-right: 1em;
+}
