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. ![base styles test](/img/style_a_blog_1.png) 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