From: Paul Hänsch Date: Tue, 18 Jun 2019 17:46:56 +0000 (+0200) Subject: Merge branch 'master' of git.plutz.net:clickslide X-Git-Url: http://git.plutz.net/?p=clickslide;a=commitdiff_plain;h=8ccb37d9fc6776210e3e63cdffb96ec762af7067;hp=7f3ca9907f0479a3da9d2c8eb5ecf9dccd4917be Merge branch 'master' of git.plutz.net:clickslide --- diff --git a/clickslide.css b/clickslide.css index 084bf68..2e76754 100644 --- a/clickslide.css +++ b/clickslide.css @@ -1,3 +1,44 @@ +/* === Colors === */ + +footer, +body a.toplevel:before, +body span.count, +div.slide:target:after, +div.slide:target + a, div.slide:target + a + a, +:target + a:before, :target + a + a:before +{ color: #888; } + +body +{ background-color: #AAA; + background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px); +} + +div.slide +{ background-color: #FFF; + background-image: repeating-linear-gradient( #FFF, #EEE 4px); +} + +div.slide:target:after, +footer:before, body:after +{ background-color: #EEE; + background-image: repeating-linear-gradient(#EEE, #DDD 8px); +} + +div.slide h1, div.slide h2 +{ background-color: #EEE; + background-image: repeating-linear-gradient(#EEE, #DDD 8px); +} + +div.slide pre, div.slide code +{ background-color: #DDD; + background-image: repeating-linear-gradient(#CCC, #DDD 4px); +} + +div.slide:after /* slide number on overview screen */ +{ color: #AAA; } + +/* === Overall Layout === */ + * { box-sizing: border-box; margin: 0; padding: 0; @@ -20,7 +61,7 @@ body { font-family: sans-serif; padding: 2em 1em 6em 1em; - background-color: #555; + #background-color: #555; text-align: center; overflow-x: hidden; } @@ -33,9 +74,9 @@ body:after { position: fixed; bottom: 0; left: 0; width: 100%; - background-color: #EEE; height: 1.25em; content: ' '; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } a.previous, a.next ,a.toplevel { @@ -49,16 +90,17 @@ footer { font-size: .75em; padding: .5em 4em .5em 12em; text-align: center; - color: #888; + #color: #888; z-index: 4; + /* footer must not have background, so slide number is not covered */ } -footer:before { +footer:before { /* fake background in case footer spans multiple lines */ content: ' '; position: absolute; top: 0; left: 0; bottom: 1.5em; width: 100%; - background-color: #EEE; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); z-index: -1; } @@ -68,11 +110,11 @@ body a.toplevel { width: 2ex; overflow: hidden; font-size: .875em; padding-bottom: .25em; - color: #EEE; + color: transparent; z-index: 5; } body a.toplevel:before { - color: #888; + #color: #888; content: '\2196'; } @@ -81,7 +123,7 @@ body span.count { bottom: 0; left: 6.25em; font-size: .875em; padding-bottom: .125em; - color: #888; + #color: #888; z-index: 5; } @@ -108,7 +150,7 @@ div.slide:after { /* slide number */ text-align: left; content: attr(count); padding-left: .125em; - color: #DDD; + #color: #DDD; } div.slide + a { display: none; } @@ -117,7 +159,7 @@ a.nextslide { position: relative; vertical-align: top; width: 48em; line-height: 30em; - color: rgba(0, 0, 0, 0); + color: transparent; z-index: 2; } #div.slide:nth-of-type(1) { margin-right: .5em; } @@ -125,7 +167,7 @@ a.nextslide { /* ==== Slide Appearance ==== */ div.slide { - background: #FFF no-repeat center; + #background: #FFF no-repeat center; text-align: center; line-height: 1.5em; } @@ -145,12 +187,12 @@ div.slide > h2:first-child + :last-child { div.slide h1, div.slide h2 { display: block; - background-color: #EEE; text-align: center; font-size: 1.5em; margin-top: 0; margin-bottom: 1em; width: 100%; max-width: 100%; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } div.slide h1, @@ -187,13 +229,18 @@ div.slide > ol { margin: .25em auto; } +div.slide pre, div.slide code { + #background-color: rgba(224,224,224,128); + font-family: monospace; +} div.slide pre { - background-color: rgba(192,192,192,128); padding: 1ex; text-align: left; - font-family: monospace; overflow: hidden; } +div.slide code { + padding: 0 .5em; +} /* ==== Slide Display ==== */ @@ -217,8 +264,8 @@ div.slide:target:after { text-align: left; content: attr(count) " /"; padding-left: 4em; - background-color: #EEE; - color: #888; + #color: #888; + #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px); } /* back and forth link buttons */ @@ -228,13 +275,13 @@ div.slide:target + a + a { display: block; font-size: inherit; line-height: 1em; - color: #888; + #color: #888; } :target + a:before, :target + a + a:before { display: block; position: fixed; bottom: 0; - color: #888; + #color: #888; padding: 0 1em .25em 1em; z-index: 4; } diff --git a/demo/Makefile b/demo/Makefile new file mode 100644 index 0000000..7cb4080 --- /dev/null +++ b/demo/Makefile @@ -0,0 +1,2 @@ +demo.html: demo.short + ../clickslide.sh <$< >$@ diff --git a/demo/demo.short b/demo/demo.short new file mode 100644 index 0000000..9b239f6 --- /dev/null +++ b/demo/demo.short @@ -0,0 +1,105 @@ +[html [head + [title ClickSlide Demo] +] [body + [footer Clickslide Demo] + + [slide [h1 Clickslide] + a Compiler for Browser based Slideshows + ] + + [slide + [ul + [li Why would I write another Slideshow system] + [li What's wrong with JavaScript?] + [li How do you simplify HTML?] + ] + ] + + [slide [h2 Why Write another Slideshow System?] + [ul .uncover + [li WYSIWYG Slideshow applications are annoying [ul + [li too much fiddling, not straight to point] + ]] + [li [em LaTeX] is not exactly casual] + [li Existing browser slideshows are [ul + [li based on JavaScript] + [li Either verbous HTML, or unflexible markup] + ]] + ] + ] + + [slide [h2 Why avoid JavaScript] + [ul .uncover + [li Nothing wrong with JS as a programming language, [strong but...]] + [li Freedom to [em Use], [em Study], [em Share], and [em Improve] can in practice not be applied to code served from another computer (regardless of the license this code is under)] + [li Impossible to get browser security straight for Turing complete programs [ul + [li → Massive security problems, which are fundamentally unresolvable] + [li HTML and CSS are not Turing complete (CSS is a [em regular] language)] + ]] + [li Performance killer in practice] + ] + ] + + [slide [h1 Usage and Features]] + + [slide [h2 Simplifying HTML] + Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br] + [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb0.jpg);" +\ + \ + \Demo\ + \ + \ + \

