[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

_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;">
+<div style="text-align: center;font-family: Geist Mono;font-size:12px;">
-<span class="growshrink">Be nice to each other!</span><br>
+<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 tracking his progress</span></h1>
+<span style="font-size: 24px;"><a href="/">andrewconl.in</a></span> <span style="color: #A89984;font-size:12px">is CSSing</span><br>
-<div>
+<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>
-    <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>
+<br>
-</div>
 <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,10 +1,9 @@
 ---
 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>
+<span style="font-size: 16px;"><a href="/">~</a> / <a href="/{{page.category}}">{{page.category}}</a> / <a href="">{{page.title}}</a><br></span>
-	<br>
+	<span style="font-family: Geist Mono;font-size:16px;">
-	<span style="font-family: Geist Mono;">
+	{{ page.date | date: "%Y-%m-%d" }}<br>
-    {{ page.date | date: "%Y-%m-%d" }}<br>
     {{ content | reading_time | pluralize: "minute" }}
 	</span>
 <hr>

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>
+{% include pageTitle.html %}
-<ul style="list-style-type:none;margin:0;padding:0;">
+{% include categoryList.html %}
-  {% 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>

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-bottom: 2px solid #FABD2F;
-	border-radius: 2px;
+	border-radius: 1px;
 }
 
 a:hover {
 	color: #000000;
 	background: #FABD2F;
 	text-decoration: none;
-	border-bottom: 3px solid #FABD2F;
+	border-bottom: 2px solid #FABD2F;
-	border-radius: 2px;
+	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>
+{% include pageTitle.html %}
-<ul style="list-style-type:none;margin:0;padding:0;">
+{% include categoryList.html %}
-  {% 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>

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>
+Git forge: <a href="https://git.cnln.dev/explore/repos">git.cnln.dev</a><br>
-GitHub: <a href="https://github.com/andrwcnln">@andrwcnln</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,9 @@
 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>

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;">
+{% include pageTitle.html %}
-    {% for post in site.posts %}
+{% include categoryList.html %}
-    {% 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>