cfebs/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style post fixes
All checks were successful
/ build (push) Successful in 5s
Details

Browse source
This commit is contained in:
Collin Lefeber 2025-02-16 21:07:55 -05:00
parent 3dba287e99
commit e568fed923
2 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html.tmpl
View file

@ -24,9 +24,11 @@
<dt>Contact</dt>
<dd><a href="mailto:mail@cfebs.com">mail@cfebs.com</a></dd>
<dt>PGP</dt>
<dd><a href="https://gitlab.com/cfebs.gpg"><code>EAAEC3829CF42B878877D14295352A65EB0C27A9</code></a></dd>
<dd><a href="https://codeberg.org/cfebs.gpg"><code>EAAEC3829CF42B878877D14295352A65EB0C27A9</code></a></dd>
<dt>Bluesky</dt>
<dd><a rel="me" href="https://bsky.app/profile/cfebs.com">@cfebs</a></dd>
<dt>RSS</dt>
<dd><a href="/index.xml">index.xml</a></dd>
</dl>
</footer>
</main>

38
posts/style_a_blog.md
View file

@ -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: <https://codeberg.org/cfebs/srv>
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
<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
```
❯ 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
</main>
```
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.
* `<pre>` monospaced font is a bit large by default.
* Inline `<code>` 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:
* <https://motherfuckingwebsite.com>
* <http://bettermotherfuckingwebsite.com>
* <https://thebestmotherfucking.website>
[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