lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* responsive-sidebar for dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2/* about: auto open/close `aside details` at 82rem breakpoint. prevents sidebar from looking awkward on wide screens, improves usability on small screens */
3
4const mediaQuery = matchMedia("(min-width: 82rem)");
5const toggleDetails = (matches) =>
6 document
7 .querySelectorAll("aside details")
8 .forEach((details) => details.toggleAttribute("open", matches));
9toggleDetails(mediaQuery.matches);
10mediaQuery.addEventListener("change", (event) => toggleDetails(event.matches));