The main idea here is to mimic an annotated article done with LaTeX0. I reused several open source components:
- LaTeX.css: the main style of this theme
- Rough Notation: this library is providing all the annotations: underline, highlight, circle, etc.
- Littlefoot: A library to provide nice footnotes
- Scampi: I only used the skip-links module of this library.
Moreover, I wanted to have a more personal touch, so I created my own font based on my not so beautiful handwriting (I am a lefty, eh.) To do so, I used Calligraphr, combined with Procreate on an iPad with an Apple Pencil. The result is not 100% accurate, since the font is still missing lots of ligatures, but I find it good enough for the effort. What do you think?
I mapped some annotations provided by Rough Notation to html5 elements, for example:
marks(strikethrough)strong-
blockquotefor long quotes with lost of stuff to say, not like here for example.
I wanted to be able to annotate articles with some side notes1. These notes are okay on desktop when there is space in the side margins, but on mobile we don’t have this space. I discovered the bigfoot library2, which creates “pop over” notes, but this library did not seem to be maintained since 4 years and it was still depending on jQuery. I thus found an alternative in the littlefoot library, which is still maintained and does not depend on jQuery. I may add at a later stage the side notes feature on desktop. I still have some stuff to fix here and there in this theme, but globally this is it!