<!DOCTYPE html> <head$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$> <meta charset="utf-8"> <meta name="generator" content="pandoc"> $for(author-meta)$ <meta name="author" content="$author-meta$"> $endfor$ $if(date-meta)$ <meta name="dcterms.date" content="$date-meta$"> $endif$ $if(keywords)$ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$"> $endif$ <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title> <style type="text/css"> code{white-space: pre-wrap;} .smallcaps{font-variant: small-caps;} .column{display: inline-block;} $if(quotes)$ q { quotes: "“" "”" "‘" "’"; } $endif$ </style> $if(highlighting-css)$ <style type="text/css"> $highlighting-css$ </style> $endif$ $if(css)$ $for(css)$ <link rel="stylesheet" href="$css$"> $endfor$ $else$ <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> <style> html, .view body { background-color: black; counter-reset: slideidx; } body, .view section { background-color: white; border-radius: 12px } /* A section is a slide. It's size is 800x600, and this will never change */ section, .view head > title { /* The font from Google */ font-family: 'Oswald', arial, serif; font-size: 30px; } .view section:after { counter-increment: slideidx; content: counter(slideidx, decimal-leading-zero); position: absolute; bottom: -80px; right: 100px; color: white; } .view head > title { color: white; text-align: center; margin: 1em 0 1em 0; } h1, h2 { margin-top: 200px; text-align: center; font-size: 80px; } h3 { margin: 100px 0 50px 100px; } ul { margin: 50px 200px; } li > ul { margin: 15px 50px; } p { margin: 75px; font-size: 50px; } blockquote { height: 100%; background-color: black; color: white; font-size: 60px; padding: 50px; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } /* Figures are displayed full-page, with the caption on top of the image/video */ figure { background-color: black; width: 100%; height: 100%; } figure > * { position: absolute; } figure > img, figure > video { width: 100%; height: 100%; } figcaption { margin: 70px; font-size: 50px; } footer { position: absolute; bottom: 0; width: 100%; padding: 40px; text-align: right; background-color: #F3F4F8; border-top: 1px solid #CCC; } /* Transition effect */ /* Feel free to change the transition effect for original animations. See here: https://developer.mozilla.org/en/CSS/CSS_transitions How to use CSS3 Transitions: */ section { -moz-transition: left 400ms linear 0s; -webkit-transition: left 400ms linear 0s; -ms-transition: left 400ms linear 0s; transition: left 400ms linear 0s; } .view section { -moz-transition: none; -webkit-transition: none; -ms-transition: none; transition: none; } .view section[aria-selected] { border: 5px red solid; } /* Before */ section { left: -150%; } /* Now */ section[aria-selected] { left: 0; } /* After */ section[aria-selected] ~ section { left: +150%; } /* Incremental elements */ /* By default, visible */ .incremental > * { opacity: 1; } /* The current item */ .incremental > *[aria-selected] { opacity: 1; } /* The items to-be-selected */ .incremental > *[aria-selected] ~ * { opacity: 0; } /* The progressbar, at the bottom of the slides, show the global progress of the presentation. */ #progress-bar { height: 2px; background: #AAA; } </style> $endif$ $if(math)$ $math$ $endif$ $for(header-includes)$ $header-includes$ $endfor$ </head> <body> $if(title)$ <section class="title"> <h1 class="title">$title$</h1> $if(subtitle)$ <h1 class="subtitle">$subtitle$</h1> $endif$ <footer> $if(author)$<span class="author">$for(author)$$author$$sep$, $endfor$</span>$endif$ · $if(date)$<span class="date">$date$</span>$endif$ </footer> </section> $endif$ $if(toc)$ <section id="$idprefix$TOC"> $table-of-contents$ </section> $endif$ $for(include-before)$ $include-before$ $endfor$ $body$ $for(include-after)$ $include-after$ $endfor$ $dzslides-core$ </body> </html>