2020-07-13
Pbb has experienced a few upgrades recently.
The most visible change is a custom theme for code block syntax highlighting; it now uses Solarized Dark, my preferred colour theme for pretty much everything. I’ve found a useful guide to skylighting JSON themes, and after lots of trial and error to see which token type was what, I’ve arrived at a result I’m happy with.
Halfway through, I realized that the KDE syntax highlighting project already does contain a Solarized Dark theme, but it includes a few Kate specific settings that I don’t need for pandoc, and it uses a few colours differently from what I want—so I didn’t mind having created my own.
The biggest challenge was to get the CSS for the background of line numbers right; something like
pre > code.sourceCode > span > a:first-child::before {
line-height: 1.6em;
}
pre > code.sourceCode > span:first-child > a:first-child::before {
margin-top: -9px;
padding-top: 9px;
}
pre > code.sourceCode > span:last-child > a:first-child::before {
margin-bottom: -9px;
padding-bottom: 9px;
}
finally did the trick. Notice that when this scrolls horizontally, there is still an issue with extra padding at the end of each line. This is self-illustrating, but here’s a picture in case the styling ever changes:
The theme file is in the pbb repo on GitHub.
Links now behave differently on focus, hover and when active: there is a drop shadow, which becomes increasingly less blurry and moves around a little.
The colours are also taken from the Solarized palette. (Just like
inline code
, by the way.)
Figure captions are now different from normal text, and figures got a little border:
Table captions got the same treatment:
The index page got a new look with bigger post titles and styled datestamps:
And the datestamp on each post as well:
This uses a Feather icon for the calendar.
This is more of a behind-the-scenes change: there is now support for Dependabot to update Actions workflows (see blog post and help page), which I have enabled. Not because I have super complex workflows, more to see how it works.