From: Mischa POSLAWSKY Date: Sat, 15 Jun 2024 01:16:29 +0000 (+0200) Subject: common: select style by class name from sass css X-Git-Tag: v1.20~20 X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/20883523f524360de2c7758b02d15be980ed08c3?hp=f35a681178dbc9a466546f8d1613f93a312def0a common: select style by class name from sass css 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). --- diff --git a/Makefile b/Makefile index 19fe1d1..502c655 100644 --- 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 a9d5875..6d6a532 100644 --- 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( - '', - $_ 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} }, ( - '', + unshift @{ $meta->{raw} }, ( + '', ); + $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 ''; - say qq(); + my $rootattr = ''; + $rootattr .= qq( class="s-$_") for $meta->{stylesheet} || (); + say qq(); say ''; say ''; say sprintf '', $_ @@ -180,6 +180,10 @@ sub Html { say ''; say for map { @{$_} } $meta->{raw} || (); say '' if $Dev; + say "" for join($/, + "if (m = window.matchMedia('(monochrome)'))", + "(m.onchange = e => document.documentElement.classList.toggle('s-mono', e.matches))(m);", + ); say ''; say ''; say sprintf '', $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 5844529..733be95 100644 --- 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 e7df58b..6f56f86 100644 --- 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 7f5c113..476b6b7 100644 --- 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 d1b394f..c97c53a 100644 --- 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 fbf3b40..5e08862 100644 --- 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 bb2ee71..cf27e28 100644 --- 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 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