Headline\ + \ +\ + ] + [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb3.jpg);" +\[html + \[head + \[title Demo\] + \] + \[body \#frontpage + \[h1 .top Headline\] + \] +\] + ] + ] + + [slide [h2 Example Slide Show] + [pre +\[html \[head + \[title Example Slideshow\] +\]\[body + \[footer Title | Author | Date and Place\] + \[slide \[h1 Title\]\] + \[slide \[h2 A Slide\] + \[ul .uncover + \[li This list\] + \[li gets uncovered\] + \[li item by item\] +\]\]\]\] + ] + ] + + [slide [h2 Syntax] + [ul + [li Clickslide uses [a "//plutz.net/software/shorthand.html" Shorthand] syntax] + [li it introduces the [code slide]-tag to make up a single slide] + [li lists belonging to the [code \.uncover]-class will be uncovered item by item when the list is clicked] + [li You can view the source code of this presentation: [a "demo.short" click here]] + ] + ] + + [slide [h2 Features] + [ul + [li Whole slideshow is contained in one document] + [li Images get embedded into the document via base64-coding] + [li Slideshow can be put on a website, emailed, or passed around on a thumbdrive] + [li Slideshow can be viewed on virtually all desktop and mobile devices] + [li Source files can be easily tracked via version control] + ] + ] + + [slide [h1 Thank you for listening!]] +] diff --git a/example/exb0.jpg b/demo/exb0.jpg similarity index 100% rename from example/exb0.jpg rename to demo/exb0.jpg diff --git a/example/exb1.jpg b/demo/exb1.jpg similarity index 100% rename from example/exb1.jpg rename to demo/exb1.jpg diff --git a/example/exb2.jpg b/demo/exb2.jpg similarity index 100% rename from example/exb2.jpg rename to demo/exb2.jpg diff --git a/example/exb3.jpg b/demo/exb3.jpg similarity index 100% rename from example/exb3.jpg rename to demo/exb3.jpg diff --git a/example.short b/example.short deleted file mode 100644 index 0d90368..0000000 --- a/example.short +++ /dev/null @@ -1,22 +0,0 @@ -[!DOCTYPE HTML] -[html [head - [title Demo] -][body - [footer Paul Hänsch | Linux-Grundkurs | VHS Chemnitz] - [slide - [h1 Folie A] - [ul .uncover - [li Eins] - [li Zwei] - [li Drei] - [li Vier] - [li Fünf] - ] - ][slide - [h1 Folie B] - foo bar qua spam eggs bacon jam elephant - [ol .uncover [li x] [li y] [li z]] - giraffe sabertooth kitten vegetarian - ] - [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] [slide [h1 Slide]] -]] diff --git a/example/demo.short b/example/demo.short deleted file mode 100644 index f2ab688..0000000 --- a/example/demo.short +++ /dev/null @@ -1,85 +0,0 @@ -[html [head - [title ClickSlide Demo] -] [body - [footer Clickslide Demo] - - [slide - [h1 Clickslide] - a Compiler for Browser based Slideshows - ] - [slide - [ul - [li Why would I write another Slideshow system] - [li What's wrong with JavaScript?] - [li How do you simplify HTML?] - ] - ] - [slide - [h2 Why Write another Slideshow System?] - [ul .uncover - [li WYSIWYG Slideshow applications are annoying [ul - [li too much fiddling, not straight to point] - ]] - [li [em LaTeX] is not exactly casual] - [li Existing Browser Slideshows are [ul - [li based on JavaScript (see next slide)] - [li Either verbous HTML, or unflexible markup] - ]] - ] - ] - [slide - [h2 Why avoid JavaScript] - [ul .uncover - [li Nothing wrong with JS as a programming language, [strong but...]] - [li Freedom to [em Use], [em Study], [em Share], and [em Improve] can in practice not be applied to code served from another Computer (regardless of the license this code is under)] - [li Impossible to get Browser security straight for Turing complete programs [ul - [li → Massive security problems, which are fundamentally unresolvable] - [li HTML and CSS are not Turing complete (CSS is a [em regular] language)] - ]] - [li Performance killer in practice] - ] - ] - [slide [h2 Simplifying HTML] - Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br] - [pre style="display: inline-block; width: 46%; background-image: url(exb0_light.jpg);" -\ - \ - \Demo\ - \ - \ - \

