From 0b14e434586040487ec6e4b58c906189eb550fe8 Mon Sep 17 00:00:00 2001 From: Chris Coyier Date: Wed, 7 Oct 2015 08:58:48 -0500 Subject: demo page updates --- demo/css/style.css | 28 ++++++++++++++++++---------- index.html | 19 +++++++++---------- 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 diff --git a/index.html b/index.html index c0a9a6d..0167d8e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ - + + The Printliminator Demo @@ -22,7 +23,7 @@ To make changes, modify the "src/bookmarklet/index.html"
@@ -32,10 +33,9 @@ To make changes, modify the "src/bookmarklet/index.html"

The Printliminator

-

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:

+

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:

The Printliminator @@ -44,16 +44,15 @@ To make changes, modify the "src/bookmarklet/index.html"

Video Demo

-

We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.

- - +
+ +

Credits

By Chris Coyier and Devon Govett. Updates & extensions by Rob Garrison. - Icons by Function. Print stylesheet based on Hartija.

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 @@ - + + The Printliminator Demo @@ -15,7 +16,7 @@
@@ -25,10 +26,9 @@

The Printliminator

-

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:

+

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:

The Printliminator @@ -37,16 +37,15 @@

Video Demo

-

We used to have a quick video demo here, but Blip.tv deleted it. RUDE. Here's one we found on YouTube about it.

- - +
+ +

Credits

By Chris Coyier and Devon Govett. Updates & extensions by Rob Garrison. - Icons by Function. Print stylesheet based on Hartija.

-- cgit v1.2.3