diff --git a/index.html.tmpl b/index.html.tmpl
index 8053e9e..aca1b3f 100644
--- a/index.html.tmpl
+++ b/index.html.tmpl
@@ -24,9 +24,11 @@
Contact
mail@cfebs.com
PGP
- EAAEC3829CF42B878877D14295352A65EB0C27A9
+ EAAEC3829CF42B878877D14295352A65EB0C27A9
Bluesky
@cfebs
+ RSS
+ index.xml
diff --git a/posts/style_a_blog.md b/posts/style_a_blog.md
index 3263d3c..55d1af9 100644
--- a/posts/style_a_blog.md
+++ b/posts/style_a_blog.md
@@ -1,9 +1,9 @@
Title: Style-a-blog
Date: 2025-02-16T14:46:36-04:00
---
-Originally when writing the blog, I just copied some styles from a [blog][1] and [site][2] that I liked, but now it's time to actually apply a fresh coat of paint.
+Originally when writing the blog, I just grabbed an existing stylesheet from a [blog][1] and [site][2] that I liked. It worked great, but it contains a lot of things I don't need.
-My goal is nothing flashy, just making the text and layout of the blog really easy to read.
+I want to achieve a similar design with the minimal amount of CSS possible. I want it to be semantic, minimal, fast ... basically - Boring with a capital B.
In the same spirit of "build-a-blog", I will start from scratch and write and take notes as I go.
@@ -19,9 +19,9 @@ All the nice features are right there and well supported making a preprocessor o
A few tools that will make this a bit easier:
A static file server with sane defaults for local dev and static pages:
-Basically just a golang `http.FileServer` that uses `Cache-Control: "no-cache, no-store"`
+Basically just a golang `http.FileServer` that uses `Cache-Control: "no-cache, no-store"` by default.
-And something to run our build when files change that I call `~/bin/make-watch`
+And something to run our build when files change. In the spirit of homebrewing boring stuff - I made `~/bin/make-watch`
```bash
#!/usr/bin/env bash
@@ -48,13 +48,17 @@ inotifywait -r -m -e modify -e create -e delete "$dir" --format "%e" | while rea
done
```
-Lets go!
+`inotifywait` spits out lines of events when files change based on the options you want - here it's just modify, create, delete events in the directory.
+
+The [`$SECONDS`][https://man.archlinux.org/man/bash.1.en#SECONDS] logic just ensures that `make` does not run N times if N files change in a fraction of a second.
+
+Now lets go!
## From scratch
Firstly I want to make sure this looks decent across many browsers. So that means considering a normalize or CSS reset.
-https://github.com/necolas/normalize.css is probably the gold standard of this still to this day. So lets just minify it and dump it at the head of our `style.css` file
+ is probably the gold standard of this still to this day. So lets just minify it and dump it at the head of our `style.css` file
```
❯ curl -sL 'https://necolas.github.io/normalize.css/latest/normalize.css' -o /tmp/normalize.css
@@ -71,13 +75,13 @@ Now to pick some colors starting with dark mode as it's my system preference.
}
```
-This alone actually will make the background dark based on your browser's defaults which is perfect.
+This alone gives you a pretty decent base for a dark mode in most browsers.

At this point I might consider just leaving the colors up to the browser! Why not, the main goal here is just readability.
-As you can see from the screenshot, the normalize is kind of working. But we need to settle on font and size.
+As you can see from the screenshot, the normalize is working pretty well. But we need to settle on font and size.
```css
html {
@@ -103,6 +107,8 @@ Now to some layout stuff. I just want a simple narrow main content column which
```
+And just a bit of media query stuff to make it look nice on mobile.
+
```css
main {
width: 600px;
@@ -121,20 +127,30 @@ main {
}
```
-Believe it or not, this is basically all you need. Normalize and browser defaults take care of the rest.
+Believe it or not, this is about all you need for a readable web page.
-## Tweaks
+## Tweaks and extras
A few more things that I want to differ from browser defaults.
-* Remove underline from header links.
+* Remove underline from header links in the markdown rendered output.
* `` monospaced font is a bit large by default.
* Inline `` tags get a little padding to separate them while reading.
+* Use [`highlight.js`][https://highlightjs.org/] and a theme [chalk][https://github.com/highlightjs/highlight.js/blob/main/src/styles/base16/chalk.css]
+* A few horizontal lines wow!
## Conclusion
There is nothing that profound here. But if the goal is simplicity and readability, browser defaults and simple HTML semantics take you _very_ far.
+And now I can say something like "the browser and importantly _the user_ should decide how they want to view their text". In reality I'm just a bit lazy.
+
+See also:
+
+*
+*
+*
+
[1]: https://drewdevault.com/
[2]: https://sr.ht/
[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties