demo page updates

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)
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
diff --git a/index.html b/index.html
index c0a9a6d..0167d8e 100644
--- a/index.html
+++ b/index.html
@@ -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>
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)