style: nested scss selectors

[sheet.git] / common.inc.plp

diff --git a/common.inc.plp b/common.inc.plp
index 6d6a532ed348afa6021bb3c4dd674db1fbea6c76..ff84a9ac191e950dcbe88e33fc590b79b4b7561d 100644 (file)
--- a/common.inc.plp
+++ b/common.inc.plp
@@ -54,8 +54,7 @@ our $style;
 $header{content_type} = 'text/html; charset=utf-8';
 
 sub stylesheet {
-       my ($avail) = @_;
-       my @avail = ref $avail eq 'ARRAY' ? @{$avail} : $avail or return;
+       my @avail = qw( light dark circus mono red );
        my %styles = map {$_ => $_} @avail;
 
        if (defined( my $setstyle = $get{style} )) {
@@ -127,7 +126,6 @@ sub Html {
        }
 
        # default fallbacks
-       $meta->{stylesheet} ||= [qw( light dark circus mono red )];
        $meta->{charset} ||= 'utf-8';
        $meta->{lang} ||= 'en';
 
@@ -143,7 +141,7 @@ sub Html {
        unshift @{ $meta->{raw} }, (
                '<link rel="stylesheet" type="text/css" media="all" href="/light.css?1.20">',
        );
-       $meta->{stylesheet} = stylesheet($meta->{stylesheet});
+       $meta->{stylesheet} = stylesheet();
 
        if (my $img = $meta->{image}) {
                my $proto = sprintf('http%s://', !!$ENV{HTTPS} && 's');
@@ -181,8 +179,17 @@ sub Html {
                say for map { @{$_} } $meta->{raw} || ();
                say '<meta name="robots" content="noindex">' if $Dev;
                say "<script>$_</script>" for join($/,
-                       "if (m = window.matchMedia('(monochrome)'))",
-                       "(m.onchange = e => document.documentElement.classList.toggle('s-mono', e.matches))(m);",
+                       "docroot = document.documentElement;",
+                       "if (docroot.className == '') {",
+                       "new Map([",
+                               "['s-mono','(monochrome)'],",
+                               "['s-dark','(prefers-color-scheme: dark)'],",
+                               "['s-circus','(prefers-contrast: more)'],",
+                       "]).forEach((q,c) => {",
+                               "if (m = window.matchMedia(q))",
+                               "(m.onchange = e => docroot.classList.toggle(c, e.matches))(m)",
+                       "})",
+                       "}",
                );
                say '</head>';
                say '';