From: Paul Hänsch Date: Tue, 12 Feb 2019 09:14:36 +0000 (+0100) Subject: auto elements X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=0fc47a1856fe8e4868149f654157d86d6c3794e8;p=clickslide auto elements --- diff --git a/autoslide.css b/autoslide.css index f07cb7e..5a1b7d7 100644 --- a/autoslide.css +++ b/autoslide.css @@ -1,27 +1,146 @@ -div { +* { + box-sizing: border-box; + margin: 0; padding: 0; +} + +body { + padding: 2em 1em 4em 1em; + background-color: #555; + text-align: center; + overflow-x: hidden; +} +body * { text-align: left; } + +a.previous, a.next ,a.toplevel { + text-decoration: none; +} + +footer { + position: fixed; + bottom: 0; left: 0; + width: 100%; + font-size: 14pt; + padding: .5em 4em .5em 5em; + text-align: center; + background-color: #EEE; + color: #888; + z-index: 3; +} + +a.toplevel { + position: fixed; + bottom: 0; left: 3em; + width: 1ex; overflow: hidden; + font-size: 18pt; + padding-bottom: .25em; + color: #888; + z-index: 4; +} +a.toplevel:before { + content: '\2191' +} + +/* ==== Overview Screen ==== */ + +div.slide { + position: relative; display: inline-block; overflow: hidden; - width: 40em; height: 30em; + width: 20em; height: 15em; border: 1px solid black; - font-size: 2pt; + font-size: 6pt; } -div:target { - display: fixed; - top: 0; bottom: 0; - left:0; right: 0; + +div.slide + a { display: none; } +a.nextslide { + display: inline-block; + position: relative; + vertical-align: top; + margin-left: 2em; + margin-right: -20em; + font-size: 6pt; + width: 20em; line-height: 15em; + color: rgba(0, 0, 0, 0); + z-index: 1; +} +a.nextslide:nth-of-type(2) { margin-left: 0; } +div.slide:nth-of-type(1) { margin-right: .5em; } +div.slide:last-of-type { margin-right: 2.5em; } + +/* ==== Slide Appearance ==== */ + +div.slide { + padding: 0 1em; + background-color: #FFF; +} + +div.slide:after { + position: absolute; + bottom: 0; width: 100%; + height: 1.25em; + background-color: #EEE; + content: ''; + margin-left: -1em; + margin-right: -1em; +} + +h1 { + left: 0; right: 0; + display: block; + text-align: center; + font-size: 1.5em; + background-color: #EEE; + padding: .25em 1em; + margin-left: -1em; + margin-right: -1em; +} + +div.slide ul li, div.slide ol { + indent: 20em; +} + +/* ==== Slide Display ==== */ + +div.slide:target { + position: fixed; + z-index: 2; + top: 0; left: 0; + width: 100%; height: 100%; font-size: 24pt; + background-color: white; +} +div.slide:target + a, +div.slide:target + a + a { + position: static; + display: block; + font-size: 18pt; + line-height: 1em; + color: #888; +} +:target + a:before, :target + a + a:before { + display: block; + position: fixed; + bottom: 0; + font-size: 18pt; + color: #888; + padding: 0 1em .25em 1em; + z-index: 3; } +:target + a:before { left: 0; } +:target + a:before { content: '<<'; } +:target + a + a:before { right: 0; } +:target + a + a:before { content: '>>'; } -ul { color: #CCC; } -ul:hover { color: #000; } -ul li:first-child { height: 0; } -ul li:first-child:before, -ul li:hover:before, -ul li:active + li:before { +: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: ' '; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } -ul li:hover ~ li { color: #CCC; } -ul li:active:before { display: none; } +:target .uncover *:hover ~ * { color: #DDD; } +:target .uncover *:active:before { display: none; } diff --git a/autoslide.sh b/autoslide.sh index e2c40a8..8c9ca1e 100755 --- a/autoslide.sh +++ b/autoslide.sh @@ -1,7 +1,6 @@ #!/bin/sh -last='' curr='' next='' -idoff=1 +prev='' next='' idoff=1 "${0%/*}"/cgilite/html-sh.sed | { line="$(line)" @@ -24,20 +23,33 @@ idoff=1 case $tag in *\*) - prev="$curr" curr="$next" + prev="$next" next="${tag#*previousnextnext
*) - prev="$curr" curr="$next" + *\*|*\*) + prev="$next" next="autoslide${idoff}" idoff="$((idoff + 1))" - printf '%spreviousnextnext
*) + printf '%s
previous%s' \ + "${tag%
*}" "$prev" "${tag#*}" + tag='' + ;; + *\<*class=\"uncover\"*\>*) + printf '%s' "$tag" + tag='' + ;; + *\*) + printf '%soverview' "$tag" tag='' ;; *\<*\>*) diff --git a/example.short b/example.short index fa9c524..fb21c0d 100644 --- a/example.short +++ b/example.short @@ -4,16 +4,26 @@ [title Demo] [link rel="stylesheet" type="text/css" href="autoslide.css"] ][body - [div #1 + [footer Paul Hänsch | VHS Chemnitz +] + [slide [h1 Folie A] - [ul [li] + [ul .uncover [li Eins] [li Zwei] [li Drei] [li Vier] [li Fünf] ] - ][div #2 + ][slide [h1 Folie B] + [ol .uncover [li x] [li y] [li z]] ] + [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]] ]]