style: nested scss selectors

[sheet.git] / common.inc.plp
diff --git a/common.inc.plp b/common.inc.plp

index a9d5875920da8565c8b6c6ce9c0ce46119f2b16d..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 {
  $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} )) {
         my %styles = map {$_ => $_} @avail;
  
         if (defined( my $setstyle = $get{style} )) {
@@ -72,12 +71,10 @@ sub stylesheet {
                 } or warn "Unable to create style cookie: $@";
         }
  
                 } or warn "Unable to create style cookie: $@";
         }
  
-       $style ||= exists $cookie{style} && $styles{ $cookie{style} } || $avail[0];
-
-       return map { sprintf(
-               '<link rel="%s" type="text/css" media="all" href="%s" title="%s">',
-               $_ eq $style ? 'stylesheet' : 'alternate stylesheet', "/$_.css?1.19", $_
-       ) } @avail;
+       $style ||= $styles{$_} for $cookie{style} || ();
+       my $setstyle = $style;
+       $style ||= $avail[0];
+       return $setstyle;
  }
  
  sub checkmodified {
  }
  
  sub checkmodified {
@@ -129,7 +126,6 @@ sub Html {
         }
  
         # default fallbacks
         }
  
         # default fallbacks
-       $meta->{stylesheet} ||= [qw( light dark circus mono red )];
         $meta->{charset} ||= 'utf-8';
         $meta->{lang} ||= 'en';
  
         $meta->{charset} ||= 'utf-8';
         $meta->{lang} ||= 'en';
  
@@ -141,11 +137,11 @@ sub Html {
         $header{content_type} = "text/html; charset=$meta->{charset}"
                 unless $PLP::sentheaders;
         exit if $ENV{REQUEST_METHOD} eq 'HEAD';
         $header{content_type} = "text/html; charset=$meta->{charset}"
                 unless $PLP::sentheaders;
         exit if $ENV{REQUEST_METHOD} eq 'HEAD';
-       unshift @{ $meta->{raw} }, stylesheet($meta->{stylesheet});
  
  
-       push @{ $meta->{raw} }, (
-               '<link rel="stylesheet" type="text/css" media="monochrome" href="/mono.css?1.11" title="light">',
+       unshift @{ $meta->{raw} }, (
+               '<link rel="stylesheet" type="text/css" media="all" href="/light.css?1.20">',
         );
         );
+       $meta->{stylesheet} = stylesheet();
  
         if (my $img = $meta->{image}) {
                 my $proto = sprintf('http%s://', !!$ENV{HTTPS} && 's');
  
         if (my $img = $meta->{image}) {
                 my $proto = sprintf('http%s://', !!$ENV{HTTPS} && 's');
@@ -166,7 +162,9 @@ sub Html {
         PLP_START {
                 # leading output
                 say '<!DOCTYPE html>';
         PLP_START {
                 # leading output
                 say '<!DOCTYPE html>';
-               say qq(<html lang="$meta->{lang}">);
+               my $rootattr = '';
+               $rootattr .= qq( class="s-$_") for $meta->{stylesheet} || ();
+               say qq(<html lang="$meta->{lang}"$rootattr>);
                 say '';
                 say '<head>';
                 say sprintf '<meta http-equiv="content-type" content="%s">', $_
                 say '';
                 say '<head>';
                 say sprintf '<meta http-equiv="content-type" content="%s">', $_
@@ -180,6 +178,19 @@ sub Html {
                 say '<link rel="icon" type="image/png" href="/clip.png">';
                 say for map { @{$_} } $meta->{raw} || ();
                 say '<meta name="robots" content="noindex">' if $Dev;
                 say '<link rel="icon" type="image/png" href="/clip.png">';
                 say for map { @{$_} } $meta->{raw} || ();
                 say '<meta name="robots" content="noindex">' if $Dev;
+               say "<script>$_</script>" for join($/,
+                       "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 '';
                 say sprintf '<body id="%s">', $file;
                 say '</head>';
                 say '';
                 say sprintf '<body id="%s">', $file;