diff options
author | Chris Coyier <chriscoyier@gmail.com> | 2015-10-07 16:58:48 +0300 |
---|---|---|
committer | Chris Coyier <chriscoyier@gmail.com> | 2015-10-07 16:58:48 +0300 |
commit | 0b14e434586040487ec6e4b58c906189eb550fe8 (patch) | |
tree | 86af62f3a72f115e10ed66800d50b7e1808f20bc | |
parent | e1291c61c151ff89f70b3adee0b079e43f42b1df (diff) |
demo page updates
-rw-r--r-- | demo/css/style.css | 28 | ||||
-rw-r--r-- | index.html | 19 | ||||
-rw-r--r-- | src/bookmarklet/index.html | 19 |
3 files changed, 36 insertions, 30 deletions
diff --git a/demo/css/style.css b/demo/css/style.css index 75a1e13..382f1f9 100644 --- a/demo/css/style.css +++ b/demo/css/style.css @@ -1,26 +1,21 @@ -/* -CSS-Tricks Example -by Chris Coyier -http://css-tricks.com -*/ - * { margin: 0; padding: 0; } body { - font: 20px/1.6 Georgia, serif; + font: 20px/1.6 georgia, serif; overflow-x: hidden; } #frame { margin: 3px 0 0 1px; } #page-wrap { - width: 570px; + max-width: 570px; margin: 25px auto; + padding: 0 15px; } h1 { - font: bold 50px Helvetica, sans-serif; + font: bold 50px sans-serif; letter-spacing: -2px; margin: 0 0 15px 0; } @@ -43,7 +38,7 @@ p { -moz-border-radius: 10px; -webkit-border-radius: 10px; } -iframe, .drag-arrow { +.drag-arrow { font-size: 14px; vertical-align: middle; } @@ -109,3 +104,16 @@ h2 { #demo-bar-badge:after { display: none !important; } + +.video-wrapper { + height: 0; + padding-top: 56.25%; + position: relative; +} +.video-wrapper > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +}
\ No newline at end of file @@ -1,5 +1,6 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> + <head> <meta charset="UTF-8"> <title>The Printliminator Demo</title> @@ -22,7 +23,7 @@ To make changes, modify the "src/bookmarklet/index.html" <div id="demo-top-bar"> <div id="demo-bar-inside"> <h2 id="demo-bar-badge"> - <a href="//github.com/CSS-Tricks/The-Printliminator">CSS-Tricks Example</a> + <a href="http://css-tricks.com">CSS-Tricks Example</a> </h2> <div id="demo-bar-buttons"></div> </div> @@ -32,10 +33,9 @@ To make changes, modify the "src/bookmarklet/index.html" <h1>The Printliminator<span id="dev-mode"></span></h1> - <p>The Printliminator is a bookmarklet with some simple tools you can use - to makes websites print better. One click to activate, and then click to remove - elements from the page, remove graphics, and apply better print styling. - Here is the bookmarklet:</p> + <p>The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.</p> + + <p>Here is the bookmarklet:</p> <p> <a href="javascript:/*THE.PRINTLIMINATOR*/(function(){function%20loadScript(a,b){var%20c=document.createElement('script'),d=document.getElementsByTagName('head')[0],e=!1;c.type='text/javascript',c.src=a,c.onload=c.onreadystatechange=function(){e||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(e=!0,b())},d.appendChild(c)}loadScript('//css-tricks.github.io/The-Printliminator/printliminator.min.js',function(){thePrintliminator.init()});})();" id="bookmarklet" class="bookmarklet">The Printliminator</a> @@ -44,16 +44,15 @@ To make changes, modify the "src/bookmarklet/index.html" <h2>Video Demo</h2> - <p>We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.</p> - - <iframe width="500" height="320" src="//www.youtube.com/embed/TAoRvdZaFPk" frameborder="0" allowfullscreen></iframe> + <div class="video-wrapper"> + <iframe width="853" height="480" src="https://www.youtube.com/embed/Dt8hpqEIL1c" frameborder="0" allowfullscreen></iframe> + </div> <h2>Credits</h2> <p> By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>. Updates & extensions by <a href="http://wowmotty.blogspot.com/">Rob Garrison</a>. - Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>. Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>. </p> diff --git a/src/bookmarklet/index.html b/src/bookmarklet/index.html index 101be10..2089395 100644 --- a/src/bookmarklet/index.html +++ b/src/bookmarklet/index.html @@ -1,5 +1,6 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> + <head> <meta charset="UTF-8"> <title>The Printliminator Demo</title> @@ -15,7 +16,7 @@ <div id="demo-top-bar"> <div id="demo-bar-inside"> <h2 id="demo-bar-badge"> - <a href="//github.com/CSS-Tricks/The-Printliminator">CSS-Tricks Example</a> + <a href="http://css-tricks.com">CSS-Tricks Example</a> </h2> <div id="demo-bar-buttons"></div> </div> @@ -25,10 +26,9 @@ <h1>The Printliminator<span id="dev-mode"></span></h1> - <p>The Printliminator is a bookmarklet with some simple tools you can use - to makes websites print better. One click to activate, and then click to remove - elements from the page, remove graphics, and apply better print styling. - Here is the bookmarklet:</p> + <p>The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.</p> + + <p>Here is the bookmarklet:</p> <p> <a href="javascript:/*THE.PRINTLIMINATOR*/(function(){{production}})();" id="bookmarklet" class="bookmarklet">The Printliminator</a> @@ -37,16 +37,15 @@ <h2>Video Demo</h2> - <p>We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.</p> - - <iframe width="500" height="320" src="//www.youtube.com/embed/TAoRvdZaFPk" frameborder="0" allowfullscreen></iframe> + <div class="video-wrapper"> + <iframe width="853" height="480" src="https://www.youtube.com/embed/Dt8hpqEIL1c" frameborder="0" allowfullscreen></iframe> + </div> <h2>Credits</h2> <p> By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>. Updates & extensions by <a href="http://wowmotty.blogspot.com/">Rob Garrison</a>. - Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>. Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>. </p> |