Style-a-blog

Originally when writing the blog, I just grabbed an existing stylesheet from a blog and site that I liked. It worked great, but it contains a lot of things I don't need.

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.

CSS in 2025 is really insane to look at compared to the early-mid 2010s where most of my experience lies.

All the nice features are right there and well supported making a preprocessor or polyfilling unnecessary.

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" by default.

And something to run our build when files change. In the spirit of homebrewing boring stuff - I made ~/bin/make-watch

last_run_seconds=0
grace_seconds=1
inotifywait -r -m --exclude "${dir}/.git\/" -e modify -e create -e delete "$dir" | while read -r event; do
    if [[ $last_run_seconds -eq 0 ]]; then
        make "$@"
        last_run_seconds="$SECONDS"
        continue;
    fi

    if [[ $SECONDS -ge $((last_run_seconds + grace_seconds)) ]]; then
        # reset last_run_seconds if enough time has elapsed
        last_run_seconds=0
    fi
done

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 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

❯ curl -sL 'https://necolas.github.io/normalize.css/latest/normalize.css' -o /tmp/normalize.css
❯ sass --no-source-map --style compressed /tmp/normalize.css /tmp/normalize.min.css
❯ cat /tmp/normalize.min.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

Now to pick some colors starting with dark mode as it's my system preference.

:root {
  color-scheme: light dark;
}

This alone gives you a pretty decent base for a dark mode in most browsers.

base styles test

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 working pretty well. But we need to settle on font and size.

html {
    font-size: 16px;
    font-family: sans-serif;
    line-height: 1.4;
}

Now to some layout stuff. I just want a simple narrow main content column which will be the <main> element. Basically this:

<main>
    <nav>
        <!-- global top nav -->
    </nav>
    <section class="content">
        <!-- where blog list/post will be rendered -->
    </section>
    <footer>
        <!-- global footer -->
    </footer>
</main>

And just a bit of media query stuff to make it look nice on mobile.

main {
    width: 600px;
    margin: 0 auto;
}

@media (width < 600px) {
    main {
        width: 100%;
        margin: auto;
    }

    section.content {
        padding: 0 1rem;
    }
}

Believe it or not, this is about all you need for a readable web page.

Tweaks and extras

A few more things that I want to differ from browser defaults.

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: