-
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.
Add handling for optional scale property. Moved css out of the templa…
…te and into a new stylesheet that's based on impress.js' default CSS
- Loading branch information
Showing
2 changed files
with
449 additions
and
113 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,328 @@ | ||
| /** | ||
| * This is a stylesheet for a demo presentation for impress.js | ||
| * | ||
| * It is not meant to be a part of impress.js and is not required by impress.js. | ||
| * I expect that anyone creating a presentation for impress.js would create their own | ||
| * set of styles. | ||
| */ | ||
|
|
||
|
|
||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
|
|
||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, | ||
| footer, header, hgroup, menu, nav, section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
|
|
||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
|
|
||
| body { | ||
| font-family: 'PT Sans', sans-serif; | ||
|
|
||
| min-height: 740px; | ||
|
|
||
| background: rgb(215, 215, 215); | ||
| background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); | ||
| background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
| background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
| background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
| background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | ||
|
|
||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| b, strong { font-weight: bold } | ||
| i, em { font-style: italic} | ||
|
|
||
| a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| padding: 0 0.1em; | ||
| background: rgba(255,255,255,0.5); | ||
| text-shadow: -1px -1px 2px rgba(100,100,100,0.9); | ||
| border-radius: 0.2em; | ||
|
|
||
| -webkit-transition: 0.5s; | ||
| -moz-transition: 0.5s; | ||
| -ms-transition: 0.5s; | ||
| -o-transition: 0.5s; | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| a:hover { | ||
| background: rgba(255,255,255,1); | ||
| text-shadow: -1px -1px 2px rgba(100,100,100,0.5); | ||
| } | ||
|
|
||
| /* enable clicking on elements 'hiding' behind body in 3D */ | ||
| body { pointer-events: none; } | ||
| #impress { pointer-events: auto; } | ||
|
|
||
| /* COMMON STEP STYLES */ | ||
|
|
||
| .step { | ||
| width: 900px; | ||
| padding: 40px; | ||
|
|
||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| -ms-box-sizing: border-box; | ||
| -o-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
|
|
||
| font-family: 'PT Serif', georgia, serif; | ||
|
|
||
| font-size: 48px; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| /* fade out inactive slides */ | ||
|
|
||
| .step { | ||
| -webkit-transition: opacity 1s; | ||
| -moz-transition: opacity 1s; | ||
| -ms-transition: opacity 1s; | ||
| -o-transition: opacity 1s; | ||
| transition: opacity 1s; | ||
| } | ||
|
|
||
| .step:not(.active) { | ||
| opacity: 0.3; | ||
| } | ||
|
|
||
| /* STEP SPECIFIC STYLES */ | ||
|
|
||
| /* hint on the first slide */ | ||
|
|
||
| .hint { | ||
| position: fixed; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 200px; | ||
|
|
||
| background: rgba(0,0,0,0.5); | ||
| color: #EEE; | ||
| text-align: center; | ||
|
|
||
| font-size: 50px; | ||
| padding: 20px; | ||
|
|
||
| z-index: 100; | ||
|
|
||
| opacity: 0; | ||
|
|
||
| -webkit-transform: translateY(400px); | ||
| -moz-transform: translateY(400px); | ||
| -ms-transform: translateY(400px); | ||
| -o-transform: translateY(400px); | ||
| transform: translateY(400px); | ||
|
|
||
| -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; | ||
| -moz-transition: opacity 1s, -moz-transform 0.5s 1s; | ||
| -ms-transition: opacity 1s, -ms-transform 0.5s 1s; | ||
| -o-transition: opacity 1s, -o-transform 0.5s 1s; | ||
| transition: opacity 1s, transform 0.5s 1s; | ||
| } | ||
|
|
||
| .impress-on-bored .hint { | ||
| opacity: 1; | ||
|
|
||
| -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s; | ||
| -moz-transition: opacity 1s 5s, -moz-transform 0.5s; | ||
| -ms-transition: opacity 1s 5s, -ms-transform 0.5s; | ||
| -o-transition: opacity 1s 5s, -o-transform 0.5s; | ||
| transition: opacity 1s 5s, transform 0.5s; | ||
|
|
||
| -webkit-transform: translateY(0px); | ||
| -moz-transform: translateY(0px); | ||
| -ms-transform: translateY(0px); | ||
| -o-transform: translateY(0px); | ||
| transform: translateY(0px); | ||
| } | ||
|
|
||
| /* impress.js title */ | ||
|
|
||
| #title { | ||
| padding: 0; | ||
| } | ||
|
|
||
| #title .try { | ||
| font-size: 64px; | ||
| position: absolute; | ||
| top: -0.5em; | ||
| left: 1.5em; | ||
|
|
||
| -webkit-transform: translateZ(20px); | ||
| -moz-transform: translateZ(20px); | ||
| -ms-transform: translateZ(20px); | ||
| -o-transform: translateZ(20px); | ||
| transform: translateZ(20px); | ||
| } | ||
|
|
||
| #title h1 { | ||
| font-size: 190px; | ||
|
|
||
| -webkit-transform: translateZ(50px); | ||
| -moz-transform: translateZ(50px); | ||
| -ms-transform: translateZ(50px); | ||
| -o-transform: translateZ(50px); | ||
| transform: translateZ(50px); | ||
| } | ||
|
|
||
| #title .footnote { | ||
| font-size: 32px; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| * SLIDE STEP STYLES | ||
| * | ||
| * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css | ||
| * | ||
| * ;) | ||
| */ | ||
|
|
||
| .slide { | ||
| display: block; | ||
|
|
||
| width: 900px; | ||
| height: 700px; | ||
|
|
||
| padding: 40px 60px; | ||
|
|
||
| border-radius: 10px; | ||
|
|
||
| background-color: white; | ||
|
|
||
| box-shadow: 0 2px 6px rgba(0, 0, 0, .1); | ||
| border: 1px solid rgba(0, 0, 0, .3); | ||
|
|
||
| font-family: 'Open Sans', Arial, sans-serif; | ||
|
|
||
| color: rgb(102, 102, 102); | ||
| text-shadow: 0 2px 2px rgba(0, 0, 0, .1); | ||
|
|
||
| font-size: 30px; | ||
| line-height: 36px; | ||
|
|
||
| letter-spacing: -1px; | ||
| } | ||
|
|
||
| .slide q { | ||
| display: block; | ||
| font-size: 50px; | ||
| line-height: 72px; | ||
|
|
||
| margin-top: 100px; | ||
| } | ||
|
|
||
| .slide q strong { | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
|
|
||
| /* IMPRESS NOT SUPPORTED STYLES */ | ||
|
|
||
| .fallback-message { | ||
| font-family: sans-serif; | ||
| line-height: 1.3; | ||
|
|
||
| display: none; | ||
| width: 780px; | ||
| padding: 10px 10px 0; | ||
| margin: 20px auto; | ||
|
|
||
| border-radius: 10px; | ||
| border: 1px solid #E4C652; | ||
| background: #EEDC94; | ||
| } | ||
|
|
||
| .fallback-message p { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .impress-not-supported .step { | ||
| position: relative; | ||
| opacity: 1; | ||
| margin: 20px auto; | ||
| } | ||
|
|
||
| .impress-not-supported .fallback-message { | ||
| display: block; | ||
| } | ||
|
|
||
| /* */ | ||
| .step h3 { | ||
| font-size: 1.8em; | ||
| line-height: 1.1em; | ||
| border-bottom: 0.1em dotted #ccc; | ||
| margin: 0 0 0.3em 0; | ||
| } | ||
| .step p { | ||
| margin: 0.3em 0 0.3em 0; | ||
| } | ||
|
|
||
| .slide-body li { | ||
| margin: 0 0 0 0.7em; | ||
| padding-left: 0.3em; | ||
| list-style-type: disc; | ||
| padding-bottom: 0.2em; | ||
| } | ||
| .slide-body pre { | ||
| white-space: pre-wrap; /* CSS3 browsers */ | ||
| white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */ | ||
| white-space: -pre-wrap; /* Opera 4 thru 6 */ | ||
| white-space: -o-pre-wrap; /* Opera 7 and up */ | ||
| word-wrap: break-word; /* IE 5.5+ and up */ | ||
| margin: 0 0 0.3em 0; | ||
| line-height: 1em; | ||
| font-size: 0.8em; | ||
| font-weight: bold; | ||
| } | ||
| .slide-body pre > code { | ||
| color: #030; | ||
| font-family: "Courier New", courier, monospace; | ||
| } |
Oops, something went wrong.