Time for a refresh!

from vanschklift.com

Jul 20, 2020, 6:54:00 PM

It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging on the old boring theme was not so motivating. So I made a this one by combining some open source libs.

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:

  • mark
  • s (strikethrough)
  • strong
  • blockquote for 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!

  1. I really like LaTeX, but I don’t have so many occasions to use it these days.

  2. The kind of stuff that happens regularly when you annotate a document.

  3. and the corresponding plugin for dotclear by Franck