Improve on profile

bs-config.cjs

@@ -1,10 +0,0 @@
-module.exports = {
-	port: 3000,
-	server: "./dist",
-	files: "./dist/**/*",
-	watchOptions: {
-		usePolling: true,
-		interval: 200,
-		binaryInterval: 200
-	}
-}

package.json

@@ -6,9 +6,9 @@
   "main": "index.js",
   "scripts": {
     "dev": "concurrently --kill-others -n Build,Serve -c auto \"npm run watch-build\" \"npm run serve\"",
-    "watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch templates --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
+    "watch-build": "nodemon --ext js,ts,json,md,html --watch notes --watch src --watch packages/@zblog/toolchain/src --watch markdown.ts --exec \"npm run build --workspaces && npm run build && npm run generate-blog\"",
     "build": "tsc -p tsconfig.json",
-    "serve": "browser-sync start --config bs-config.cjs",
+    "serve": "serve dist",
     "generate-blog": "node bin/index.js",
     "initialize-firebase": "npm install -g firebase-tools && firebase login",
     "deploy": "npm run generate-blog && firebase deploy"
@@ -20,9 +20,9 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^20.11.5",
-    "browser-sync": "^3.0.4",
     "concurrently": "^8.2.1",
     "nodemon": "^3.0.1",
+    "serve": "^14.2.1",
     "typescript": "^5.3.3"
   }
-}
+}

packages/@zblog/toolchain/src/file-loader.ts

@@ -19,24 +19,23 @@ export class FileLoader implements IPluginBuilder {
       const { menuManifest } = builderContext;
       const { files } = this.options;
       files.forEach((file) => {
-        const filePath = file.path.split("/").pop() ?? file.path;
-        const fileName = file.nameOverride ?? filePath;
+        const fileName =
+          file.nameOverride ?? file.path.split("/").pop() ?? file.path;
         const isImage = fileName.match(/\.(png|jpe?g|gif|webp)$/);
         if (isImage) {
           console.log("Processing image", file.path);
           ffmpeg(file.path)
-            .output(`${builderContext.outputDirectory}/${filePath}`)
+            .output(`${builderContext.outputDirectory}/${fileName}`)
             .size(`${this.options.imageWidth ?? 200}x?`)
             .run();
         } else {
-          const destination = `${builderContext.outputDirectory}/${filePath}`;
-          console.log("Copying file", file.path, "to", destination);
-          copyFile(file.path, destination);
+          console.log("Copying file", file.path);
+          copyFile(file.path, `${builderContext.outputDirectory}/${fileName}`);
         }
         if (file.menuEntry) {
           menuManifest.push({
             name: fileName,
-            link: filePath,
+            link: file.path,
           });
         }
       });

packages/@zblog/toolchain/src/markdown-loader.ts

@@ -44,9 +44,9 @@ const createMarkdownLoaderManifest = ({
       publicAssetDirectoryPath: `/${noteDirectory}_`,
       assetFiles: fs.existsSync(assetDirectoryPath)
         ? fs.readdirSync(assetDirectoryPath).map((name) => ({
-          path: `${assetDirectoryPath}/${name}`,
-          name,
-        }))
+            path: `${assetDirectoryPath}/${name}`,
+            name,
+          }))
         : [],
     };
   });
