forked from paulrouget/dzslides
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Joseph Reagle
committed
Jun 25, 2012
1 parent
593d111
commit e61522e
Showing
4 changed files
with
506 additions
and
202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,235 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| $for(author-meta)$ | ||
| <meta name="author" content="$author-meta$" /> | ||
| $endfor$ | ||
| $if(date-meta)$ | ||
| <meta name="dcterms.date" content="$date-meta$" /> | ||
| $endif$ | ||
| <title>$if(title-prefix)$$title-prefix$ - $endif$$if(pagetitle)$$pagetitle$$endif$</title> | ||
| $if(highlighting-css)$ | ||
| <style type="text/css"> | ||
| $highlighting-css$ | ||
| </style> | ||
| $endif$ | ||
| $if(css)$ | ||
| $for(css)$ | ||
| <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/> | ||
| $endfor$ | ||
| $else$ | ||
| $endif$ | ||
| $if(math)$ | ||
| $math$ | ||
| $endif$ | ||
| $for(header-includes)$ | ||
| $header-includes$ | ||
| $endfor$ | ||
| </head> | ||
| <body> | ||
| $if(title)$ | ||
| <section> | ||
| <h1 class="title">$title$</h1> | ||
| <h3 class="date">$date$</h3> | ||
| $for(author)$ | ||
| <footer class="author">$author$</footer> | ||
| $endfor$ | ||
| </section> | ||
| $endif$ | ||
| $for(include-before)$ | ||
| $include-before$ | ||
| $endfor$ | ||
| $body$ | ||
| $for(include-after)$ | ||
| $include-after$ | ||
| $endfor$ | ||
|
|
||
| <!-- Reagle Class Style --> | ||
| <!-- Define the style of your presentation --> | ||
|
|
||
| <!-- Maybe a font from http://www.google.com/webfonts ? --> | ||
| <!-- <link href='http://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: 40px; | ||
| } | ||
|
|
||
| .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 and h2 are "centered" (180px down) Takahashi style */ | ||
| h1, h2 { | ||
| padding-top: 150px; | ||
| text-align: center; | ||
| font-size: 70px; | ||
| } | ||
| /* Whereas h2 is Black Takashi and can't take any children since 100% height */ | ||
| h2 { | ||
| height: 100%; | ||
| background-color: black; | ||
| color: white; | ||
| } | ||
| /* h1 can take children and become a traditional slide */ | ||
| h1:not(:only-child) { | ||
| margin-top: -150px; /* at top of slide */ | ||
| } | ||
|
|
||
| h3 { | ||
| margin: 100px 0 50px 75px; | ||
| } | ||
|
|
||
| p { | ||
| margin: 25px; | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| ul { | ||
| margin: 50px 0px 0px 100px; | ||
| font-size: 90%; | ||
| } | ||
|
|
||
| /* vertically "center" only children */ | ||
| section > p:only-child, section > ul:only-child, section > ol:only-child, | ||
| section > blockquote:only-child, section > iframe:only-child { | ||
| margin-top: 120px; | ||
| } | ||
|
|
||
| iframe, video, object{ | ||
| display:block; | ||
| padding: 0px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| blockquote { | ||
| width: 80%; | ||
| margin: 5px auto; | ||
| padding: 5px; | ||
| font-style: italic; | ||
| background: #f0f0f0; | ||
| border: 1px solid #e0e0e0; | ||
| } | ||
|
|
||
| /* Images within a paragraph are floated to either side for variety */ | ||
| section:nth-child(odd) > p:not(:only-child) > img { | ||
| float: right; | ||
| margin-top: 50px; | ||
| } | ||
| section:nth-child(even) > p:not(:only-child) > img { | ||
| float: left; | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
| /* Lone images (or with a header) are centered*/ | ||
| p:last-child > img:only-child { | ||
| display: block; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| h1 + p:last-child > img:only-child { | ||
| display: block; | ||
| float: none; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
|
|
||
| /* 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 { | ||
| bottom: 50px; | ||
| margin-left: 20px; | ||
| font-size: 50px; | ||
| color: white; text-shadow: black 0.1em 0.1em 0.2em; | ||
| } | ||
|
|
||
| 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. */ | ||
| /* This doesn't really look right with black slides - reagle */ | ||
| #progress-bar { | ||
| height: 2px; | ||
| background: #AAA; | ||
| } | ||
| </style> | ||
|
|
||
| $dzslides-core$ | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,10 @@ | ||
| ## Basic usage | ||
|
|
||
| **DZSlides** is a **one-file** HTML template to build slides in HTML5 and CSS3. | ||
| This fork of dzslides includes a default `template.html` with a much wider range of slides types (e.g., traditional, Takahashi black and white; images with shadowed overlay, centered, floated left and right, etc.) | ||
|
|
||
| [template.html](/paulrouget/dzslides/blob/master/template.html) is the only file you need. Edit the file, add your content, change the style, and you're done. To see the slides in action, just load | ||
| the file in your browser. | ||
| Furthermore, this template is trivially generated from a markdown file (`template.md`) using pandoc and *its* template `class.dzslides`. (**WARNING**: You must remove empty H1s (<h1></h1>) until this is fixed upstream; this is easy to do with `sed`.) | ||
|
|
||
| ## Features | ||
| ~~~~ | ||
| * Slides can include any HTML5 content (text, image, video, iframes, …); | ||
| * Slides transitions are animated with CSS3 (sliding by default); | ||
| * Resolution independent (slides are scaled according to the size of the browser. The virtual dimension is 800x600); | ||
| * Fullscreen presentation (HTML5 FullScreen API supported) - press `f` to go fullscreen; | ||
| * Incremental content; | ||
| * Mobile Friendly (supports touch events). | ||
| pandoc --template=class.dzslides -t dzslides template.md | sed '/<h1><\/h1>/d' > template.html | ||
| ## Shells | ||
|
|
||
| The features of DZSlides are intentionally limited to keep the template light | ||
| and simple to understand. *Shells* are extensions that bring new features | ||
| to your slides. Here, you'll find 2 shells: | ||
|
|
||
| * `shells/embedder.html` to embed a presentation in a web page | ||
| * `shells/onstage.html` to show your slides with a control panel | ||
|
|
||
| To use them, just load the file in your browser, and follow the instructions. | ||
|
|
||
| ## Specifications | ||
|
|
||
| When you press the `left` and `right` keys, you go forward and go back in your slides. | ||
| But the slides can also respond to external messages. Messages can be sent through [postMessage](https://developer.mozilla.org/en/DOM/window.postMessage). | ||
| So another web page can control the slides. | ||
|
|
||
| ### Protocol | ||
|
|
||
| A `cursor` is a string of this form: `3.5`. The first number represent the current slide index. The second number represent the current sub-item index. | ||
|
|
||
| Parameters must be escaped. | ||
|
|
||
| *** | ||
|
|
||
| Messages a DZSlides page can receive: | ||
|
|
||
| * `REGISTER` register the source of the message as a target to notify for any events; | ||
| * `FORWARD` move forward in the slides; | ||
| * `BACK` move back in the slides; | ||
| * `START` move to the first slide; | ||
| * `END` move to the last slide; | ||
| * `SET_CURSOR cursor` jump to the cursor; | ||
| * `GET_CURSOR` notify the source of the message of the current cursor; | ||
| * `TOGGLE_CONTENT` toggle the current slide content; | ||
| * `GET_NOTES cursor` notify the source of the message of the current notes content. | ||
|
|
||
| Messages a DZSlides page can send: | ||
|
|
||
| * `CURSOR cursor` sent to one target as a response to `GET_CURSOR`, and sent to all the registered target when updated; | ||
| * `REGISTERED slides_title slides_count` sent to one target as a response to `REGISTER`; | ||
| * `NOTES html_content` sent to one target as a response to `GET_NOTES`. | ||
|
|
||
| *** | ||
|
|
||
| ### Hash parameters | ||
|
|
||
| * `url¶1=va1` | ||
|
|
||
| Parameters a DZSlides page can have: | ||
|
|
||
| * `autoplay` (integer, values : `0`/`1`, default : `1`) sets whether multimedia contents (audio, video) should be played automatically. | ||
|
|
||
| ## License | ||
|
|
||
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | ||
| Version 2, December 2004 | ||
|
|
||
| Everyone is permitted to copy and distribute verbatim or modified | ||
| copies of this license document, and changing it is allowed as long | ||
| as the name is changed. | ||
|
|
||
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | ||
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | ||
|
|
||
| 0. You just DO WHAT THE FUCK YOU WANT TO. | ||
| ~~~~ |
Oops, something went wrong.