print styles (closes #19)

diff --git a/README.md b/README.md
index 12ca7e403d1ea3b4531364064aef70cbe69b985a..83b58b61718b86ba79dfd4561ca581a210db3fa7 100644 (file)
--- a/README.md
+++ b/README.md
@@ -118,6 +118,7 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 - Fixed IE9 fallback
 - Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener)
 - Added 'slidechanged' event
+- Added print styles. Thanks [skypanther](https://github.com/skypanther)
 
 #### 1.2
 

diff --git a/css/main.css b/css/main.css
index 5706a35cd35a631430476c8468e80971f29c5015..e89f7ca4c6135e999ce20905c37de99e52fc6ff9 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -236,7 +236,6 @@ html {
        
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
           -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-            -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        
        -webkit-transition: all .2s linear;
@@ -252,7 +251,6 @@ html {
                
                -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
                   -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-                    -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
                        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
        }
 

diff --git a/css/print.css b/css/print.css
new file mode 100644 (file)
index 0000000..c786075
--- /dev/null
+++ b/css/print.css
@@ -0,0 +1,161 @@
+/* Default Print Stylesheet Template
+   by Rob Glazebrook of CSSnewbie.com
+   Last Updated: June 4, 2008
+
+   Feel free (nay, compelled) to edit, append, and 
+   manipulate this file as you see fit. */
+
+
+/* SECTION 1: Set default width, margin, float, and
+   background. This prevents elements from extending 
+   beyond the edge of the printed page, and prevents
+   unnecessary background images from printing */
+body {
+       background: #fff url(none);
+       font-size: 13pt;
+       width: auto;
+       height: auto;
+       border: 0;
+       margin: 0 5%;
+       padding: 0;
+       float: none !important;
+       overflow: visible;
+}
+html {
+       background: #fff;
+       width: auto;
+       height: auto;
+       overflow: visible;
+}
+
+/* SECTION 2: Remove any elements not needed in print. 
+   This would include navigation, ads, sidebars, etc. */
+.nestedarrow, 
+.controls a, 
+#reveal .progress span, 
+#reveal.overview {
+       display:none;
+}
+
+/* SECTION 3: Set body font face, size, and color.
+   Consider using a serif font for readability. */
+body, p, td, li, div, a {
+       font-size: 13pt;
+       font-family: Georgia, "Times New Roman", Times, serif !important;
+       color: #000; 
+}
+
+/* SECTION 4: Set heading font face, sizes, and color.
+   Diffrentiate your headings from your body text.
+   Perhaps use a large sans-serif for distinction. */
+h1,h2,h3,h4,h5,h6 {
+       color: #000!important;
+       height: auto;
+       line-height: normal;
+       font-family: Georgia, "Times New Roman", Times, serif !important;
+       text-shadow: 0 0 0 #000 !important;
+       text-align: left;
+       letter-spacing: normal;
+}
+/* Need to reduce the size of the fonts for printing */
+h1 { font-size: 26pt !important;  }
+h2 { font-size: 22pt !important; }
+h3 { font-size: 20pt !important; }
+h4 { font-size: 20pt !important; font-variant: small-caps; }
+h5 { font-size: 19pt !important; }
+h6 { font-size: 18pt !important; font-style: italic; }
+
+/* SECTION 5: Make hyperlinks more usable.
+   Ensure links are underlined, and consider appending
+   the URL to the end of the link for usability. */
+a:link, 
+a:visited {
+       color: #000 !important;
+       font-weight: bold;
+       text-decoration: underline;
+}
+#reveal a:link:after, 
+#reveal a:visited:after {
+       content: " (" attr(href) ") ";
+       color: #222 !important;
+       font-size: 90%;
+}
+
+
+/* SECTION 6: more reveal.js specific additions by @skypanther */
+ul, ol, div, p {
+       visibility: visible;
+       position: static;
+       width: auto;
+       height: auto;
+       display: block;
+       overflow: visible;
+       margin: auto;
+       text-align: left !important;
+}
+#reveal .slides {
+       position: static;
+       width: auto;
+       height: auto;
+
+       left: auto;
+       top: auto;
+       margin-left: auto;
+       margin-top: auto;
+       padding: auto;
+
+       overflow: visible;
+       display: block;
+
+       text-align: center;
+       -webkit-perspective: none;
+          -moz-perspective: none;
+           -ms-perspective: none;
+               perspective: none;
+
+       -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+          -moz-perspective-origin: 50% 50%;
+           -ms-perspective-origin: 50% 50%;
+               perspective-origin: 50% 50%;
+}
+#reveal .slides>section, #reveal .slides>section>section, 
+#reveal .slides>section.past, #reveal .slides>section.future {
+       visibility: visible;
+       position: static;
+       width: 90%;
+       height: auto;
+       display: block;
+       overflow: visible;
+
+       left: 0%;
+       top: 0%;
+       margin-left: 0px;
+       margin-top: 0px;
+       padding: 20px 0px;
+
+       opacity: 1;
+
+       -webkit-transform-style: flat;
+          -moz-transform-style: flat;
+           -ms-transform-style: flat;
+               transform-style: flat;
+
+       -webkit-transform: none;
+          -moz-transform: none;
+           -ms-transform: none;
+               transform: none;
+}
+section {
+       page-break-after: always !important; 
+       display: block !important;
+}
+section.stack {
+       page-break-after: avoid !important; 
+}
+#reveal section img {
+       display: block;
+       margin: 15px 0px;
+       background: rgba(255,255,255,1);
+       border: 1px solid #666;
+       box-shadow: none;
+}
\ No newline at end of file

diff --git a/index.html b/index.html
index f314cdb5d836686253a1838ad44c4eb94e853de9..6ffa93b980d8cd9193bda68ac6908c9df6ac4fca 100644 (file)
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
                
                <link rel="stylesheet" href="css/reset.css">
                <link rel="stylesheet" href="css/main.css">
+               <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
 
                <link rel="stylesheet" href="lib/zenburn.css">
        </head>