Pull print stylesheets into separate file, closes #121

imakewebthings · Nov 7, 2013 · 209b9e9 · 209b9e9
1 parent 09b7247
commit 209b9e9
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 199 deletions.
diff --git a/boilerplate.html b/boilerplate.html
@@ -6,24 +6,27 @@
 	<meta name="viewport" content="width=1024, user-scalable=no">
 
 	<title>Your deck.js Presentation</title>
-	
+
 	<!-- Required stylesheet -->
 	<link rel="stylesheet" href="core/deck.core.css">
-	
+
 	<!-- Extension CSS files go here. Remove or add as needed. -->
-	<link rel="stylesheet" href="extensions/goto/deck.goto.css">
-	<link rel="stylesheet" href="extensions/menu/deck.menu.css">
-	<link rel="stylesheet" href="extensions/navigation/deck.navigation.css">
-	<link rel="stylesheet" href="extensions/status/deck.status.css">
-	<link rel="stylesheet" href="extensions/hash/deck.hash.css">
-	<link rel="stylesheet" href="extensions/scale/deck.scale.css">
+	<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
+	<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
+	<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
+	<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
+	<link rel="stylesheet" media="screen" href="extensions/hash/deck.hash.css">
+	<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">
 
 	<!-- Style theme. More available in /themes/style/ or create your own. -->
-	<link rel="stylesheet" href="themes/style/web-2.0.css">
-	
+	<link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">
+
 	<!-- Transition theme. More available in /themes/transition/ or create your own. -->
-	<link rel="stylesheet" href="themes/transition/horizontal-slide.css">
-
+	<link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">
+
+	<!-- Basic black and white print styles -->
+	<link rel="stylesheet" media="print" href="core/print.css">
+
 	<!-- Required Modernizr file -->
 	<script src="modernizr.custom.js"></script>
 </head>

diff --git a/core/deck.core.css b/core/deck.core.css
@@ -62,101 +62,3 @@ body.deck-container {
 .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;
-  }
-}
diff --git a/core/deck.core.scss b/core/deck.core.scss
@@ -66,70 +66,4 @@ body.deck-container {
 	.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;
-	}
-}
+}
diff --git a/core/print.css 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
@@ -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
@@ -6,28 +6,31 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	
+
 	<title>Getting Started with deck.js</title>
-	
+
 	<meta name="description" content="A jQuery library for modern HTML presentations">
 	<meta name="author" content="Caleb Troughton">
 	<meta name="viewport" content="width=1024, user-scalable=no">
-	
+
 	<!-- Core and extension CSS files -->
-	<link rel="stylesheet" href="../core/deck.core.css">
-	<link rel="stylesheet" href="../extensions/goto/deck.goto.css">
-	<link rel="stylesheet" href="../extensions/menu/deck.menu.css">
-	<link rel="stylesheet" href="../extensions/navigation/deck.navigation.css">
-	<link rel="stylesheet" href="../extensions/status/deck.status.css">
-	<link rel="stylesheet" href="../extensions/hash/deck.hash.css">
-	<link rel="stylesheet" href="../extensions/scale/deck.scale.css">
-	
+	<link rel="stylesheet" media="screen" href="../core/deck.core.css">
+	<link rel="stylesheet" media="screen" href="../extensions/goto/deck.goto.css">
+	<link rel="stylesheet" media="screen" href="../extensions/menu/deck.menu.css">
+	<link rel="stylesheet" media="screen" href="../extensions/navigation/deck.navigation.css">
+	<link rel="stylesheet" media="screen" href="../extensions/status/deck.status.css">
+	<link rel="stylesheet" media="screen" href="../extensions/hash/deck.hash.css">
+	<link rel="stylesheet" media="screen" href="../extensions/scale/deck.scale.css">
+
 	<!-- Style theme. More available in /themes/style/ or create your own. -->
-	<link rel="stylesheet" href="../themes/style/web-2.0.css">
-	
+	<link rel="stylesheet" media="screen" href="../themes/style/web-2.0.css">
+
 	<!-- Transition theme. More available in /themes/transition/ or create your own. -->
-	<link rel="stylesheet" href="../themes/transition/horizontal-slide.css">
-
+	<link rel="stylesheet" media="screen" href="../themes/transition/horizontal-slide.css">
+
+	<!-- Basic black and white print styles -->
+	<link rel="stylesheet" media="print" href="../core/print.css">
+
 	<script src="../modernizr.custom.js"></script>
 </head>
 
@@ -87,12 +90,12 @@ <h2>Transition Themes</h2>
 <section class="slide" id="extensions">
 	<h2>Extensions</h2>
 	<p>Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this&nbsp;deck:</p>
-	
+
 	<ul>
 		<li class="slide" id="extensions-goto">
 			<strong>deck.goto</strong>: Adds a shortcut key to jump to any slide number.  Hit g, type in the slide number, and hit&nbsp;enter.
 		</li>
-		
+
 		<li class="slide" id="extensions-hash">
 			<strong>deck.hash</strong>: Enables internal linking within slides, deep linking to individual slides, and updates the address bar &amp; a permalink anchor with each slide&nbsp;change.
 		</li>
@@ -113,7 +116,7 @@ <h2>Extensions</h2>
 			<strong>deck.scale</strong>: Scales each slide to fit within the deck container using CSS Transforms for those browsers that support them.
 		</li>
 	</ul>
-	
+
 	<p class="slide" id="extension-folders">Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML&nbsp;files. For a complete list of extension modules included in deck.js, check out the&nbsp;<a href="http://imakewebthings.github.com/deck.js/docs">documentation</a>.</p>
 </section>
 
@@ -122,13 +125,13 @@ <h2>Nested Slides</h2>
 	<p>That last slide had a few steps.  To create substeps in slides, just nest them:</p>
 	<pre><code>&lt;section class=&quot;slide&quot;&gt;
   &lt;h2&gt;Extensions&lt;/h2&gt;
-  &lt;p&gt;Core gives you basic slide functionality...&lt;/p&gt;		
+  &lt;p&gt;Core gives you basic slide functionality...&lt;/p&gt;
   &lt;ul&gt;
      &lt;li class=&quot;slide&quot;&gt;
         &lt;h3&gt;deck.goto&lt;/h3&gt;
         &lt;p&gt;Adds a shortcut key to jump to any slide number...&lt;/p&gt;
      &lt;/li&gt;
-     &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;	
+     &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
      &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
      &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
   &lt;/ul&gt;
@@ -157,9 +160,9 @@ <h2>Other Elements: Blockquotes</h2>
 <section class="slide" id="elements-videos">
 	<h2>Other Elements: Video Embeds</h2>
 	<p>Embed videos from your favorite online video service or with an HTML5 video&nbsp;element.</p>
-	
+
 	<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
-	
+
 	<pre><code>&lt;iframe src=&quot;http://player.vimeo.com/video/1063136?title=0&amp;amp;byline=0&amp;amp;portrait=0&quot; width=&quot;400&quot; height=&quot;225&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;</code></pre>
 </section>