Fixed header issue

assets/main.scss

@@ -8,14 +8,15 @@ body {
 
 header {
   max-width:960px;
-  width: 100%;
   margin: 10px auto;
-  padding: 0px 10px 15px 10px;
+  padding-bottom: 15px;
+  width: 100%;
   border-bottom: 1px solid rgb(245,245,245);
   .main{
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    padding: 0px 10px 0px 10px;
     a.avatar {
       display: inline-block;
       margin-right: 10px;
@@ -47,6 +48,7 @@ header {
           padding: 4px;
           border-radius: 5px;
           background: linen;
+          color: rgba(0,0,0,0.75);
           display: inline-block;
           transition: background 0.2s;
           &:hover{
@@ -57,6 +59,7 @@ header {
     }
   }
   nav{
+    padding: 0px 10px 0px 10px;
     display: flex;
     a{
       margin-right: 15px;
@@ -299,10 +302,16 @@ table {
       padding: 4px;
       margin-right: 15px;
       border-radius: 5px;
-      background-color: linen;
+      background-color: azure;
+      color:rgba(0,0,0,0.6);
       text-decoration: none;
     }
   }
+  .header-image {
+    display: block;
+    max-width: 90%;
+    margin: 20px auto;
+  }
   .note-details {
     text-align: left;
   }
@@ -316,6 +325,7 @@ table {
     padding-top: 20px;
     border-top: 1px solid rgb(230,230,230);
     font-size: large;
+    margin-bottom: 100px;
     >*:not(.highlight) {
       display: block;
       max-width: 500px;

content/blog/2021-02-10-ssh-jumping-bastion-hosts.md

@@ -3,6 +3,8 @@ date: "2021-02-10T22:11:00Z"
 title: "SSH Jumping and Bastion Hosts"
 description: "Working with secure network architectures with bastion hosts and SSH jumping."
 tags: [100daystooffload, technology, security]
+image: header-ssh-jumping-bastion-hosts.png
+imageDescription: AI generated pixel art of astronauts and cats jumping over computers.
 slug: ssh-jumping-bastion-hosts
 ---
 

content/blog/2021-02-24-google-photos-pcloud.md

@@ -3,6 +3,8 @@ date: "2021-02-24T13:46:00Z"
 title: "Migrating from Google Photos: Nextcloud, Piwigo, Mega, and pCloud"
 description: "My experiences with trying to move away from Google Photos."
 tags: [100daystooffload, technology, opinion]
+image: header-google-photos-pcloud.png
+imageDescription: AI generated pixel art representing photo apps on smartphones.
 slug: google-photos-pcloud
 ---
 

content/blog/2021-02-28-flask-serverless.md

@@ -3,6 +3,8 @@ date: "2021-02-28T22:05:00Z"
 title: "Making your Python Flask app serverless"
 description: "How you can deploy your existing Flask app on a scalable serverless architecture."
 tags: [100daystooffload, technology, python]
+image: header-flask-serverless.png
+imageDescription: Pythons, flasks, and laptops!
 slug: flask-serverless
 ---
 

content/blog/2021-03-22-host-matrix.md

@@ -3,6 +3,8 @@ date: "2021-03-22T11:50:00Z"
 title: "Running your own Matrix homeserver"
 description: "A rough guide on how to run your own Matrix homeserver."
 tags: [100daystooffload, technology, selfhost]
+image: header-host-matrix.png
+imageDescription: AI artwork of a home server.
 slug: host-matrix
 ---
 

content/blog/2021-08-21-react-theming.md

@@ -3,6 +3,8 @@ date: "2021-08-21T13:05:00Z"
 title: "Adding 'dark mode' and dynamic theming to your React websites"
 description: "How to add custom theming to React and GatsbyJS websites."
 tags: [100daystooffload, technology, javascript, react]
+image: header-react-theming.png
+imageDescription: AI generated artwork representation of website theming.
 slug: react-theming
 ---
 

content/blog/2021-08-28-stripping-exif.md

@@ -3,6 +3,8 @@ date: "2021-08-28T16:46:00Z"
 title: "Stripping sensitive EXIF data from uploaded images"
 description: "How to use Python to remove sensitive metadata from images uploaded by your users."
 tags: [100daystooffload, technology, python]
+image: header-stripping-exif.png
+imageHeader: AI-generated images of cameras in sunset themes. 
 slug: stripping-exif
 ---
 

content/blog/2022-06-12-ipad-coding.md

@@ -3,6 +3,8 @@ date: "2022-06-12T11:42:00Z"
 title: "My setup for coding on iPad"
 description: "How I set up a development environment for coding on my iPad."
 tags: [technology, selfhost, development]
+image: header-ipad-coding.png
+imageDescription: AI representation of coding on iPads.
 slug: ipad-coding
 ---
 

content/blog/2022-07-20-workout-switchup.md

@@ -3,6 +3,8 @@ date: "2022-07-20T19:56:00Z"
 title: "Switching-up my workouts 🏋️‍♀️"
 description: "How I've improved my physical and mental wellbeing through workouts."
 tags: [life]
+image: "header-gym.png"
+imageDescription: "An AI generated anime-style image of a guy in a gym."
 slug: workout-switchup
 ---
 

content/blog/2022-07-30-mtd-plain-text-accounting.md

@@ -3,6 +3,8 @@ date: "2022-07-30T22:25:00Z"
 title: "Making Tax Digital and Plain-Text Accounting"
 description: "Some thoughts on how Making Tax Digital could impact the use of FOSS accounting methods."
 tags: [opinion, technology, finance]
+image: header-digital-tax.png
+imageDescription: Artwork representation of digital tax, money and computers.
 slug: mtd-plain-text-accounting
 ---
 

content/blog/2022-09-03-hugo.md

@@ -2,6 +2,8 @@
 date: "2022-09-03T15:52:00Z"
 title: "Re-Building my Website with Hugo"
 description: "Why and how I migrated from Gatsby to Hugo for my personal site, and what some of the side-effect benefits were."
+image: header-website-rewrite.png
+imageDescription: Pixel art of people coding.
 tags: [technology, javascript]
 ---
 

content/blog/2022-10-02-joplin.md

@@ -3,6 +3,8 @@ date: "2022-10-02T19:55:00Z"
 title: "Note-taking apps: Bear and Joplin"
 description: "Why I switched from Bear to Joplin for my digital notes."
 tags: [technology, selfhost]
+image: header-note-taking.png
+imageDescription: AI representation of people taking notes.
 slug: bear-joplin
 ---
 

content/blog/2022-10-27-tailscale-virtualhosts.md

@@ -3,6 +3,8 @@ date: "2022-10-27T18:48:00Z"
 title: "Tailscale: multi-service HTTPS on a single machine"
 description: "How I enable TLS via Tailscale for securing multiple services on a single machine in my tailnet."
 tags: [technology, selfhost]
+image: header-secure-network.png
+imageDescription: "AI generated artwork representing secure network connections."
 slug: tailscale-virtualhosts
 ---
 

content/blog/2022-11-25-photoprism.md

@@ -3,6 +3,8 @@ date: "2022-11-25T19:35:00Z"
 title: "From Google and Apple Photos to Photoprism"
 description: "About the photo services I've used in the past, and why and how I started self-hosting with Photoprism."
 tags: [technology, selfhost]
+image: header-photos-apps.png
+imageDescription: "AI generated pixel art of apps on a phone homescreen."
 slug: photoprism
 ---
 

content/blog/2022-12-10-macos-windows.md

@@ -3,6 +3,8 @@ date: "2022-12-10T15:40:00Z"
 title: "Window management workflows on macOS"
 description: "Switching to using window-hiding as part of my usual macOS workflow."
 tags: [technology]
+image: header-mac-windows.png
+imageDescription: "AI generated image of windows on a macOS system."
 slug: macos-windows
 ---
 

content/blog/2023-03-05-self-host-encryption.md

@@ -3,6 +3,8 @@ date: "2023-03-05T09:25:00Z"
 title: "A question about encryption for self-hosting"
 description: "A question on best practice relating to the encryption of locally-running service data."
 tags: [technology, selfhost]
+image: "header-server-theft.png"
+imageDescription: "An AI generated image of someone stealing a server."
 slug: self-host-encryption
 ---
 

layouts/blog/single.html

@@ -18,6 +18,10 @@
       <p><a href="/tags/100daystooffload">View other posts in this series.</a></p>
     </div>
   {{ end }}
+  
+  {{ if .Params.image }}
+    <img class="header-image" src="/media/blog/{{.Params.image}}" alt="{{.Params.imageDescription}}"/>
+  {{ end }}
 
   <article>
     {{ .Content }}