The first and most logical thing I have to talk about is this website. Bear with it if some things aren’t perfect; it’s still a work-in-progress, but I’ve waited until it at least got to a presentable point before publishing it.

If you’re on the latest Chrome or Firefox, these pages should already look mostly complete (the footer being the only thing in need of some polish). If you’re viewing the site on elinks, w3m, and probably other text-only web browsers, then the state of the site ought to be indistinguishable from complete.

If you find any problems with the site or have any questions about it, feel free to contact me ( jos at josaphat.co ).

This website is powered by hugo, the static website engine. Although the community around hugo has provided a wide collection of ready-made themes, I found every single one of them bloated with “modern” web design. Even the theme claiming that it leaves out everything “fancy” used poor markup and relied extensively on fetching a large style-sheet from some external website. The look and feel was minimalist, but seeing the code made it feel bloated. All of the other designs were too “modern”, with front-pages that include an enormous hero image and which force users to scroll for the tiniest bit of information.

hugo is great, but these themes…? Not so much.

So instead of going with any of those themes, I took the most minimalist theme I could find as inspiration (in this case nofancy) and actually removed all of the fancy. Thus far, I’m pleased with the results. The HTML/CSS I’ve written displays static text with a little bit of makeup. Without leaving the CSS out entirely, it doesn’t get more minimalist than that.

The generated source code is available, of course, using your browser. Once I’m satisfied that the look and feel of the site is complete, I will open a pull request to have it included in the hugo repository’s list of themes.

Go’s Template Library

Hugo leverages Go’s html template library to generate webpages. You can embed some logic in HTML code so that the engine can output variables into web pages for you.

Using a template is very simple. Template logic goes inside double curly braces {{ }} and you can do things like include if statements, and use pseudo-for-loops using go’s range keyword to generate lists of things like post tags. Interestingly, you can create and use “local” variables which are declared using $.

The code snippet at the bottom of the page includes examples of the template system in action. The variables are for the most part provided by hugo

Favicons

I’m not familiar with the format that favicons are supposed to be, and apparently there are a whole host of file formats that you need to create in order to accommodate as many platforms as possible. Interesting though it would have been to try and create the favicon myself, I decided to just defer to realfavicongenerator. The source image should be 260x260.

I don’t have any images that come to mind when I think of myself, so I just made my little icon J. in my favorite font, Source Code Pro.

Code of Note

The most difficult part about this was creating the header bar such that the name of the website was on the left, but a list of top-level pages displayed on the right. The most straightforward, float-free way that I found to accomplish this was on stackoverflow. It uses text-align: justify; to turn the navigation bar into a paragraph where the left-most and right-most blocks on a line are spread apart with whitespace so that the line is flush with both margins. This is the same effect you see in newsprint, which I have tried to recreate below.

You  may  notice  in  newsprint
that  spaces  are  inserted  in
the middle of lines to  get the
lines to be flush with both the
left   and   right  marg i n s.

The trick works by using blocks instead of words on a line (the line being the header bar). It then asks the renderer to justify the line, forcing the left block’s left edge to line up with the left margin and the right block’s right edge to line up with the right margin. I’m not sure that the results would be aesthetically appealing if three or more blocks of differing lengths were used instead. If it works with blocks the same as with text, then extra space won’t necessarily be distributed evenly.

In my case, the two blocks are the website title (contained in an anchor tag), and a list of links (the list of size one, but it’s still enclosed in <ul> tags). I won’t pretend to understand the intricacies of the CSS for this technique (I still have no idea why the ::after bit is necessary to make it work) so I’ll just present the snippet.

Here’s the HTML partial for the header bar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    <div class="navbar">
        {{ $baseurl := .Site.BaseURL }}
        <a href="/" class="site-title">{{ .Site.Title }}</a>
        <ul class="menu-list">
            {{ range $name, $page := .Site.Taxonomies.categories }}
            <li class="menu-item">
                <a href="{{ $baseurl }}categories/{{ $name | urlize }}" class="menu-link">
                    {{ $name | title }}
                </a>
            </li>
            {{ end }}
            <li class="menu-item">
                <a href="{{ $baseurl }}about/" class="menu-link">About</a>
            </li>
        </ul>
    </div>

And the CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    .navbar {
		text-align: justify;
        font-size: 22px;
        border-bottom: 1px solid #ccc;
        text-justify: distribute-all-lines;
    }
    .navbar:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 0;
        font-size: 0;
        line-height: 0;
    }
    .site-title {
        display: inline-block;
        font-size: 26px;
        font-color: #ddd;
        text-decoration: none;
    }
    .menu-list {
        display: inline-block;
        list-style: none;
        vertical-align: baseline;
        padding: 0;
        margin: 0;
    }
    .menu-item {
        display: inline;
    }