From: Paul Hänsch Date: Wed, 13 Feb 2019 08:18:54 +0000 (+0100) Subject: slide counter, footer, styling X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=0c1ce131e7e7c857a25d5281d8715f5cf0c056b5;hp=0fc47a1856fe8e4868149f654157d86d6c3794e8;p=clickslide slide counter, footer, styling --- diff --git a/autoslide.css b/autoslide.css index 5a1b7d7..97c17b7 100644 --- a/autoslide.css +++ b/autoslide.css @@ -4,13 +4,22 @@ } body { - padding: 2em 1em 4em 1em; + padding: 2em 1em 6em 1em; background-color: #555; text-align: center; overflow-x: hidden; } body * { text-align: left; } +body:after { + position: fixed; + bottom: 0; left: 0; + width: 100%; + background-color: #EEE; + height: 30pt; + content: ' '; +} + a.previous, a.next ,a.toplevel { text-decoration: none; } @@ -19,25 +28,44 @@ footer { position: fixed; bottom: 0; left: 0; width: 100%; - font-size: 14pt; - padding: .5em 4em .5em 5em; + font-size: 14pt; line-height: 14pt; + padding: .5em 4em .5em 12em; text-align: center; - background-color: #EEE; + #background-color: #EEE; color: #888; z-index: 3; } +footer:before { + content: ' '; + position: absolute; + top: 0; left: 0; + bottom: 28pt; + width: 100%; + background-color: #EEE; + z-index: -1; +} -a.toplevel { +body a.toplevel { position: fixed; - bottom: 0; left: 3em; - width: 1ex; overflow: hidden; + bottom: 0; left: 8em; + width: 2ex; overflow: hidden; font-size: 18pt; padding-bottom: .25em; - color: #888; + color: #EEE; z-index: 4; } -a.toplevel:before { - content: '\2191' +body a.toplevel:before { + color: #888; + content: '\2ba4' +} + +body span.count { + position: fixed; + bottom: 0; left: 6.25em; + font-size: 18pt; + padding-bottom: .125em; + color: #888; + z-index: 4; } /* ==== Overview Screen ==== */ @@ -47,6 +75,7 @@ div.slide { display: inline-block; overflow: hidden; width: 20em; height: 15em; + margin-left: -20em; border: 1px solid black; font-size: 6pt; } @@ -56,16 +85,13 @@ a.nextslide { display: inline-block; position: relative; vertical-align: top; - margin-left: 2em; - margin-right: -20em; + #margin-left: 2em; 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 ==== */ @@ -77,11 +103,14 @@ div.slide { div.slide:after { position: absolute; bottom: 0; width: 100%; - height: 1.25em; + font-size: .75em; + line-height: 1.5em; + content: attr(count) " /"; + padding-left: 4em; + margin-left: -1.25em; + margin-right: -1.25em; background-color: #EEE; - content: ''; - margin-left: -1em; - margin-right: -1em; + color: #888; } h1 { @@ -104,10 +133,11 @@ div.slide ul li, div.slide ol { div.slide:target { position: fixed; z-index: 2; - top: 0; left: 0; - width: 100%; height: 100%; + top: 0; bottom: 0; left: 0; right: 0; + width: auto; height: auto; + margin: 0; + border: none; font-size: 24pt; - background-color: white; } div.slide:target + a, div.slide:target + a + a { @@ -127,9 +157,9 @@ div.slide:target + a + a { z-index: 3; } :target + a:before { left: 0; } -:target + a:before { content: '<<'; } +:target + a:before { content: '\22d8'; } :target + a + a:before { right: 0; } -:target + a + a:before { content: '>>'; } +:target + a + a:before { content: '\22d9'; } :target .uncover { color: #DDD; } :target .uncover:hover { color: #000; } diff --git a/autoslide.sh b/autoslide.sh index 8c9ca1e..ead295b 100755 --- a/autoslide.sh +++ b/autoslide.sh @@ -1,6 +1,6 @@ #!/bin/sh -prev='' next='' idoff=1 +prev='' next='' idoff=0 "${0%/*}"/cgilite/html-sh.sed | { line="$(line)" @@ -24,19 +24,19 @@ prev='' next='' idoff=1 case $tag in *\*) prev="$next" - next="${tag#*next
next
*|*\*) prev="$next" next="autoslide${idoff}" idoff="$((idoff + 1))" - printf '%snext
next
*) @@ -52,6 +52,10 @@ prev='' next='' idoff=1 printf '%soverview' "$tag" tag='' ;; + *\*) + printf '%i%s' "$idoff" "$tag" + tag='' + ;; *\<*\>*) printf %s "$tag" tag='' diff --git a/example.short b/example.short index fb21c0d..f93a1cc 100644 --- a/example.short +++ b/example.short @@ -4,8 +4,7 @@ [title Demo] [link rel="stylesheet" type="text/css" href="autoslide.css"] ][body - [footer Paul Hänsch | VHS Chemnitz -] + [footer Paul Hänsch | Linux-Grundkurs | VHS Chemnitz] [slide [h1 Folie A] [ul .uncover