After listening to Podcast.__init__ Episode 20 on static site generators,
I decided to switch how this is run. I don’t really know why I picked
Nikola over Pelican, but something about this felt right. This site runs
on an Amazon EC2 instance, and used to be served by Apache. But after reading
the nginx chapter in The Architecture of Open Source Applications this week,
I realized nginx is totally awesome and I want to play around with it.
Editing the configuration of Nikola proved to be pretty easy and straight forward.
The CSS might still warrant some tweaking, but mostly all I did was remove author
information from the posts, since it will only just be me, and I didn’t like the
visual clutter. The title bothered me. Yes just the simple “Jesquik” up there. If
you resize the window, at certain widths the hamburger menu on the left initially
overlapped the Jesquik. At 48em the masthead title switches to being centered.
To get around the overlapping problem in the title, I bumped up the margin-left to
3em. I don’t love the indented title, but I have yet to figure out how to sort out
collisions with the hamburger menu in a css/template/html way. I do really like how
well the Lanyon them handles resizing. Coming from a background of writing html in
px and percentages, using em and rem now seems way more appealing and versatile.
Upcoming I still have to figure out how to handle images, the reStructedtext markup
for them seems straight forward enough, as does the actual linking to them. Where
to host the images though seems like a more nuanced issue, not from a practical
standpoint, but having to weigh the pros and cons of hosting them locally on this
instance or from an S3 bucket.
Learning how linear gradients work in css was a fascinating tangent. The hamburger
menu is done with a stack of linear gradients. This is the relevant line of css:
background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
I found that rather neat, more so than the code block specification in
reStructuredText. The white space seems so fiddily important, and the documentation
seems lacking of sufficient examples. Much like how the documentation on the links
only lists single word links (the wikipedia page shows multiple word link text
examples), and doesn’t show anything about escaping special characters in link text.
That’s why only the “Episode 20” above linked, rather than the whole “Podcast.__init__
Altogether, this was a nice evening project.