diff options
| author | Mottie <wowmotty@gmail.com> | 2015-08-22 05:26:24 +0300 |
|---|---|---|
| committer | Mottie <wowmotty@gmail.com> | 2015-08-23 20:39:17 +0300 |
| commit | 65a10e0dbc81af4ff124d7b82f8223f507395e6b (patch) | |
| tree | d681d1fc6d04a7c4d2c96e9468939e4ae873053a | |
| parent | 10b7ce799378be7f46837fa47b9998d2af04e5fa (diff) | |
Update demo page to match site
| -rw-r--r-- | css/style.css | 95 | ||||
| -rw-r--r-- | index.html | 30 |
2 files changed, 108 insertions, 17 deletions
diff --git a/css/style.css b/css/style.css index 882051e..715a65f 100644 --- a/css/style.css +++ b/css/style.css @@ -4,11 +4,90 @@ by Chris Coyier http://css-tricks.com */ -* { margin: 0; padding: 0; } -body { font: 20px/1.6 Georgia, serif; } - -#page-wrap { width: 570px; margin: 25px auto; } -h1 { font: bold 50px Helvetica, sans-serif; letter-spacing: -2px; margin: 0 0 15px 0; } -p { margin: 0 0 15px 0; } -.bookmarklet { text-decoration: none; background: black; color: white; padding: 8px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } -h2 { font: bold 32px Helvetica, sans-serif; letter-spacing: -2px; margin: 40px 0 10px 0; } +* { + margin: 0; + padding: 0; +} +body { + font: 20px/1.6 Georgia, serif; + overflow-x: hidden; +} +#page-wrap { + width: 570px; + margin: 25px auto; +} +h1 { + font: bold 50px Helvetica, sans-serif; + letter-spacing: -2px; + margin: 0 0 15px 0; +} +p { + margin: 0 0 15px 0; +} +.bookmarklet { + text-decoration: none; + background: black; + color: white; + padding: 8px 20px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; +} +h2 { + font: bold 32px Helvetica, sans-serif; + letter-spacing: -2px; + margin: 40px 0 10px 0; +} +#demo-top-bar { + text-align: left; + background: #222; + position: relative; + zoom: 1; + width: 100% !important; + z-index: 6000; + padding: 20px 0 20px; +} +#demo-bar-inside { + width: 960px; + margin: 0 auto; + position: relative; + overflow: hidden; +} +#demo-bar-buttons { + padding-top: 10px; + float: right; +} +#demo-bar-buttons a { + font-size: 12px; + margin-left: 20px; + color: white; + margin: 2px 0; + text-decoration: none; + font: 14px "Lucida Grande", Sans-Serif !important; +} +#demo-bar-buttons a:hover, +#demo-bar-buttons a:focus { + text-decoration: underline; +} +#demo-bar-badge { + display: inline-block; + width: 302px; + padding: 0 !important; + margin: 0 !important; + background-color: transparent !important; +} +#demo-bar-badge a { + display: block; + width: 100%; + height: 38px; + border-radius: 0; + bottom: auto; + margin: 0; + background: url(../images/examples-logo.png) no-repeat; + background-size: 100%; + overflow: hidden; + text-indent: -9999px; +} +#demo-bar-badge:before, +#demo-bar-badge:after { + display: none !important; +} @@ -1,31 +1,43 @@ +<!DOCTYPE html> +<html lang="en"> <head> - <meta charset='UTF-8'> - + <meta charset="UTF-8"> <title>The Printliminator</title> - <link rel="stylesheet" href="css/style.css"> </head> <body> + <div id="demo-top-bar"> + <div id="demo-bar-inside"> + <h2 id="demo-bar-badge"> + <a href="/">CSS-Tricks Example</a> + </h2> + <div id="demo-bar-buttons"></div> + </div> + </div> <div id="page-wrap"> - <h1>The Printliminator <span style="font-size: 12px; color: red; letter-spacing: 1px;">BETA</span></h1> + <h1>The Printliminator</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. + 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> - <a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2',function(){loadScript('http://css-tricks.com/examples/ThePrintliminator/js/printliminator.js',function(){printlimator()})})})()" class="bookmarklet">Printliminator</a> + <a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',function(){loadScript('http://css-tricks.github.io/The-Printliminator/js/printliminator.js',function(){printliminator()})})})()" class="bookmarklet">Printliminator</a> <span style="font-size: 14px;">< drag to your bookmarks bar</span> </p> - <h2>Quick Video Demo</h2> - <embed src="http://blip.tv/play/hMAsgafAFQA" type="application/x-shockwave-flash" width="570" height="428" allowscriptaccess="always" allowfullscreen="true"></embed> + <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="http://www.youtube.com/embed/TAoRvdZaFPk" frameborder="0" allowfullscreen></iframe> <h2>Credits</h2> + <p>By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</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> |