A couple CSS tweaks makes Zola's Hook theme easier on the eyes

19 August, 2025 - Categories: Zola - Tags: CSS

By Steven Rosenberg

I've had a few problems with the Hook theme in Zola. Some I fixed myself, even if they were eventually fixed by the theme writer/maintainer. It's all an opportunity to learn how Zola, the Tera template engine, and HTML/CSS work.

I chose this theme due to functionality and simplicity, but as the entries have built up, the layout of the home page and archive page is looking a little cramped.

To clear it up, I took away the text-decoration from the a, a:link, a:visited elements, added text-decoration to a:hover and added some padding to li.

Here are parts I changes in /themes/zola-hook/sass/_theme.scss:

a, a:link, a:visited {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-highlight);
    text-decoration: underline;
}

li {
    padding-bottom: 10px;
}