git.shiar.nl / sheet.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: f35a681)
common: select style by class name from sass css
authorMischa POSLAWSKY <perl@shiar.org>
Sat, 15 Jun 2024 01:16:29 +0000 (03:16 +0200)
committerMischa POSLAWSKY <perl@shiar.org>
Wed, 7 Aug 2024 20:42:20 +0000 (22:42 +0200)
Combine all style options into light.css under s-* classes, enabled on html
root instead of loading a separate stylesheet.  Javascript for monochrome
media selection, otherwise identical behaviour.

Previously separate includes grow the resulting file from 16kB to 26kB.
Requires popular sassc for compilation and minification (replacing the
custom stripcss script).

Makefile patch | blob | history
common.inc.plp patch | blob | history
style/_base.scss [moved from base.css with 100% similarity] patch | blob | history
style/_circus.scss [moved from circus.css with 98% similarity] patch | blob | history
style/_dark.scss [moved from dark.css with 99% similarity] patch | blob | history
style/_darklite.scss [moved from darklite.css with 96% similarity] patch | blob | history
style/_lite.scss [moved from lite.css with 92% similarity] patch | blob | history
style/_mono.scss [moved from mono.css with 98% similarity] patch | blob | history
style/_red.scss [moved from red.css with 99% similarity] patch | blob | history
style/light.scss [new file with mode: 0644] patch | blob
style/sc.scss [moved from sc.css with 100% similarity] patch | blob | history

diff --git a/Makefile b/Makefile
index 19fe1d174ba857a25383d784b66d83383cec7c2a..502c65589d55f0c9732ef08929209284d625044b 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -1,10 +1,10 @@
-all: sitemap.xml light.css plan.plp UPDATE data cache
+all: sitemap.xml style plan.plp UPDATE data cache
 
 .PHONY: force # applied to download after 2 hours
 download := $(shell [ -z $$(find data/download -mmin -120) ] && (touch data/download && echo force))
 
 # atomically create file by command
-cmdsave = @echo '$1' $2 \>$@; mispipe '$1 $2' 'ifne sponge $@'
+cmdsave = @echo "$1" $2 \>$@; mispipe "$1 $2" 'ifne sponge $@'
 # download git checkout
 gitsave = @if cd $@ 2>/dev/null; \
        then echo git pull $@; git pull -q --ff-only || true; \
@@ -13,14 +13,15 @@ gitsave = @if cd $@ 2>/dev/null; \
 sitemap.xml: tools/mksitemap
        $(call cmdsave,$<)
 
-light.css: tools/stripcss base.css
-       $(call cmdsave,$^)
+style: light.css sc.css
+%.css: style/%.scss $(wildcard style/_*.scss)
+       $(call cmdsave,sassc -t compressed $< | perl -pE 's/\}+\K/\n/g')
 
 plan.plp: TODO
        kramdown $< >$@
 
 UPDATE: $(download)
