From: Paul Hänsch Date: Wed, 20 Feb 2019 12:24:29 +0000 (+0100) Subject: use checkbox hack for cleaner item uncovering X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=c2772fd3bec6c84a3bfdcd90b2008d9381c10876;p=clickslide use checkbox hack for cleaner item uncovering --- diff --git a/autoslide.css b/clickslide.css similarity index 75% rename from autoslide.css rename to clickslide.css index 34ba180..e545208 100644 --- a/autoslide.css +++ b/clickslide.css @@ -4,6 +4,7 @@ } body { + font-family: sans-serif; padding: 2em 1em 6em 1em; background-color: #555; text-align: center; @@ -85,7 +86,6 @@ a.nextslide { display: inline-block; position: relative; vertical-align: top; - #margin-left: 2em; font-size: 6pt; width: 20em; line-height: 15em; color: rgba(0, 0, 0, 0); @@ -96,9 +96,9 @@ div.slide:nth-of-type(1) { margin-right: .5em; } /* ==== Slide Appearance ==== */ div.slide { - padding: 0 1em; - background-color: #FFF; + background: #FFF no-repeat center; text-align: center; + line-height: 1.5em; } div.slide:after { @@ -115,19 +115,32 @@ div.slide:after { } div.slide > * { - vertical-align: middle; + margin-top: 1em; text-align: left; + max-width: 100%; + z-index: 3; } -div.slide h1 { - left: 0; right: 0; +div.slide h1, div.slide h2 { display: block; + background-color: #EEE; text-align: center; font-size: 1.5em; - background-color: #EEE; + margin-top: 0; + margin-bottom: 1em; + width: 100%; +} + +div.slide h1 { + position: absolute; + top: 50%; left: 0; right: 0; + transform: translate(0, -50%); + padding: .5em 2em; + z-index: 0; +} + +div.slide h2 { padding: .25em 1em; - margin-left: -1em; - margin-right: -1em; } div.slide ul, @@ -142,7 +155,7 @@ div.slide:target { position: fixed; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; - width: auto; height: auto; + width: auto; height: 100%; margin: 0; border: none; font-size: 24pt; @@ -169,16 +182,18 @@ div.slide:target + a + a { :target + a + a:before { right: 0; } :target + a + a:before { content: '\22d9'; } -:target .uncover { color: #DDD; } -:target .uncover:hover { color: #000; } -:target .uncover *:first-child { height: 0; } -:target .uncover *:first-child:before, -:target .uncover *:hover:before, -:target .uncover *:active + *:before { - content: ' '; +.uncover[type="checkbox"] + * { opacity: .2; } +.uncover[type="checkbox"]:checked + * { opacity: 1; } + +.uncover[type="checkbox"] { position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; bottom: 0; left: 0; right: 0; + width: 100%; height: 100%; + opacity: 0; } -:target .uncover *:hover ~ * { color: #DDD; } -:target .uncover *:active:before { display: none; } + +.uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; } +.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; } +.uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked, +.uncover[type="checkbox"]:checked { display: none; } + diff --git a/autoslide.sh b/clickslide.sh similarity index 61% rename from autoslide.sh rename to clickslide.sh index ead295b..ddc94c3 100755 --- a/autoslide.sh +++ b/clickslide.sh @@ -1,8 +1,10 @@ #!/bin/sh prev='' next='' idoff=0 +depth=0 ucdepth=-1 -"${0%/*}"/cgilite/html-sh.sed | { +{ "${0%/*}"/cgilite/html-sh.sed || cat; } \ +| { line="$(line)" while :; do tag="${tag}${line%%>*}" @@ -22,6 +24,13 @@ prev='' next='' idoff=0 fi case $tag in + *\*|\*\) + printf '%s + %s' "${tag#*}" + tag='' depth=$((depth + 1)) + ;; *\*) prev="$next" next="${tag#*next
*|*\*) prev="$next" @@ -37,27 +46,39 @@ prev='' next='' idoff=0 idoff="$((idoff + 1))" printf '%snext
*) printf '%s
previous%s' \ "${tag%*}" "$prev" "${tag#*}" - tag='' + tag='' depth=$((depth - 1)) ;; *\<*class=\"uncover\"*\>*) - printf '%s' "$tag" - tag='' + #printf '%s
  • ' "$tag" + printf '%s' "$tag" + tag='' depth=$((depth + 1)) + ucdepth=$depth ;; *\*) printf '%soverview' "$tag" - tag='' + tag='' depth=$((depth + 1)) ;; *\*) printf '%i%s' "$idoff" "$tag" - tag='' + tag='' depth=$((depth - 1)) ;; - *\<*\>*) + *\*) printf %s "$tag" + tag='' depth=$((depth - 1)) + [ $depth -lt $ucdepth ] && ucdepth=-1 + ;; + *\<*\>*) + if [ $ucdepth = $depth ]; then + printf '%s<%s' "${tag%<*}" "${tag#*<}" + else + printf %s "$tag" + fi + [ "${tag}" = "${tag%/>}" ] && depth=$((depth + 1)) tag='' ;; *) : diff --git a/example.short b/example.short index b19c6e3..0d90368 100644 --- a/example.short +++ b/example.short @@ -1,8 +1,6 @@ [!DOCTYPE HTML] [html [head - [meta name="viewport" content="width=device-width"] [title Demo] - [link rel="stylesheet" type="text/css" href="autoslide.css"] ][body [footer Paul Hänsch | Linux-Grundkurs | VHS Chemnitz] [slide @@ -21,10 +19,4 @@ giraffe sabertooth kitten vegetarian ] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] ]]