Main event
Today was somewhat of a bust in terms of making progress. I fell back into the trap of endless hugo theme tweaks. In the progress I learned a bit about the complexity of responsive web design.
Given the issues with the Lithium theme and styling things like code blocks and quotes I sought out a new theme. Since the Gitlab Pages demo used the Beautiful Hugo theme I thought I would give it a try. Getting it installed and up and running was straightforward but there where a few things I was interested in tweaking, mostly to simply the theme.
- Only wanted post titles on the homepage, not summaries.
- Didn't want a header image.
- Didn't want an animated navbar
- Wanted the
navbarto not be fixed.
After some false starts I realized this was going to be more involved than I expected and I should make incremental changes and commit the progress, rather than attempting it all in one shot. Good lesson learned.
From here it it was relatively straight forward to overload the
layouts/_default/list.html file in order to modify the homepage (1). Similarly
the removal of the “avatar” was possible in layouts/partials/nav.html (2,3).
But the final part is where I got stuck.
When I attempted to make the top navbar static instead of fixed it works
great in desktop mode but when I check in mobile using chrome developer tools,
the collapse does not properly push the text down, or have a background on all
pages. Most frustratingly it does seem to inexplicably work on some pages.
After many attempts I'm throwing in the towel on this subject for the day but I did learn.
Bonus
One cool thing I did learn in the process was that you can stack [Font Awesome][fa] icons like so:
<a href="{{ "" | absLangURL }}" title="Home">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span>
</a>
This places the Home icon over a circle background. Pretty neat. [fa]:http://fontawesome.io/