+/* === 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;
body {
font-family: sans-serif;
padding: 2em 1em 6em 1em;
- background-color: #555;
+ #background-color: #555;
text-align: center;
overflow-x: hidden;
}
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 {
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;
}
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';
}
bottom: 0; left: 6.25em;
font-size: .875em;
padding-bottom: .125em;
- color: #888;
+ #color: #888;
z-index: 5;
}
text-align: left;
content: attr(count);
padding-left: .125em;
- color: #DDD;
+ #color: #DDD;
}
div.slide + a { display: none; }
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; }
/* ==== Slide Appearance ==== */
div.slide {
- background: #FFF no-repeat center;
+ #background: #FFF no-repeat center;
text-align: center;
line-height: 1.5em;
}
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,
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 ==== */
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 */
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;
}
--- /dev/null
+demo.html: demo.short
+ ../clickslide.sh <$< >$@
--- /dev/null
+[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);"
+\<html\>
+ \<head\>
+ \<title\>Demo\</title\>
+ \</head\>
+ \<body id="frontpage"\>
+ \<h1 class="top"\>Headline\</h1\>
+ \</body\>
+\</html\>
+ ]
+ [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!]]
+]
+++ /dev/null
-[!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]]
-]]
+++ /dev/null
-[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);"
-\<html\>
- \<head\>
- \<title\>Demo\</title\>
- \</head\>
- \<body id="frontpage"\>
- \<h1 class="top"\>Headline\</h1\>
- \</body\>
-\</html\>
- ]
- [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 \<h1\>]
- [pre \[h1 This is a \\\<h1\\\>\]]
- ]
- [slide
- [h2 This is a \<h2\>]
- [pre
- \[h2 This is a \\\<h2\\\>\]
- \[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]
- ]
- ]
-]
projects / clickslide / commitdiff
