I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
I don’t think I have seen this pattern elsewhere on narrow screens. They really are “footnotes!” Myself, I have recently switched to CSS anchor positioning to have margin notes falling back below the current paragraph if the viewport is not wide enough.
score 2 · canonical
Could you give me a short example how you do it? Do you hand-roll your blog or is the SSG you use that extensible? I’ve read many fun tricks over the years, but most blogging engines feel like they have a fairly narrow idea what a blog post should be and don’t really allow for arbitrary extensions…
score 1 · canonical
I am using a fork of Hyde (it’s an unmaintained SSG written in Python). The markdown is generated by Python-Markdown and I am post-processing the generated HTML to change the markup used for footnotes to be able to turn them into sidenotes. Likely, I could also have written/overloaded a specific extension for Python-Markdown.
One day, I’ll rewrite all this from scratch to not depend on a specific blog engine, but for now, I live with this hacky setup. Depending on what I need, I either patch Hyde, extend it with a plugin, add a plugin for Pygments, shell-out to Node.JS (notably for CSS stuff, with PostCSS to downgrade CSS files), or add a post-build step (image minification, cache busting). It’s still quite flexible and fast enough (about 30s), even if it’s not pretty.
score 1 · canonical