2.3 KiB
09-08-2025: Website Changes
What was worked on
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.css1 stylesheet which was primarily used for syntax highlighting, it caused some layout and formatting issue when I tried to use something like tufte.css2. 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.