@@ -85,12 +85,10 @@ const writeMarkdownAsHtmlToOutputDirectory = (
 ) => {
   markdownManifest.forEach((m) => {
     const markdownAsHtml = toHtml(m.markdown, m.publicAssetDirectoryPath);
-    const titleWithoutDashesOrNumbers = (m.name.slice(m.name.indexOf('-') + 1) ?? "").replaceAll('-', ' ');
     const noteHtmlDocument = noteHtmlTemplate.replace(
       markdownHtmlReplacementTag,
       markdownAsHtml
-
-    ).replace("{{title}}", titleWithoutDashesOrNumbers);
+    );
     writeTextAsFile(
       `${outputDirectory}/${m.directoryName}.html`,
       noteHtmlDocument

packages/@zblog/toolchain/src/markdown-parser.ts

@@ -304,10 +304,9 @@ class Link extends Symbol {
   /**
    * @type {RegExp}
    */
-  static textAndLinkRegExp: RegExp = new RegExp
-    (
-      /\[(?<text>[^\]]+)\]\((?<link>[^)]+)\)/
-    );
+  static textAndLinkRegExp: RegExp = new RegExp(
+    /\[(?<text>.*)\]\((?<link>.*)\)/
+  );
   /**
    * @type {string}
    */
@@ -351,8 +350,7 @@ class Link extends Symbol {
   }
 
   render() {
-    // TODO: This leading space should probably be somewhere else.
-    return ` <a href="${this.link}">${this.text}</a>`;
+    return `<a href="${this.link}">${this.text}</a>`;
   }
 }
 
@@ -901,7 +899,7 @@ export const toHtml = (markdown: string, assetDirectory: string): string => {
     // .filter((s) => !(s instanceof JustALineBreak))
     .map((s) => s.render())
     .join("");
-  return `<div class="content">${html}</div>`;
+  return `<div>${html}</div>`;
 };
 
 /**

packages/@zblog/toolchain/src/start-page-plugin.ts

@@ -23,7 +23,6 @@ export class StartPagePlugin implements IPluginBuilder {
         ${links.join("")}
       `;
       htmlTemplate = htmlTemplate.replace("{{content}}", html);
-      console.log("Generating index", this.options.indexTemplatePath);
       writeTextAsFile(
         `${builderContext.outputDirectory}/index.html`,
         htmlTemplate

src/assets/base.css

@@ -1,53 +0,0 @@
-:root {
-	--color-background: #1c1b28;
-	--color-accent: #00FFFF;
-	--color-text: #FFF;
-
-	--content-width: 800px;
-
-	--font-size-base: 18px;
-	--line-height-base: 26px;
-	--font-family: monospace;
-
-	--space-base: 1rem;
-}
-
-.banner {
-	margin-top: 1rem;
-	width: 100%;
-	height: 40px;
-	display: flex;
-	flex-direction: row;
-	margin-bottom: 1rem;
-	align-items: center;
-	flex: 1;
-	font-family: monospace;
-}
-
-.banner {
-	.title {
-		display: flex;
-		flex-direction: row;
-		flex: 1;
-
-		.name {
-			color: #1c1b28;
-			background-color: #00FFFF;
-			white-space: nowrap;
-			padding: 5px;
-
-			a {
-				color: unset;
-				text-decoration: none;
-			}
-		}
-	}
-
-	.title::after {
-		background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-		content: "";
-		display: block;
-		width: 100%;
-		margin-left: 10px;
-	}
-}

src/index.ts

@@ -24,6 +24,7 @@ new ToolchainBuilder(paths)
       files: [
         {
           path: "src/templates/404.html",
+          nameOverride: "Not Found Page",
           menuEntry: false,
         },
         {
@@ -31,13 +32,6 @@ new ToolchainBuilder(paths)
         },
         {
           path: "src/assets/favicon.ico",
-        },
-        {
-          path: "src/assets/base.css"
-        },
-        {
-          path: "src/playground/playground.html",
-          nameOverride: "CSS/HTML playground"
         }
       ],
     }),

src/notes/1-initial-commit/note.md

@@ -1,6 +1,6 @@
 # Initial commit
 
-_2023-09-15 - 1 minute read_
+_2023-09-15_
 
 I've been thinking a long time about having a place to publicly publish things. I'm not really into doing that on social media since it would lock my content in their format and make it hard to move anywhere else so i thought i would just write my "things" in plain markdown and then find a way of hosting them online.
 

src/notes/2-markdown-parser/note.md

@@ -1,16 +1,16 @@
 # Markdown parser
 
-_2023-09-16 - 5 minute read_
-
 ## Part 1
 
+_2023-09-16_
+
 While traveling today i thought about ways to structure my markdown parser.
 
 What I want is a function that takes a string containing markdown formatted text and outputs a string of html elements.
 
 My plan is to solve this using a markdown line feed and symbol classes representing the different possible elements.
-These symbols are for example headings, list items, code snippets, paragraphs and links. 
-Each symbol will know how to render itself as well as being able to tell if it's the right symbol for the current feed line.
+These symbols are for example headings, list items, code snippets, paragraphs and links.
+Each symbol will know how to render itself as well as being able to tell if it's the right symbol for the current line feed line.
 
 Lets say we have a markdown file that looks something like this:
 

src/notes/3-tunneling-traffic-through-ssh/note.md

@@ -1,7 +1,5 @@
 # Tunneling traffic through ssh
 
-_2024-12-23 - 1 minute read_
-
 This lets you tunnel port 80 from your machine, to port 80 on another machine, using some ssh server as jump node.
 
 ```bash

src/notes/4-converting-document-formats/note.md

@@ -1,7 +1,5 @@
 # Converting various document formats
 
-_2025-01-10 - 1 minute read_
-
 I was in need of a way to convert markdown documents + images into pdfs and came over the [pandoc](https://pandoc.org/) project which seems to be very powerful.
 
 This is how i used it.

src/notes/5-measuring-mash-temperatures/note.md

@@ -1,4 +1,4 @@
-# Measuring mash temperatures
+# Measuring mash temperatures 🍺 🌡️
 
 _2025-02-03 - 5 minute read_
 
@@ -13,7 +13,7 @@ Esphome made the setup very easy. After defining the onewire hub component i cou
 
 ![nodemcu](@asset/3.png)
 
-My esphome instance is running in my local homeassistant (HASS) instance which integrates neatly and makes all sensors available to both systems. I created a new view in HASS and added the sensors showing the current values as well as a histogram of the last 5 minutes thinking that it should be a reasonable timespan to have when comparing temperatures. To my suprise the 5 minute interval in HASS didn't show 5 minutes at all but rather 24h. It was possible to zoom in on the graph to see it in more detail but i wasn't happy with how it turned out. Ideally I wanted this view to be visible on one of my screens in my brewery and it should show what I want to see without me having to interact with it.
+My esphome instance is running in my local homeassistant (HASS) instance which integrates neatly and makes all sensors available to both systems. I created a new view in HASS and added the sensors showing the current values as well as a histogram of the last 5 minutes thinking that is should be a reasonable timespan to have when comparing temperatures. To my suprise the 5 minute interval in HASS didn't show 5 minutes at all but rather 24h. It was possible to zoom in on the graph to see it in more detail but i wasn't happy with how it turned out. Ideally I wanted this view to be visible on one of my screens in my brewery and it should show what I want to see without me having to interact with it.
 
 ![nodemcu](@asset/4.png)
 
@@ -27,7 +27,7 @@ We usually brew two batches the same day since it allows us to do utilize the ti
 
 ![mash](@asset/mash.png)
 
-We did the first batch as usual, heating up the water to 67c before dumping in the malt pipe along with our 5KG grain bill of mostly pilsner malt and some wheat. Historically we have been going off of the built-in temperature sensor in the bottom of our brewzilla brewsystem, but one of its flaws is that the sensor is located right above the two heating elements which means that it is going to measure the warmest water in the pot. This works for turning the heater on and off while recirculating using a pump while the brewery has no equipment or ingredients in it, but as soon as you add anything it is no longer going do represent the temperature of the whole vessel. We put the first sensor below the malt pipe right above the false bottom of the brewery, then we put the second one in the middle of grains.
+We did the first batch as usual, heating up the water to 67c before dumping in the malt pipe along with our 5KG grain bill of mostly pilsner malt and some wheat. Historically we have been going off of the bult in temperature sensor in the bottom of our brewzilla brewsystem, but one of its flaws is that the sensor is located right above the two heating elements which means that it is going to measure the warmest water in the pot. This works for turning the heater on and off while recirculating using a pump while the brewery has no equipment or ingredients in it, but as soon as you add anything it is no longer going do represent the temperature of the whole vessel. We put the first sensor below the malt pipe right above the false bottom of the brewery, then we put the second one in the middle of grains.
 
 ![Picture of first batch mash temperature graph](@asset/first-batch-mash-graph.png)
 _Yellow: temperature of the grain bed. Green: temperature just below the malt pipe._
@@ -46,12 +46,4 @@ For the next batch we heated up the strike water to 75c. After adding the malt p
 
 Now we just had to maintain that temperature, something that we have done before with great success by setting the heaters to 67c and starting to pump.
 
-![Picture of second mash histogram](@asset/second-batch-mash-histogram.png)
-
-By the end of the brew day the last batch measured 1.050 so suprisingly we ended up 4 points below the last batch that was identical recipe-wise. That could of course be due to multiple factors. We use pre-milled grain so depending on if we use the malt from the top or the bottom of the bucket there might be more or less grain flour. Or perhaps the mash is just more efficient at a bit lower temperature. However from what I've read the most efficient mashing range is between 65-67 degrees celcius so I'm a bit confused.
-
-I think we need to brew some more beers using this method and see if we if it increases our result to recipe accuracy.
-
-In the end the only thing that matters is that we brew good tasting beer and i don't think this process will change much when it comes to that. It's just feels good to hit the target!
-
-Cheers!
+![Picure of second mash histogram](@asset/second-batch-mash-histogram.png)

src/notes/6-you-would-not-download-a-theme/note.md

@@ -1,13 +0,0 @@
-# You would not download a theme
-
-_2025-09-19 - 1 minute read_
-
-I read this [blog](https://www.jmaguire.tech/) by a guy called John Maguire. It popped up when i was searching for how to configure [code folding in neovim](https://www.jmaguire.tech/posts/treesitter_folding/) and i thought the style was pretty neat!
-
-I thought the least i could do was to provide some credits and a link to the place.
-
-Both the header and the blog post list double dot underlining was done with ::after elements, which i thought was quite nifty. The header uses a repeating linear gradient of the accent color and transparent, never used that before.
-
-You learn every day!
-
-Also, I just noticed that my blog engine cannot manage file names with single quotes in them, whoopsie.

src/notes/7-second-hand-MTB-part-1/note.md

@@ -1,23 +0,0 @@
-# Second hand MTB - part 1
-
-_2025-08-17 - 2 minute read_
-
-![bike-in-car](@asset/bike-in-car.jpg)
-_Tadaa!_
-
-I have wanted a hardtail for a while. I've been browsing the shops from time to time but never been ready to pull the trigger on buying a second full price bike. Some weeks ago my mother made a great local find on facebook marketplace. It was a modern 11-speed carbon fiber hardtail with SRAM x01 components and it got me determined to find one myself.
-
-My musts were:
-- Correct frame size (XL), duh.
-- 1x drivetrain or being able to convert to 1x easily.
-- No obvious signs of complete neglect such as rust horizontal rule broken components.
-
-I want to keep this bike simple. My focus is for it to just work and be as close to a workhorse as it can be when it comes to mountain biking. That means no extra linkages, suspension or dropper-post to service. When my FS-bike needs fixing or I just want to hit the trail for some stupid fun it should be there ready to go.
-
-So I found the bike I in the picture. After some detective work I found out that it probably is a 2012 KHS. Carbon fiber frame, SRAM x01 2x10 drivetrain, and best of all the guy would throw in some of the stuff that he had for the bike, one of those things was a 1x drive gear. That means that I will be able to convert it into a 1x10 drivetrain with very little effort. It looked pretty good. The top tube has been professionally repaired 5 years ago but I figured that if it had survived for this long it will probably work for me as well. I also got 3 more wheels that need some work and a longer steering bar.
-
-I got to ride it a bit before deciding on the purchase and it did not creek or make any other strange sounds. The drivetrain shifted well and the suspension seemed responsive. Of course things could use a little cleaning and service but a lot of bikes do. I was pretty stoked that i found a carbon fiber bike for a good price.
-
-I know that I probably want to change out the front drive gear pretty soon but first I just want to try it out on the trail to see how it performs without any changes.
-
-Cheerio!

src/notes/8-live-demos-and-experiments/note.md

@@ -1,17 +0,0 @@
-# Live demos and experiments
-
-I recently attended a Swedish frontend development conference called nordicjs. Something that I noticed was that some of the speakers had made tools and demos that they were using live in their keynotes which I thought was pretty neat! 
-
-It got me thinking about being able to host tools like that along with my [static site generator](https://git.zacke.dev/wholteza/blog). As long as they're not too heavy and dependent on JS libraries.
-
-My SSG project is built up around a plugin chain where one of the plugins available is a [file loader](https://git.zacke.dev/wholteza/blog/src/branch/main/packages/@zblog/toolchain/src/file-loader.ts). So to start off i just added a new directory for what I call playgrounds and added a new HTML file into the [files array of the plugin](https://git.zacke.dev/wholteza/blog/src/commit/52089dd9dc163ddbf1dbbc56af31e39bb7a0254f/src/index.ts) which makes sure that it is available in the built site.
-
-The result? The very first [playground](/playground.html) of this site. It's a very simple HTML + CSS playground with a preview pane that will show you the result. To start off it shows the CSS logotype, but change any parameter and it will update immediately. [Source BTW](https://git.zacke.dev/wholteza/blog/src/commit/52089dd9dc163ddbf1dbbc56af31e39bb7a0254f/src/playground/playground.html).
-
-This initial playground is meant to be part of something bigger. I have thoughts about building a presentation framework and I want these kinds of interactive and editable examples to be part of it. But we will see when I get the urge to build it.
-
-Until then I will have a way to make different demos and experiments available.
-
-Right now they will show up as menu alternatives on the home page. I also noticed that since files loaded by the file loader plugin wasn't designed to end up on the home page post flow they always end up at the top which isn't ideal. I'll have to do something about that in the future or just simply have a blog post that link to each playground. I probably want to write something about it anyways. _Edit: I updated the file loading so that is isn't present on the home page._
-
-Until next time.

src/notes/9-kubernetes-tips/note.md

@@ -1,18 +0,0 @@
-# Kubernetes tricks
-
-A collection of nice to haves while managing applications in kubernetes.
-
-## Kubectl proxy
-
-Running `kubectl proxy` will open a tunnel to the selected cluster. You can then access the webapi on the port that was displayed.
-
-Using that webapi you can browse the resources and even access the application hosted within your cluster.
-
-### Explore a namespace
-Enter the following address and replace the namespace name and the resource type (pods|services) to get a list of the available resources.
-`http://localhost:8001/api/v1/namespaces/<namespace-name>/<resource-type>`
-
-### Make a request to a service or pod
-The url pattern looks like this: `http://localhost:8001/api/v1/namespaces/<namespace-name>/<pods|services>/<protocol>:<name>:<port>/proxy/<url-path>`
-Example: `http://localhost:8001/api/v1/namespaces/hangfire-services/services/http:hangfire-services:80/proxy/hangfire` will make a request to my hangfire dashboard.
-

src/playground/playground.html

@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<meta>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>zacke.dev - playground</title>
-<link href="https://blog.zacke.dev" rel="preconnect" />
-<link href="base.css" rel="stylesheet" />
-<style>
-	html {
-		line-height: var(--line-height-base);
-		font-size: 18px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-family: var(--font-family);
-	}
-
-	body {
-		max-width: var(--content-width);
-		background-color: var(--color-background);
-		color: var(--color-text);
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		align-items: center;
-
-		#description {
-			box-sizing: border-box;
-			margin: var(--space-base);
-			padding: var(--space-base);
-
-			a {
-				color: var(--color-accent);
-			}
-		}
-
-		#style-editor {
-			width: 100%;
-			padding: 1rem;
-			margin-bottom: 1rem;
-			background-color: var(--color-background);
-			color: var(--color-text);
-			font-size: 18px;
-			display: flex;
-			flex: 1;
-			outline: none;
-			border: 1px solid var(--color-accent);
-			box-sizing: border-box;
-		}
-
-		#html-editor {
-			width: 100%;
-			padding: 1rem;
-			margin-bottom: 1rem;
-			background-color: var(--color-background);
-			color: var(--color-text);
-			font-size: 18px;
-			display: flex;
-			flex: 1;
-			outline: none;
-			border: 1px solid var(--color-accent);
-			box-sizing: border-box;
-		}
-
-		#preview {
-			width: 100%;
-			box-sizing: border-box;
-			padding: 1rem;
-			margin-bottom: 1rem;
-			background-color: var(--color-background);
-			color: var(--color-text);
-			font-size: 18px;
-			display: flex;
-			flex: 1;
-			outline: none;
-			border: 1px solid var(--color-accent);
-			justify-content: center;
-			align-items: center;
-		}
-	}
-</style>
-<style id="style">
-	.square {
-		height: 150px;
-		width: 150px;
-		background-color: #553FF3;
-		color: white;
-		font-weight: bold;
-		font-size: 3rem;
-		position: ;
-		border-radius: 30px;
-		border-top-left-radius: 5px;
-
-	}
-
-	span {
-		display: block;
-		position: relative;
-		top: 100px;
-		left: 45px;
-	}
-</style>
-<div id="markup" aria-hidden="true" hidden="true" style="display: none;">
-	<div class="square"><span>CSS</span></div>
-</div>
-<script type="text/javascript">
-	window.onload = function () {
-		const style = document.getElementById('style').innerHTML;
-		const formattedStyle = style.split("\n").reduce((agg, curr) => {
-			console.log(curr)
-			if (curr === "") return agg;
-			const line = curr.replace('\t', '').replaceAll('\t', '  ');
-			if (agg.length === 0) return line;
-			return agg + "\n" + line;;
-		}, "");
-		console.log(formattedStyle)
-		document.getElementById('style-editor').value = formattedStyle;
-		document.getElementById('style').innerHTML = formattedStyle;
-
-		const markup = document.getElementById('markup').innerHTML;
-		const formattedMarkup = markup.replace('\t', '').replaceAll('\t', '  ').split('\n').filter(line => line !== '').join('\n');
-		document.getElementById('html-editor').value = formattedMarkup;
-		document.getElementById('preview').innerHTML = formattedMarkup;
-	}
-</script>
-</meta>
-
-<body>
-	<div class="banner">
-		<div class="title">
-			<div class="name"><a href="/">Zackarias Montell</a></div>
-		</div>
-	</div>
-	<p id="description">This is an interactive HTML and CSS playground built with minimal JS. Alter the HTML and CSS below
-		to preview the changes. <a
-			href="https://git.zacke.dev/wholteza/blog/src/branch/main/src/playground/playground.html">Source here!</a></p>
-	<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
-		autocomplete="false" autocorrect="false" id="style-editor">
-	</textarea>
-	<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
-		oninput="document.getElementById('style').innerHTML = this.value">
-	</textarea>
-	<div id="preview"></div>
-</body>
-
-</html>

src/templates/404.html

@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Page Not Found</title>
-</head>
-
-<body>
-  <div id="message">
-    <h2>404</h2>
-    <h1>Page Not Found</h1>
-    <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-  </div>
-</body>
-
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+    </div>
+  </body>
 </html>

src/templates/index.html

@@ -4,12 +4,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>zacke.dev</title>
-  <link href="https://blog.zacke.dev" rel="preconnect" />
-  <link href="base.css" rel="stylesheet" />
+  <title>Document</title>
   <style>
     html {
-      font-size: 18px;
+      font-family: Arial, sans-serif;
+      font-size: 17px;
       line-height: 26px;
       display: flex;
       justify-content: center;
@@ -19,13 +18,13 @@
     }
 
     a {
-      color: var(--color-accent);
+      color: #FFF;
     }
 
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: var(--color-background);
+      background-color: #1c1b28;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -86,13 +85,46 @@
     }
 
     .profile li {}
+
+    .banner {
+      margin-top: 1rem;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 1rem;
+      align-items: center;
+      flex: 1;
+      font-family: monospace;
+    }
+
+    .banner .title {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+    }
+
+    .banner .title::after {
+      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+      content: "";
+      display: block;
+      width: 100%;
+      margin-left: 10px;
+    }
+
+    .banner .title .name {
+      color: #1c1b28;
+      background-color: #00FFFF;
+      white-space: nowrap;
+      padding: 5px;
+    }
   </style>
 </head>
 
 <body>
   <div class="banner">
     <div class="title">
-      <div class="name"><a href="/">Zackarias Montell</a></div>
+      <div class="name">Zackarias Montell</div>
     </div>
   </div>
   <div class="profile">
@@ -105,8 +137,7 @@
       <li>I build physical things as well. Lately it has been <a
           href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev2">keyboards</a> in multiple <a
           href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev1">revisions</a>.</li>
-      <li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures.html">I find the process interesting..</a> and
-        i
+      <li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures">I find the process interesting..</a> and i
         enjoy drinking beer.</li>
       <li>Running and biking. You can find me on <a href="https://www.strava.com/athletes/41297534">strava</a>.
       </li>
@@ -118,10 +149,6 @@
       for
       my first name.)</p>
 
-    <p>Live demos and experiments:</p>
-    <ul>
-      <li><a href="/playground.html">CSS + HTML Playground</a></li>
-    </ul>
 
   </div>
   <div class="content">

src/templates/note.html

@@ -1,108 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>zacke.dev - {{title}}</title>
-  <link href="https://blog.zacke.dev" rel="preconnect" />
-  <link href="base.css" rel="stylesheet" />
+  <title>Document</title>
   <style>
     html {
-      font-family: monospace;
-      font-size: 18px;
+      font-family: Arial, sans-serif;
+      font-size: 1.3em;
       display: flex;
       justify-content: center;
       align-items: center;
-      line-height: 26px;
       flex-direction: column;
     }
-
+    @media screen and (max-width: 800px) {
+      html {
+        font-size: 0.9em;
+      } 
+    }
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: #1c1b28;
+      background-color: #1c1b22;
       display: flex;
       flex-direction: column;
       align-items: center;
-      flex: 1;
     }
-
-    pre {
-      box-sizing: border-box;
-      border: 1px solid #00FFFF;
-      padding: 1rem;
-      width: fit-content;
-      max-width: 100%;
-      white-space: normal;
-    }
-
     img {
       max-width: 100%;
-      border-radius: 4px;
+      border-radius: 8px;
     }
-
-    p {
+    p{
+      margin: 20px;
       margin-top: 20px;
       margin-bottom: 0px;
     }
-
-    h1 {
-      color: #00FFFF;
-    }
-
-    h1::after {
-      margin-top: 1rem;
-      content: "";
-      width: 100%;
-      display: block;
-      border-top: 3px dotted #00FFFF;
-      border-bottom: 3px dotted #00FFFF;
-      height: 8px;
-      box-sizing: border-box;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: 20px;
+    h1, h2, h3, h4, h5, h6 {
+      margin: 20px;
       margin-bottom: 0px;
       text-transform: capitalize;
-      line-height: 32px;
     }
-
-    h1+p:has(> i) {
-      margin-top: 1rem;
-      color: #00FFFF;
+    h1 + p:has(> i) {
+      font-size: smaller;
+      margin-top: 10px;
     }
-
-    p:has(> img)+p:has(> i) {
+    p:has(> img) + p:has(> i) {
       font-size: smaller;
       margin-top: 0px;
     }
-
-    a {
-      color: #00FFFF;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
   </style>
 </head>
-
 <body>
-  <div class="banner">
-    <div class="title">
-      <div class="name"><a href="/">Zackarias Montell</a></div>
-    </div>
-  </div>
   {{markdown}}
 </body>
-
-</html>
+</html>