Styling

Plain HTML pages have a certain charm. However, styled pages just look better.

Accessibility

The first thing to fix is the site’s accessibility. On the lighthouse report, I saw that my successive list items were too close together. The simplest way I could think to fix that was to add some margins to my list items. In particular, I added:

li:not(li:last-child) {
	margin-bottom: 1em;
}

This seemed to do the trick, according to lighthouse.

Layout

The next thing is that giant walls of text are a pain to read; it’s much nicer to have columns which are bounded in their width by at most ~80 characters.

Now, the classical way to handle this is to use divs as “containers”/wrappers with utility classes. However, I don’t like that approach because it interferes with the separation of responsibilities since you’re using HTML code to handle styling logic–which is CSS’s job.

So, instead, I use some fancy tricks together with:

main {
	display: grid;
}

to set column widths to a reasonable width.

This allows me to make certain elements break out of the normal (column) flow by adding the appropriate class attributes to the corresponding HTML elements.

Styling in Markdown

As I mentioned in my initial blog post, I use Hugo to generate HTML from markdown. As a result, I don’t really have access to the raw HTML at time when I’m writing my content. So, now that my CSS nicely styles elements according to their classes, I need a way to add classes of my HTML elements straight from the markdown. The way to make this possible is by editing the hugo.toml file to contain:

[markup.goldmark.parser.attribute]
block = true

Alternatively, if you like yaml or json more, you could either one of those to configure Hugo.

Now, for instance, the markdown:

Quidem est ipsam aut. Occaecati et
dolorem consequatur voluptatem.
Voluptatem veritatis omnis sint
esse quisquam voluptatem occaecati
quia. Sint fuga dolores dolor.Rerum
commodi doloremque similique
voluptas est qui. Consequuntur
voluptatum dolor veritatis suscipit
ut in inventore possimus.
Praesentium dolore odio velit magni
unde dolorum eligendi. Ipsam fuga
dolores eum quis ratione nostrum
minima distinctio. Totam in libero
quasi iusto est aut optio et. Vitae
ut voluptatem ut culpa voluptatum.
Rerum perferendis doloremque hic
officiis quam vel. Quis est
praesentium consectetur et. Non
quia aliquam corrupti molestiae
rerum reiciendis vel explicabo.
Dolor modi reprehenderit quia unde
et et est odit. Et possimus et
quis qui.
{.breakout .bg-accent}

will by translated by Hugo to the follwoing HTML:

<p class="breakout bg-accent">
Quidem est ipsam aut. Occaecati et
dolorem consequatur voluptatem.
Voluptatem veritatis omnis sint
esse quisquam voluptatem occaecati
quia. Sint fuga dolores dolor.Rerum
commodi doloremque similique
voluptas est qui. Consequuntur
voluptatum dolor veritatis suscipit
ut in inventore possimus.
Praesentium dolore odio velit magni
unde dolorum eligendi. Ipsam fuga
dolores eum quis ratione nostrum
minima distinctio. Totam in libero
quasi iusto est aut optio et. Vitae
ut voluptatem ut culpa voluptatum.
Rerum perferendis doloremque hic
officiis quam vel. Quis est
praesentium consectetur et. Non
quia aliquam corrupti molestiae
rerum reiciendis vel explicabo.
Dolor modi reprehenderit quia unde
et et est odit. Et possimus et
quis qui.
</p>

which will render the following paragraph on your webpage:

Quidem est ipsam aut. Occaecati et dolorem consequatur voluptatem. Voluptatem veritatis omnis sint esse quisquam voluptatem occaecati quia. Sint fuga dolores dolor.Rerum commodi doloremque similique voluptas est qui. Consequuntur voluptatum dolor veritatis suscipit ut in inventore possimus. Praesentium dolore odio velit magni unde dolorum eligendi. Ipsam fuga dolores eum quis ratione nostrum minima distinctio. Totam in libero quasi iusto est aut optio et. Vitae ut voluptatem ut culpa voluptatum.Rerum perferendis doloremque hic officiis quam vel. Quis est praesentium consectetur et. Non quia aliquam corrupti molestiae rerum reiciendis vel explicabo. Dolor modi reprehenderit quia unde et et est odit. Et possimus et quis qui.

etc.

That way, I can control my content straight from the markdown file. (Or, later, Emacs org-mode.)

Colors

So long as colors have a reasonable contrast ratio and don’t hurt your eyes too much, adding a bit of color to a site is a cheap and effective way to make it more visually interesting. In particular, I sometimes use a blue accent color.

Dark Mode

My site respects user-defined color-theme preferences at the browser-level. In particular, if the browser is set to respect user-defined color-theme preferences at the OS level, that choice will be preserved.

However, if the user has not set a preference, then my site uses dark-mode. That’s because I prefer dark-mode, and I think people should give it a try; if you don’t like it, then you might want to set your preferences to light-mode. (In the future, I will add a switch to toggle between light-mode and dark-mode.)

Link Colors

In dark mode, like the green-on-black color scheme from The Matrix. So, I made hyperlinks green in most cases. I achieved that with the straight-forward:

a {
	color: #0f0;
}

I keep the green links in light-mode as well. The reason for this is for contrast with the blue accent color.

Nav Bar

My nav bar has special colors. I achieve this with the linear-gradient() function in css.

For instance, this code:

p {
	color: black;
	background: linear-gradient(to bottom, red, white, blue);
}

will have this effect on paragraph elements.