09-08-2025: Website Changes

I saw a few websites that used marginal notes on the right side of the screen like this one, so I decided to try and implement this feature in this wesbite. In my mind I thought of using an external pre-configured CSS that I can just insert and ta-da it would work.

How wrong I was.

See, this website is published with org-publish, meaning the org files that are written are converted to HTML through a transcoder. And as I already had a org.css¹ stylesheet which was primarily used for syntax highlighting, it caused some layout and formatting issue when I tried to use something like tufte.css². Anyways, long story short, the main thing I worked on today was styling this website, and ensuring certain macros worked:

(setq org-export-global-macros
      (append
       '(("sidenote"
          . "@@html:<label for=\"sn$1\" class=\"margin-toggle sidenote-number\"></label><input type=\"checkbox\" id=\"sn$1\" class=\"margin-toggle\"/><span class=\"sidenote\">$2</span>@@")
         ("epigraph"  . "@@html:<div class=\"epigraph\"><blockquote>$1<footer>$2</footer></blockquote></div>@@")
         ("epigraph_single"  . "@@html:<div class=\"epigraph\"><blockquote>$1</blockquote></div>@@")
         ("epigraph3" . "@@html:<div class=\"epigraph\"><blockquote>$1<footer>$2, <cite>$3</cite></footer></blockquote></div>@@")
         ("kbd"       . "@@html:<kbd>$1</kbd>@@@@latex:\\texttt{$1}@@")
         ("margimg"
          . "@@html:<aside class=\"marginnote\"><figure class=\"mn-fig\"><img src=\"$1\" alt=\"$2\" class=\"mn-img\" loading=\"lazy\" decoding=\"async\"/>$3</figure></aside>@@")

         org-export-global-macros)))

This worked quite nicely, and I made sure to make these changes accessible on smaller devices. Anyways, I quite like this style of posting. Nothing formal nor technical, just a bunch of rambling on about random things.

Oh, and also there's a darkmode theme switch now for you night owls.