-       $(call cmdsave,git log -1 --date=short --pretty="%ad    %s")
+       $(call cmdsave,git log -1 --date=short --pretty='%ad    %s')
 
 cache: $(patsubst %.inc.pl,data/%.json,$(wildcard charset-*.inc.pl) $(wildcard keyboard/altgr/*.inc.pl) writing-latn.inc.pl)
 word: word/put.min.js data/wordlist.en.json data/wordlist.nl.json data/wordlist.ru.json data/wordpairs.json
diff --git a/common.inc.plp b/common.inc.plp
index a9d5875920da8565c8b6c6ce9c0ce46119f2b16d..6d6a532ed348afa6021bb3c4dd674db1fbea6c76 100644 (file)
--- a/common.inc.plp
+++ b/common.inc.plp
@@ -72,12 +72,10 @@ sub stylesheet {
                } 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 {
@@ -141,11 +139,11 @@ sub Html {
        $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($meta->{stylesheet});
 
        if (my $img = $meta->{image}) {
                my $proto = sprintf('http%s://', !!$ENV{HTTPS} && 's');
@@ -166,7 +164,9 @@ sub 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">', $_
@@ -180,6 +180,10 @@ 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 "<script>$_</script>" for join($/,
+                       "if (m = window.matchMedia('(monochrome)'))",
+                       "(m.onchange = e => document.documentElement.classList.toggle('s-mono', e.matches))(m);",
+               );
                say '</head>';
                say '';
                say sprintf '<body id="%s">', $file;
diff --git a/base.css b/style/_base.scss
similarity index 100%
rename from base.css
rename to style/_base.scss
diff --git a/circus.css b/style/_circus.scss
similarity index 98%
rename from circus.css
rename to style/_circus.scss
index 58445298f426beb736ea31996bdfb5d3dd4cbeaa..733be95b0e4862c8b5b76160c3cd1a8d2ca18f66 100644 (file)
--- a/circus.css
+++ b/style/_circus.scss
@@ -1,5 +1,3 @@
-@import url(light.css?1.11);
-
 .l1       {background: #F77}
 .l1:hover a, .l1:hover a:visited,
 .l1:hover {     color: #F77; background: #000}
diff --git a/dark.css b/style/_dark.scss
similarity index 99%
rename from dark.css
rename to style/_dark.scss
index e7df58b5fc8214c93852f3638f6626e06ec0f6f5..6f56f8614078749e4cd68c2e3ad424adbee9d54f 100644 (file)
--- a/dark.css
+++ b/style/_dark.scss
@@ -1,5 +1,3 @@
-@import url(light.css?1.11);
-
 body {
        background: #000;
        color: #CCC;
diff --git a/darklite.css b/style/_darklite.scss
similarity index 96%
rename from darklite.css
rename to style/_darklite.scss
index 7f5c1133b19d0c34c3059d5eee7a3d27f3ce2a37..476b6b723dff29dcd7c753adcaa5ded7bee84944 100644 (file)
--- a/darklite.css
+++ b/style/_darklite.scss
@@ -1,5 +1,3 @@
-@import url(dark.css?1.11);
-
 th, td {
        border-color: #333;
        background: #181818;
diff --git a/lite.css b/style/_lite.scss
similarity index 92%
rename from lite.css
rename to style/_lite.scss
index d1b394f1449f0aef5c925c87bf700063175a53ab..c97c53a94cf9a074770c5394d60c89ac11bba61a 100644 (file)
--- a/lite.css
+++ b/style/_lite.scss
@@ -1,5 +1,3 @@
-@import url(light.css?1.11);
-
 .pm, td.c-na       {background: #DFD}
 .po                {background: #EFC}
 .co, td.c-af       {background: #FFC}
diff --git a/mono.css b/style/_mono.scss
similarity index 98%
rename from mono.css
rename to style/_mono.scss
index fbf3b40a7804f6d5f6cceaf59dcf841bf53f9b0c..5e088625472b6424cb5b31741f3a93240bbcac29 100644 (file)
--- a/mono.css
+++ b/style/_mono.scss
@@ -1,5 +1,3 @@
-@import url(light.css?1.11);
-
 a:active, a:visited:active,
 a:hover,  a:visited:hover {color: inherit}
 
diff --git a/red.css b/style/_red.scss
similarity index 99%
rename from red.css
rename to style/_red.scss
index bb2ee71c27ce3db7caacfb6ca61d321d32177153..cf27e28d0065cb13b2680a74f39ccc0a869f5e27 100644 (file)
--- a/red.css
+++ b/style/_red.scss
@@ -1,5 +1,3 @@
-@import url(light.css?1.11);
-
 body {
        background: #000;
        color: #CCC;
diff --git a/style/light.scss b/style/light.scss
new file mode 100644 (file)
index 0000000..d514071
--- /dev/null
+++ b/style/light.scss
@@ -0,0 +1,14 @@
+@import 'base';
+
+.s-dark {
+       @import 'dark';
+}
+.s-circus {
+       @import 'circus';
+}
+.s-mono {
+       @import 'mono';
+}
+.s-red {
+       @import 'red';
+}
diff --git a/sc.css b/style/sc.scss
similarity index 100%
rename from sc.css
rename to style/sc.scss
sheet.shiar.nl - software cheat sheets