font restyle and new diy post

posts/creating-a-router-cabinet.md

@@ -2,7 +2,7 @@
 title: "Creating a router cabinet"
 slug: /creating-a-router-cabinet/
 date: 2025-10-05
-tags: ["personal", "projects", "diy"]
+tags: ["personal", "projects", "DIY"]
 ---
 
 As you can see below, my consumer networking was quite messy. I wanted to hide
@@ -51,5 +51,9 @@ my Philips Hue bridge and a Raspberry Pi 3 which I am running on the mesh
 network as a [Pihole](https://pi-hole.net/). The main router wouldn't sit nicely
 on the shelf so I just used a couple of wood screws to hold it in place.
 
-The total cost was £38.78 covering the price of the cabinet and a new
-surge-protected Masterplug extension lead.
+The total cost was £35.47.
+
+| Product                               | Cost  |
+| ------------------------------------- | ----- |
+| Wall Mounted Kitchen Storage Cabinet  | 26.67 |
+| Masterplug Four Socket Extension Lead | 8.80  |

posts/homeowner-at-last.md

@@ -2,7 +2,7 @@
 title: "Homeowner at last"
 slug: /homeowner-at-last/
 date: 2025-08-28
-tags: ["personal", "projects", "diy"]
+tags: ["personal", "projects"]
 ---
 
 After many years of saving and renting I am finally a homeowner! I bought a

posts/installing-a-solar-powered-security-light.md

@@ -0,0 +1,88 @@
+---
+title: "Installing a solar-powered security light"
+slug: /installing-a-security-light/
+date: 2025-11-16
+tags: ["projects", "DIY"]
+---
+
+![](./img/security-light-closeup.jpg)
+
+I recently installed a security light in the back garden. I wanted it to be
+"dumb" (not IoT-linked) and solar-powered with battery power as a fallback.
+
+The
+[Auraglow Hybrid](https://web.archive.org/web/20250826070058/https://www.diy.com/departments/auraglow-hybrid-solar-battery-twin-led-security-light-cyrus/5060539629306_BQ.prd)
+met these criteria and was very cheap.
+
+Normally, I would pay more for a higher quality device but the reviews were
+uniformly good and I wanted to see how plausible a solar-powered light would be
+in English winters, before shelling out any more.
+
+![](./img/product-image.png)
+
+I placed it above the garage side-door to illuminate the garden and the pathway
+to the garage from the Command Center.
+
+In order to maximise access to sunlight, I had to use the full-length of the
+solar panel cable (5m) to stretch it round from the back of the garage (which is
+south-facing) to the side door.
+
+The cable connecting the solar panel to the light is a 3.5mm TRS cable - the
+same as those used for earphones. It's very flimsy, like a pair of liquorice
+laces and once I had tacked it along the roof of the garage I started to worry
+about how well it would endure, longer-term. I think this is the only aspect of
+the light where you get what you pay for. The loose wire also looked a bit
+rubbish and the aesthetics of this grated on me.
+
+![Feeding the conduit](./img/security-light-feeding-cable-rotated.jpg)
+
+So, to improve its water-proofing and protect it from UV I bought some
+cylindrical black conduit from Screwfix. I don't think this is truly
+outdoors-grade but it's a lot better than than exposing the thin cable to the
+elements. As the diameter of the conduit is several times wider than the cable,
+it can be used for additional cabling down the line, should I need it.
+
+![Cable safely fed through the conduit](./img/security-light-finished.jpg)
+
+This left the cable loose at the terminals so I bought some flexible trunking to
+protect the cable at the joins. (This is also intended for indoor use so I'll
+have to see how well it lasts.) I joined the trunking to the conduit with
+self-amalgamating tape for a water-tight seal.
+
+![Close up of flexible trunking](./img/security-light-flexible-trunking.jpg)
+
+I'm happy with the appearance and think it looks quite professional.
+
+![Taping at the light 💅](./img/security-light-device-taping.jpg)
+
+![Taping at the solar panel 🥰](./img/security-light-panel-taping.jpg)
+
+As for the device itself, the performance is as good as the reviews suggested.
+The LED luminosity is very bright and the sensor is effective. (Perhaps a bit
+too effective since I've noticed it being triggered by spiders weaving webs
+around the light.) After a couple of days I removed the back-up batteries to see
+how well the solar panel was working. I waited two days before putting them
+back, and the light functioned exactly the same as it did on battery power
+throughout this period. (For the last few weeks, we have mostly had cloudy,
+rainy days with only occasional bursts of sunlight.)
+
+Other than the spiders, the only other main drawback is that it requires C-type
+batteries. As rechargable batteries of this type are hard to come by it meant I
+couldn't use a high-quality brand like Eneloop. I had to go for the least-worst
+Chinese-branded batteries I could find on Amazon if I wanted to use
+rechargables.
+
+Ideally I would want some visual indicator of the current capacity of the solar
+battery and the back-up batteries but for a device under £20 this is probably
+asking a bit too much.
+
+Mostly due to me over-engineering the cabling, the total cost of this project
+was £60.17.
+
+| Product                                                       | Cost  |
+| ------------------------------------------------------------- | ----- |
+| Auraglow Hybrid Solar & Battery Twin LED Security Light (B&Q) | 15.99 |
+| Round conduit and connectors (Screwfix)                       | 17.52 |
+| Flexible trunking (Amazon)                                    | 6.15  |
+| Self-amalgamating tape 10m (Amazon)                           | 6.52  |
+| EBL 5000mAh C-type recharageable batteries (Amazon)           | 13.99 |

src/components/EolasListing.tsx

@@ -10,13 +10,13 @@ const EolasEntries = ({ entries }) => {
       <ul>
         <li className="mb-4">
           <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
-            <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0">
+            <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
               {convertDate(entry.last_modified)}
             </span>
             <a
               href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
               key={i}
-              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
+              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
             >
               {entry.title.replace(/_/g, " ")}
             </a>
@@ -39,7 +39,7 @@ const EolasListing = () => {
       <div className="space-my-8">
         <section className="container">
           <h2 className="text-2xl font-medium mb-4 text-[#fabd2f]!">
-            Recent zettels
+            recent notes (external)
           </h2>
 
           {isLoading && <span>Loading...</span>}

src/containers/PostListing.tsx

@@ -8,18 +8,18 @@ const PostListing = ({ posts, title, showAllButton }) => {
     <div className="container mx-auto p-4 grow">
       <div className="space-my-8">
         <section className="container">
-          <h2 className="text-2xl font-medium mb-4">{title}</h2>
+          <h2 className="text-2xl font-semibold mb-4">{title}</h2>
           {posts.map((post) => (
             <ul>
               <li className="mb-4">
                 <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
-                  <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0">
+                  <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
                     {convertDate(post.date)}
                   </span>
                   <Link
                     to={`/posts/${post.slug}`}
                     key={post.slug}
-                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
+                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
                   >
                     {post.title}
                   </Link>

src/index.css

@@ -1,31 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
 @import "./styles/_variables.css";
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@font-face {
-  font-family: "iA Writer Quattro";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src:
-    url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2)
-      format("woff2"),
-    url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff)
-      format("woff");
-}
-
-@font-face {
-  font-family: "iA Writer Mono";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src:
-    url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)
-      format("woff2"),
-    url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)
-      format("woff");
-}
-
 * {
   outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
 }
@@ -39,14 +16,29 @@ body {
   color: var(--foreground);
 }
 
+.condensed {
+  font-family: "IBM Plex Sans Condensed";
+}
+
+figcaption {
+  font-weight: 500;
+  font-family: "IBM Plex Sans Condensed";
+}
+
 h1 {
   color: var(--color-orange-light);
+
+  font-family: "IBM Plex Sans Condensed";
 }
 
 h2 {
+  font-family: "IBM Plex Sans Condensed";
   color: var(--color-green-light);
 }
 
+h3 {
+  font-family: "IBM Plex Sans Condensed";
+}
 .monospaced-font {
   font-family: "iA Writer Mono";
 }

src/pages/home.tsx

@@ -17,12 +17,12 @@ const HomePage = () => {
                 <img src={gruvboxComputer} className="md:w-80 w-50" />
               </div>
               <div>
-                <h1 className="text-4xl font-bold py-3 monospaced-font text-center sm:text-left md:text-left">
-                  <div className="scanlined inline-block italic py-1 px-2">
+                <h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
+                  <div className="scanlined inline-block py-1 px-2">
                     systems obscure
                   </div>
                 </h1>
-                <p className="leading-relaxed text-center sm:text-left md:text-left">
+                <p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
                   Software engineer at ITV, formerly BBC. This is my technical
                   scrapbook and digital garden.
                 </p>
@@ -32,23 +32,23 @@ const HomePage = () => {
         </div>
       </div>
 
-      <PostListing title="Recent posts" posts={posts.slice(0, 5)} />
+      <PostListing title="recent posts" posts={posts.slice(0, 5)} />
 
       <PostListing
-        title="Highlights"
+        title="highlights"
         posts={posts.filter((post) => post.tags.includes("highlight"))}
       />
 
       <div className="container mx-auto p-4 grow">
         <div className="space-my-8">
           <section className="container">
-            <h2 className="text-2xl font-medium mb-4 text-[#fb4934]!">
-              Projects
+            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]!">
+              projects
             </h2>
             <ul>
               <li className="pb-2">
                 <a
-                  className="underline underline-offset-3 text-[18px] text-primary hover:text-primary/80"
+                  className="underline underline-offset-3 text-[18px] text-primary hover:text-primary/80 font-medium"
                   href="https://eolas.systemsobscure.net"
                   target="_blank"
                 >
@@ -56,7 +56,7 @@ const HomePage = () => {
                 </a>
               </li>
               <li>
-                <p className="text-muted">
+                <p className="">
                   A public frontend for my local Zettelkasten created with
                   NodeJS, Python and React.
                 </p>

src/styles/_variables.css

@@ -36,8 +36,8 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-	--font-monospaced: "iA Writer Mono";
-	--font-sansserif: "iA Writer Quattro", sans-serif;
+  --font-monospaced: "IBM Plex Mono";
+  --font-sansserif: "IBM Plex Sans", sans-serif;
 }
 
 @theme inline {

src/templates/BlogTemplate.tsx

@@ -17,11 +17,11 @@ const BlogTemplate = () => {
         ) : (
           <article className="prose prose-lg max-w-none">
             <header className="mb-6 pb-4">
-							<h1 className="text-4xl font-semibold mb-4 leading-tight">
+              <h1 className="text-4xl font-bold mb-4 leading-tight">
                 {post?.title}
               </h1>
-							<div className="flex flex-wrap align-center gap-4 text-[#928374]">
-								<time datetime={convertDate(post?.date)} className="text-sm ">
+              <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
+                <time datetime={convertDate(post?.date)} className="text-sm">
                   {convertDate(post?.date)}
                 </time>
                 <div className="flex flex-wrap gap-3 align-center">

src/templates/MainTemplate.tsx

@@ -12,7 +12,7 @@ const Header = () => {
 				<ul class="flex space-x-4 px-4 py-2">
 					<li class="flex flex-col items-center justify-center">
 						<Link
-              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
 							to="/"
 						>
 							home
@@ -21,7 +21,7 @@ const Header = () => {
 
 					<li class="flex flex-col items-center justify-center">
 						<Link
-              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
 							to="/posts"
 						>
 							posts
@@ -29,7 +29,7 @@ const Header = () => {
 					</li>
 					<li class="flex flex-col items-center justify-center">
 						<Link
-              class="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
 							to="/about"
 						>
 							about
@@ -48,7 +48,7 @@ const Footer = () => {
 				<ul className="flex flex-row justify-start gap-4">
 					<li className="flex flex-col items-center justify-center">
 						<a
-              className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
 							href="https://forgejo.systemsobscure.net/thomasabishop"
 							target="blank"
 						>
@@ -57,7 +57,7 @@ const Footer = () => {
 					</li>
 					<li className="">
 						<a
-              className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
 							href="https://fosstodon.org/@systemsobscure"
 							target="blank"
 						>
@@ -72,7 +72,7 @@ const Footer = () => {
 
 const MainTemplate = ({ children }) => {
 	return (
-    <div className="antialiased max-w-3xl mt-3 mx-auto text-[#fbf1c7] bg-[#282828] no-scanlines wrapper">
+		<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
 			<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
 				<Header />
 				<div>{children}</div>

src/templates/TagTemplate.tsx

@@ -13,7 +13,7 @@ const TagTemplate = () => {
 	return (
 		<MainTemplate>
 			<div className="container mx-auto p-4">
-				<h1 className="h1 text-3xl text-[#b8bb26]!">{`Posts tagged: #${tag}`}</h1>
+				<h1 className="h1 text-3xl text-[#b8bb26]! font-bold">{`Posts tagged: #${tag}`}</h1>
 			</div>
 			<PostListing title={null} posts={filteredPosts} />
 		</MainTemplate>