@@ -1,14 +1,21 @@
11<!DOCTYPE html>
2−<head>
3−<meta charset="utf-8">
2+<head$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
3+ <meta charset="utf-8">
4+ <meta name="generator" content="pandoc">
45$for(author-meta)$
5− <meta name="author" content="$author-meta$" />
6+ <meta name="author" content="$author-meta$">
67$endfor$
78$if(date-meta)$
8− <meta name="dcterms.date" content="$date-meta$" />
9+ <meta name="dcterms.date" content="$date-meta$">
10+$endif$
11+$if(keywords)$
12+ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
913$endif$
1014 <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
1115 <style type="text/css">code{white-space: pre;}</style>
16+$if(quotes)$
17+ <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
18+$endif$
1219$if(highlighting-css)$
1320 <style type="text/css">
1421$highlighting-css$
@@ -16,40 +23,87 @@ $highlighting-css$
1623$endif$
1724$if(css)$
1825$for(css)$
19− <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
26+ <link rel="stylesheet" href="$css$">
2027$endfor$
2128$else$
29+<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
30+
2231<style>
23− html { background-color: black; }
24− body { background-color: white; border-radius: 12px}
32+ html, .view body { background-color: black; counter-reset: slideidx; }
33+ body, .view section { background-color: white; border-radius: 12px }
2534 /* A section is a slide. It's size is 800x600, and this will never change */
26− section {
27− font-family: Arial, serif;
28− font-size: 20pt;
29− }
30− address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul, dl { padding: 10px 20px 10px 20px; }
31− h1, h2, h3 {
35+ section, .view head > title {
36+ /* The font from Google */
37+ font-family: 'Oswald', arial, serif;
38+ font-size: 30px;
39+ }
40+
41+ .view section:after {
42+ counter-increment: slideidx;
43+ content: counter(slideidx, decimal-leading-zero);
44+ position: absolute; bottom: -80px; right: 100px;
45+ color: white;
46+ }
47+
48+ .view head > title {
49+ color: white;
50+ text-align: center;
51+ margin: 1em 0 1em 0;
52+ }
53+
54+ h1, h2 {
55+ margin-top: 200px;
3256 text-align: center;
33− margin: 10pt 10pt 20pt 10pt;
34− }
35− ul, ol {
36− margin: 10px 10px 10px 50px;
37− }
38− section.titleslide h1 { margin-top: 200px; }
39− h1.title { margin-top: 150px; }
40− h1 { font-size: 180%; }
41− h2 { font-size: 120%; }
42− h3 { font-size: 100%; }
43− q { quotes: "“" "”" "‘" "’"; }
44− blockquote { font-style: italic }
45− /* Figures are displayed full-page, with the caption on
46− top of the image/video */
57+ font-size: 80px;
58+ }
59+ h3 {
60+ margin: 100px 0 50px 100px;
61+ }
62+
63+ ul {
64+ margin: 50px 200px;
65+ }
66+ li > ul {
67+ margin: 15px 50px;
68+ }
69+
70+ p {
71+ margin: 75px;
72+ font-size: 50px;
73+ }
74+
75+ blockquote {
76+ height: 100%;
77+ background-color: black;
78+ color: white;
79+ font-size: 60px;
80+ padding: 50px;
81+ }
82+ blockquote:before {
83+ content: open-quote;
84+ }
85+ blockquote:after {
86+ content: close-quote;
87+ }
88+
89+ /* Figures are displayed full-page, with the caption
90+ on top of the image/video */
4791 figure {
4892 background-color: black;
93+ width: 100%;
94+ height: 100%;
95+ }
96+ figure > * {
97+ position: absolute;
98+ }
99+ figure > img, figure > video {
100+ width: 100%; height: 100%;
49101 }
50102 figcaption {
51103 margin: 70px;
104+ font-size: 50px;
52105 }
106+
53107 footer {
54108 position: absolute;
55109 bottom: 0;
@@ -66,10 +120,20 @@ $else$
66120 https://developer.mozilla.org/en/CSS/CSS_transitions
67121 How to use CSS3 Transitions: */
68122 section {
69− -moz-transition: left 400ms linear 0s;
70− -webkit-transition: left 400ms linear 0s;
71− -ms-transition: left 400ms linear 0s;
72− transition: left 400ms linear 0s;
123+ -moz-transition: left 400ms linear 0s;
124+ -webkit-transition: left 400ms linear 0s;
125+ -ms-transition: left 400ms linear 0s;
126+ transition: left 400ms linear 0s;
127+ }
128+ .view section {
129+ -moz-transition: none;
130+ -webkit-transition: none;
131+ -ms-transition: none;
132+ transition: none;
133+ }
134+
135+ .view section[aria-selected] {
136+ border: 5px red solid;
73137 }
74138
75139 /* Before */
@@ -85,10 +149,17 @@ $else$
85149 .incremental > * { opacity: 1; }
86150
87151 /* The current item */
88− .incremental > *[aria-selected] { color: red; opacity: 1; }
152+ .incremental > *[aria-selected] { opacity: 1; }
89153
90154 /* The items to-be-selected */
91− .incremental > *[aria-selected] ~ * { opacity: 0.2; }
155+ .incremental > *[aria-selected] ~ * { opacity: 0; }
156+
157+ /* The progressbar, at the bottom of the slides, show the global
158+ progress of the presentation. */
159+ #progress-bar {
160+ height: 2px;
161+ background: #AAA;
162+ }
92163</style>
93164$endif$
94165$if(math)$
@@ -105,10 +176,9 @@ $if(title)$
105176$if(subtitle)$
106177 <h1 class="subtitle">$subtitle$</h1>
107178$endif$
108−$for(author)$
109− <h2 class="author">$author$</h2>
110−$endfor$
111− <h3 class="date">$date$</h3>
179+ <footer>
180+ $if(author)$<span class="author">$for(author)$$author$$sep$, $endfor$</span>$endif$ · $if(date)$<span class="date">$date$</span>$endif$
181+ </footer>
112182</section>
113183$endif$
114184$for(include-before)$