Headline\ - \ -\ - ] - [pre style="display: inline-block; width: 46%; background-image: url(exb3_light.jpg);" -\[html - \[head - \[title Demo\] - \] - \[body \#frontpage - \[h1 .top Headline\] - \] -\] - ] - ] - [slide [h1 This is a \] - [pre \[h1 This is a \\\\]] - ] - [slide - [h2 This is a \] - [pre - \[h2 This is a \\\\] - \[ul .uncover - \[li This list ...\] - \[li ... gets uncovered ...\] - \[li ... item by item\] - \] - ] - [br] - [ul .uncover - [li This list ...] - [li ... gets uncovered ...] - [li ... item by item] - ] - ] -] diff --git a/example/exb0_light.jpg b/example/exb0_light.jpg deleted file mode 100644 index ea6dd7f..0000000 Binary files a/example/exb0_light.jpg and /dev/null differ diff --git a/example/exb1_light.jpg b/example/exb1_light.jpg deleted file mode 100644 index 7a094dd..0000000 Binary files a/example/exb1_light.jpg and /dev/null differ diff --git a/example/exb2_light.jpg b/example/exb2_light.jpg deleted file mode 100644 index 0c6c058..0000000 Binary files a/example/exb2_light.jpg and /dev/null differ diff --git a/example/exb3_light.jpg b/example/exb3_light.jpg deleted file mode 100644 index 3808929..0000000 Binary files a/example/exb3_light.jpg and /dev/null differ