From d5e1f7e493fac61fcda5641397dacc0e079a74da Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 5 May 2012 11:51:14 -0400 Subject: [PATCH] print styles (closes #19) --- README.md | 1 + css/main.css | 2 - css/print.css | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 4 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 css/print.css diff --git a/README.md b/README.md index 12ca7e4..83b58b6 100644 --- 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 5706a35..e89f7ca 100644 --- 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 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 f314cdb..6ffa93b 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ +