I immediately loved the design of the paged.js website when I first saw it a couple of years ago.1 I have published a few books before, so the crop marks on the website caught my attention first, which gave me a familiar feel of printed books. The second thing that I appreciated was the rotated floral heart bullet behind the title of each page, i.e.,
So I wrote a Hugo theme that mimics the style of the paged.js website. I tried not to look at its HTML/CSS source code, but I had to read the source to figure out:
- How the crop marks were made with CSS (a very clever trick that I’d never thought of);
- What the floral heart symbol really was (I’d never know this dingbat);
- The fonts (Linden Hill and Jost).
The rest of HTML and CSS code was written from scratch (well, not really—from the Hugo XMin theme). The code is fairly lightweight and hopefully easy for users to understand, tweak, or adapt.
I’d like to thank paged.js developers for their great piece of work, without which I wouldn’t be able to create this theme.
I hope this theme won’t be widely known or used because I’m currently using it for my own website…2 but I’m all for open source, so here you go! If you decide to use this theme, I encourage you to tweak the CSS to make your site look at least a little different.
When I was developing the pagedown package in R. ↩︎
Paged.js developers are more generous than me. They were quite happy to know that I created this Hugo theme, and were not concerned that other websites would use their website theme. Hat tip to them! ↩︎