A check box that reveals list items!
Wanted to do something like this for the longest time — it annoys me a lot that devlogs use so much space in my blog (especially since I haven't published anything but the devlogs in like two years...). Additionally I don't think devlogs are very interesting to look at. I think if you want to look at the devlogs you do, but most of the time you don't. Idk.
Anyway, this might not look like anything interesting.. But for someone who is very much foreign to the web world, this is enough to be happy about :3
Was very pleased to be able to do this with css only. Originally I thought that it might be impossible, because the list items and the checkbox are not closely related -- they are children of siblings (or something like that?). But I eventually figured out that you can use :has:
/* hide devlog entries by default*/
li.devlog {
display: none;
}
/* show devlogs when the checkbox is checked */
div:has(> #show-devlog:checked) + ul li.devlog {
display: list-item;
}In the end I had to change things a little because the static generator that I use for my blog (zola) generates somewhat weird html (or is it the theme?..), but either way it works not and looks half decent even, maybe probably.