From 209b9e9e1c3aa1a1b171953378619f7b46e626b2 Mon Sep 17 00:00:00 2001 From: imakewebthings Date: Thu, 7 Nov 2013 11:02:09 -0800 Subject: [PATCH] Pull print stylesheets into separate file, closes #121 --- boilerplate.html | 27 +++--- core/deck.core.css | 226 ++++++++++++++---------------------------------- core/deck.core.scss | 204 +++++++++++++++---------------------------- core/print.css | 25 ++++++ core/print.scss | 14 +++ introduction/index.html | 47 +++++----- 6 files changed, 212 insertions(+), 331 deletions(-) rewrite core/deck.core.css (65%) rewrite core/deck.core.scss (66%) create mode 100644 core/print.css create mode 100644 core/print.scss diff --git a/boilerplate.html b/boilerplate.html index 88d9ea3..e16b14a 100644 --- a/boilerplate.html +++ b/boilerplate.html @@ -6,24 +6,27 @@ Your deck.js Presentation - + - + - - - - - - + + + + + + - - + + - - + + + + + diff --git a/core/deck.core.css b/core/deck.core.css dissimilarity index 65% index 26d58e8..fa4c371 100644 --- a/core/deck.core.css +++ b/core/deck.core.css @@ -1,162 +1,64 @@ -html, body { - height: 100%; - padding: 0; - margin: 0; -} - -body.deck-container { - overflow-y: auto; - position: static; -} - -.deck-container { - position: relative; - min-height: 100%; - margin: 0 auto; - overflow: hidden; -} -.js .deck-container { - visibility: hidden; -} -.ready .deck-container { - visibility: visible; -} -.touch .deck-container { - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; -} - -.deck-loading { - display: none; -} - -.slide { - width: auto; - min-height: 100%; - position: relative; -} - -.deck-before, .deck-previous, .deck-next, .deck-after { - position: absolute; - left: -999em; - top: -999em; -} - -.deck-current { - z-index: 2; -} - -.slide .slide { - visibility: hidden; - position: static; - min-height: 0; -} - -.deck-child-current { - position: static; - z-index: 2; -} -.deck-child-current .slide { - visibility: hidden; -} -.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current { - visibility: visible; -} - -@media print { - * { - background: transparent !important; - color: black !important; - text-shadow: none !important; - filter: none !important; - -ms-filter: none !important; - -webkit-box-reflect: none !important; - -moz-box-reflect: none !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; - } - * :before, * :after { - display: none !important; - } - - a, a:visited { - color: #444 !important; - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: ""; - } - - pre, blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; - } - - tr, img { - page-break-inside: avoid; - } - - @page { - margin: 0.5cm; -} - - p, h2, h3 { - orphans: 3; - widows: 3; - } - - h2, h3 { - page-break-after: avoid; - } - - .slide { - position: static !important; - visibility: visible !important; - display: block !important; - -webkit-transform: none !important; - -moz-transform: none !important; - -o-transform: none !important; - -ms-transform: none !important; - transform: none !important; - opacity: 1 !important; - } - - h1, .vcenter { - -webkit-transform: none !important; - -moz-transform: none !important; - -o-transform: none !important; - -ms-transform: none !important; - transform: none !important; - padding: 0 !important; - position: static !important; - } - - .deck-container > .slide { - page-break-after: always; - } - - .deck-container { - width: 100% !important; - height: auto !important; - padding: 0 !important; - display: block !important; - } - - script { - display: none; - } -} +html, body { + height: 100%; + padding: 0; + margin: 0; +} + +body.deck-container { + overflow-y: auto; + position: static; +} + +.deck-container { + position: relative; + min-height: 100%; + margin: 0 auto; + overflow: hidden; +} +.js .deck-container { + visibility: hidden; +} +.ready .deck-container { + visibility: visible; +} +.touch .deck-container { + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; +} + +.deck-loading { + display: none; +} + +.slide { + width: auto; + min-height: 100%; + position: relative; +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position: absolute; + left: -999em; + top: -999em; +} + +.deck-current { + z-index: 2; +} + +.slide .slide { + visibility: hidden; + position: static; + min-height: 0; +} + +.deck-child-current { + position: static; + z-index: 2; +} +.deck-child-current .slide { + visibility: hidden; +} +.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current { + visibility: visible; +} diff --git a/core/deck.core.scss b/core/deck.core.scss dissimilarity index 66% index 5ee2282..cfa2d9d 100755 --- a/core/deck.core.scss +++ b/core/deck.core.scss @@ -1,135 +1,69 @@ -html, body { - height:100%; - padding:0; - margin:0; -} - -body.deck-container { - overflow-y:auto; - position:static; -} - -.deck-container { - position:relative; - min-height:100%; - margin:0 auto; - overflow:hidden; - - .js & { - visibility:hidden; - } - - .ready & { - visibility:visible; - } - - .touch & { - -webkit-text-size-adjust:none; - -moz-text-size-adjust:none; - } -} - -.deck-loading { - display:none; -} - -.slide { - width:auto; - min-height:100%; - position:relative; -} - -.deck-before, .deck-previous, .deck-next, .deck-after { - position:absolute; - left:-999em; - top:-999em; -} - -.deck-current { - z-index:2; -} - -.slide .slide { - visibility:hidden; - position:static; - min-height:0; -} - -.deck-child-current { - position:static; - z-index:2; - - .slide { - visibility:hidden; - } - - .deck-previous, .deck-before, .deck-current { - visibility:visible; - } -} - -@media print { - * { - background: transparent !important; - color: black !important; - text-shadow: none !important; - filter:none !important; - -ms-filter: none !important; - -webkit-box-reflect:none !important; - -moz-box-reflect:none !important; - -webkit-box-shadow:none !important; - -moz-box-shadow:none !important; - box-shadow:none !important; - - :before, :after { - display:none !important; - } -} - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } - - .slide { - position:static !important; - visibility:visible !important; - display:block !important; - -webkit-transform:none !important; - -moz-transform:none !important; - -o-transform:none !important; - -ms-transform:none !important; - transform:none !important; - opacity:1 !important; - } - - h1, .vcenter { - -webkit-transform:none !important; - -moz-transform:none !important; - -o-transform:none !important; - -ms-transform:none !important; - transform:none !important; - padding:0 !important; - position:static !important; - } - - .deck-container > .slide { - page-break-after: always; - } - - .deck-container { - width:100% !important; - height:auto !important; - padding:0 !important; - display:block !important; - } - - script { - display:none; - } -} +html, body { + height:100%; + padding:0; + margin:0; +} + +body.deck-container { + overflow-y:auto; + position:static; +} + +.deck-container { + position:relative; + min-height:100%; + margin:0 auto; + overflow:hidden; + + .js & { + visibility:hidden; + } + + .ready & { + visibility:visible; + } + + .touch & { + -webkit-text-size-adjust:none; + -moz-text-size-adjust:none; + } +} + +.deck-loading { + display:none; +} + +.slide { + width:auto; + min-height:100%; + position:relative; +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position:absolute; + left:-999em; + top:-999em; +} + +.deck-current { + z-index:2; +} + +.slide .slide { + visibility:hidden; + position:static; + min-height:0; +} + +.deck-child-current { + position:static; + z-index:2; + + .slide { + visibility:hidden; + } + + .deck-previous, .deck-before, .deck-current { + visibility:visible; + } +} \ No newline at end of file diff --git a/core/print.css b/core/print.css new file mode 100644 index 0000000..0230f4c --- /dev/null +++ b/core/print.css @@ -0,0 +1,25 @@ +body { + font-size: 18pt; +} + +h1 { + font-size: 48pt; +} + +h2 { + font-size: 36pt; +} + +h3 { + font-size: 28pt; +} + +pre { + border: 1px solid #000; + padding: 10px; + white-space: pre-wrap; +} + +.deck-container > .slide { + page-break-after: always; +} diff --git a/core/print.scss b/core/print.scss new file mode 100644 index 0000000..02acd4b --- /dev/null +++ b/core/print.scss @@ -0,0 +1,14 @@ +body { font-size:18pt; } +h1 { font-size:48pt; } +h2 { font-size:36pt; } +h3 { font-size:28pt; } + +pre { + border:1px solid #000; + padding:10px; + white-space:pre-wrap; +} + +.deck-container > .slide { + page-break-after: always; +} diff --git a/introduction/index.html b/introduction/index.html index 71d7c04..135d678 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -6,28 +6,31 @@ - + Getting Started with deck.js - + - + - - - - - - - - + + + + + + + + - - + + - - + + + + + @@ -87,12 +90,12 @@

Extensions

Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

- + - +

Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.

@@ -122,13 +125,13 @@

That last slide had a few steps. To create substeps in slides, just nest them:

<section class="slide">
   <h2>Extensions</h2>
-  <p>Core gives you basic slide functionality...</p>		
+  <p>Core gives you basic slide functionality...</p>
   <ul>
      <li class="slide">
         <h3>deck.goto</h3>
         <p>Adds a shortcut key to jump to any slide number...</p>
      </li>
-     <li class="slide">...</li>	
+     <li class="slide">...</li>
      <li class="slide">...</li>
      <li class="slide">...</li>
   </ul>
@@ -157,9 +160,9 @@
 

 	
Other Elements: Video Embeds

 	
Embed videos from your favorite online video service or with an HTML5 video element.

-	
+
 	
-	
+
 	
<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

 

 
-- 
2.11.4.GIT