Styling Hugo

Categories: tech

So I spent a bit of time yesterday experimenting with moving to Hugo. My blog and site has organically grown since 2000, including the build system. This means it is a hodgepodge of various tools, build systems, etc. which worked well enough to build on my primary servers for a while. (Unlike my attempt XML + XSLT :-D ) This fell apart when I moved towards containerized builds, needing to track down every dependency. I eventually resolved all the tools however considering I am really only publishing static content this was all overkill and fine tools like Hugo have worked for a while.

Styling

Eventually I will converge on a single style for this blog “Stream of Consciousness”, the “Knowledge Base”, and my primary site. Not sure if creating a new theme is the correct approach however here I am. Named r3 in case any references leaked in. Most of my career has been working with straight CSS, so no need for things like Bootstrap.

The following snippet in themes/r3/layouts/partials/head.html included the CSS file at themes/r3/layouts/static/css/base.css

<link href="/css/base.css" rel="stylesheet"/>

Styling Structure

Generally I start off by resetting basic page structure like the following:

html, body {
    min-width: 100vw;
    min-height: 100vh;
    padding:0;
    margin:0;
}

Now everything should exist on the left hand margin. Let us put some negative space in there to make it easier for the human eye to read. For styling the basic page structure can be thought of like the following.

<html>
    <body>
        <header></header>
        <main></main>
    </body>
</html>

Experience tells me header and main should have the offsets applied directly. Ensuring padding + margin are always consistent will allow additional flexibility on elements consuming the entire page. Accomplished by teh following.

header, article {
    padding-left: 4.1vw;
    padding-right: 8.3vw;
}