[2025-04-25] Multiple design improvements

- Font size and scaling better for different displays
- Added 88x31 buttons in footer
- Other minor changes to CSS and layouts

_config.yml

@@ -11,7 +11,7 @@ baseurl: "/"
 url: "https://andrewconl.in"
 
 author: Andrew Conlin
-version: v25.3.PU0306
+version: v25.4.U0414
     
 defaults:
   # blog

_includes/categoryList.html

@@ -0,0 +1,11 @@
+<ul style="list-style-type:none;margin:0;padding:0;font-size:16px;">
+  {% for post in site.posts %}
+  {% assign category = post.category %}
+  {% if category == page.title %}
+    <li>
+		<p><span style="font-family: Geist Mono">{{ post.date | date: "%Y-%m-%d" }} / </span><a href="{{ post.url }}">{{ post.title }}</a></p>
+    </li>
+  {% endif %}
+  {% endfor %}
+</ul>
+<hr>

_includes/defaultFooter.html

@@ -1,8 +1,16 @@
 <br>
-<div style="text-align: center;font-family: Geist Mono;font-size:small;">
-<span class="growshrink">Be nice to each other!</span><br>
+<div style="text-align: center;font-family: Geist Mono;font-size:12px;">
+<span class="growshrink">Be nice to each other!</span><br><br>
+<img style="display:inline-block;" src="/assets/images/88x31/apache-powered.gif">
+<img style="display:inline-block;" src="/assets/images/88x31/bestviewedcomp.gif">
+<img style="display:inline-block;" src="/assets/images/88x31/debian.gif">
+<img style="display:inline-block;" src="/assets/images/88x31/firefox3.gif">
+<img style="display:inline-block;" src="/assets/images/88x31/internetprivacy.gif">
+<img style="display:inline-block;" src="/assets/images/88x31/neovim.gif">
+<br><br>
+Last updated: {{ site.time }}<br>
+<a href="https://git.andrewconl.in/andrew/site/src/tag/{{ site.version }}/">{{ site.version }}</a><br>
+<br>
 © {{ site.author }} 2023-2025<br>
 All rights reverse engineered<br>
-Last updated: {{ site.time }}<br>
-<a href="https://git.andrewconl.in/andrew/site/src/tag/{{ site.version }}/">{{ site.version }}</a>
 </div>

_includes/header.html

@@ -1,5 +1,4 @@
-<h1><a href="/">andrewconl.in</a> <span style="color: #A89984;font-size:medium">is tinkering</span></h1>
-<div>
-    <p style="font-size: x-large;"><a href="/blog">blog</a>&nbsp;&nbsp;&nbsp;<a href="/til">til</a>&nbsp;&nbsp;&nbsp;<a href="/projects">projects</a>&nbsp;&nbsp;&nbsp;<a href="/meta">meta</a>&nbsp;&nbsp;&nbsp;<a href="/feed.xml">feed</a>&nbsp;&nbsp;&nbsp;<a href="/archive">[archive]</a></p>
-</div>
+<span style="font-size: 24px;"><a href="/">andrewconl.in</a></span> <span style="color: #A89984;font-size:12px">is CSSing</span><br>
+<span style="font-size: 16px;word-spacing: 5px"><a href="/blog">blog</a> <a href="/til">til</a> <a href="/projects">projects</a> <a href="/meta">meta</a> <a href="/feed.xml">feed</a> <a href="/archive">[archive]</a></span>
+<br>
 <hr>

_includes/pageTitle.html

@@ -0,0 +1 @@
+<span style="font-size: 16px;"><a href="/">~</a> / <a href="">{{page.title}}</a><br></span>

_layouts/post.html

@@ -1,9 +1,8 @@
 ---
 layout: default
 ---
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="/{{page.category}}">{{page.category}}</a> > <a href="">{{page.title}}</a><br></span>
-	<br>
-	<span style="font-family: Geist Mono;">
+<span style="font-size: 16px;"><a href="/">~</a> / <a href="/{{page.category}}">{{page.category}}</a> / <a href="">{{page.title}}</a><br></span>
+	<span style="font-family: Geist Mono;font-size:16px;">
 	{{ page.date | date: "%Y-%m-%d" }}<br>
     {{ content | reading_time | pluralize: "minute" }}
 	</span>

_posts/blog/2024-02-28-microzig-display-driver.md

@@ -4,7 +4,7 @@ category: blog
 title: Writing an OLED display driver in MicroZig
 ---
 
-**Update 2025-03-06** / There is now an SDD1306 driver available in the [official MicroZig repository](https://github.com/ZigEmbeddedGroup/microzig/blob/main/drivers/display/ssd1306.zig).
+**Update 2025-03-06** / There is now an SSD1306 driver available in the [official MicroZig repository](https://github.com/ZigEmbeddedGroup/microzig/blob/main/drivers/display/ssd1306.zig).
 
 # # Beginnings
 Recently, I have been messing around with a Rapsberry Pi Pico. Initially, I started out with MicroPython, as this is what most of the documentation for working with the Pico uses. However, this was honestly a little boring, as I seem to end up doing every project in Python. I wanted something a little more engaging for my brain, a little *spicier*. It's Friday afternoon!
@@ -17,7 +17,7 @@ This project is great. It is still in the early-ish stages, with full support on
 
 This is exactly what I needed, so I jumped right in. Following along with the [Raspberry Pi examples](https://github.com/ZigEmbeddedGroup/microzig/tree/main/examples/raspberrypi-rp2040), I quickly had some working code for flashing some LEDs. Cool!
 
-At this point, I remembered about a small OLED screen that I had, perfect for exactly this kind of tinkering. Time to get to work on on driving this bad boy. As is always the first step with hardware, I went off on a datasheet hunt. It took me an embarassingly long time to find, but I eventually figured out that I was the proud owner of an [SDD1306 OLED screen](https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf). (This is the datasheet for the 128x64 version, but I have the 128x32).
+At this point, I remembered about a small OLED screen that I had, perfect for exactly this kind of tinkering. Time to get to work on on driving this bad boy. As is always the first step with hardware, I went off on a datasheet hunt. It took me an embarassingly long time to find, but I eventually figured out that I was the proud owner of an [SSD1306 OLED screen](https://cdn-shop.adafruit.com/datasheets/SSD1306.pdf). (This is the datasheet for the 128x64 version, but I have the 128x32).
 
 Now, as datasheets go, this is pretty good. We have all of the available commands, and instructions for how to write to the display RAM (for showing stuff on the screen). But how do we send these commands? This is also in the datasheet: [I2C](https://en.wikipedia.org/wiki/I%C2%B2C). There is a brief explanation in there about what the device is expecting, but I needed to do some more digging, as this is my first time dabbling directly in I2C communication.
 
@@ -53,7 +53,7 @@ pub fn send(bytes: []const u8) !void {
 }
 ```
 
-The SDD1306, stood firm, resolutely denying me even a single pixel. There is no feedback for any of this, except a single flashing LED to let me know my code is running. I am shooting from the hip (and missing).
+The SSD1306, stood firm, resolutely denying me even a single pixel. There is no feedback for any of this, except a single flashing LED to let me know my code is running. I am shooting from the hip (and missing).
 
 It was at this point that I became really impressed with Zig's compilation, and in particular the caching. As part of this process, I was messing around a lot with my code, and then building and loading onto the Pico with the following command:
 

archive.html

@@ -3,15 +3,5 @@ layout: default
 title: archive
 ---
 
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="">[{{page.title}}]</a><br></span>
-<ul style="list-style-type:none;margin:0;padding:0;">
-  {% for post in site.posts %}
-  {% assign category = post.category %}
-  {% if category == 'archive' %}
-    <li>
-		<p><span style="font-family: Geist Mono">{{ post.date | date: "%Y-%m-%d" }} / </span><a href="{{ post.url }}">{{ post.title }}</a></p>
-    </li>
-  {% endif %}
-  {% endfor %}
-</ul>
-<hr>
+{% include pageTitle.html %}
+{% include categoryList.html %}

assets/css/default.css

@@ -22,6 +22,7 @@ code {
 
 div.container {
     margin: 0 auto;
+	zoom: 1.5;
 }
 
 div.content {
@@ -38,6 +39,10 @@ div.content {
         margin: 0 auto;
         position: relative;
     }
+	div.container {
+    	margin: 0 auto;
+		zoom: 1.4
+	}
 }
 
 @media screen and (max-width: 1080px) {
@@ -47,6 +52,10 @@ div.content {
         margin: 0 auto;
         position: relative;
     }
+	div.container {
+    	margin: 0 auto;
+		zoom: 1.2
+	}
 }
 
 @media screen and (max-width: 768px) {
@@ -56,6 +65,10 @@ div.content {
         margin: 0 auto;
         position: relative;
     }
+	div.container {
+    	margin: 0 auto;
+		zoom: 1.0
+	}
 }
 
 body {
@@ -75,16 +88,16 @@ pre {
 a {
 	color: #E7D7AD;
 	text-decoration: none;
-	border-bottom: 3px solid #FABD2F;
-	border-radius: 2px;
+	border-bottom: 2px solid #FABD2F;
+	border-radius: 1px;
 }
 
 a:hover {
 	color: #000000;
 	background: #FABD2F;
 	text-decoration: none;
-	border-bottom: 3px solid #FABD2F;
-	border-radius: 2px;
+	border-bottom: 2px solid #FABD2F;
+	border-radius: 1px;
 }
 
 img {
@@ -118,3 +131,11 @@ span.growshrink {
     color: #FABD2F;
   }
 }
+
+p {
+	font-size: 14px
+}
+
+h1 {
+	font-size: 24px
+}

blog.html

@@ -4,15 +4,5 @@ title: blog
 backlink: false
 ---
 
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="">{{page.title}}</a><br></span>
-<ul style="list-style-type:none;margin:0;padding:0;">
-  {% for post in site.posts %}
-  {% assign category = post.category %}
-  {% if category == 'blog' %}
-    <li>
-		<p><span style="font-family: Geist Mono">{{ post.date | date: "%Y-%m-%d" }} / </span><a href="{{ post.url }}">{{ post.title }}</a></p>
-    </li>
-  {% endif %}
-  {% endfor %}
-</ul>
-<hr>
+{% include pageTitle.html %}
+{% include categoryList.html %}

index.html

@@ -6,7 +6,6 @@ permalink: /
 <span style="color: #A89984;"><i>“Man is said to be a reasoning animal. I do not know why he has not been defined as an affective or feeling animal. Perhaps that which differentiates him from other animals is feeling rather than reason. More often I have seen a cat reason than laugh or weep. Perhaps it weeps or laughs inwardly — but then perhaps, also inwardly, the crab resolves equations of the second degree.”</i></span><br>
 <span style="float: right;"><b>― Miguel de Unamuno, Tragic Sense of Life</b></span><br><br>
 Email: <a href="mailto:andrew@andrewconl.in">andrew@andrewconl.in</a><br>
-Mastodon: <a rel="me" href="https://mastodon.scot/@andrwcnln">andrwcnln@mastodon.scot</a><br>
-GitHub: <a href="https://github.com/andrwcnln">@andrwcnln</a><br>
+Git forge: <a href="https://git.cnln.dev/explore/repos">git.cnln.dev</a><br>
 RSS: <a href="/feed.xml">/feed.xml</a><br>
 <hr>

meta.html

@@ -3,8 +3,9 @@ layout: default
 title: meta
 ---
 
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="">{{page.title}}</a><br></span>
+{% include pageTitle.html %}
 <p>Both the Sans Serif and Monospace fonts used on this site are <a href="https://vercel.com/font">Geist, by Vercel</a>.</p>
 <p>Background colour is #000000, text colour is #E7D7AD, accent colour is #FABD2F.</p>
 <p>The site is built using Jekyll. Source is available <a href="https://git.andrewconl.in/andrew/site">here</a>.</p>
+<p>The 88x31 buttons in the footer were sourced from <a href="https://cyber.dabamos.de/88x31/">here</a>.</p>
 <hr>

projects.html

@@ -2,8 +2,10 @@
 layout: default
 title: projects
 ---
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="">{{page.title}}</a><br></span>
-<ul style="list-style-type:none;margin:0;padding:0;">
+
+{% include pageTitle.html %}
+<ul style="list-style-type:none;margin:0;padding:0;font-size:16px;">
 	<p><span style="font-family:Geist Mono"><a href="https://pypi.org/project/tictoc">tictoc</a> / </span>Fast, simple and accurate Python timing. Written in Rust.</p>
+	<p><span style="font-family:Geist Mono"><a href="https://year-progress.cnln.dev">year-progress</a> / </span>A fun side project which gives the progress through the year, relative to other things.</p>
 </ul>
 <hr>

til.html

@@ -3,15 +3,6 @@ layout: default
 title: til
 backlink: false
 ---
-<span style="font-size: x-large;"><a href="/">~</a> > <a href="">{{page.title}}</a><br></span>
-<ul style="list-style-type:none;margin:0;padding:0;">
-    {% for post in site.posts %}
-    {% assign category = post.category %}
-    {% if category == 'til' %}
-    <li>
-		<p><span style="font-family: Geist Mono">{{ post.date | date: "%Y-%m-%d" }} / </span><a href="{{ post.url }}">{{ post.title }}</a></p>
-    </li>
-    {% endif %}
-    {% endfor %}
-</ul>
-<hr>
+
+{% include pageTitle.html %}
+{% include categoryList.html %}