diff options
| -rw-r--r-- | bookmarklet/ffffallback.css | 9 | ||||
| -rw-r--r-- | site/css/screen.css | 53 | ||||
| -rw-r--r-- | site/index.html | 12 |
3 files changed, 65 insertions, 9 deletions
diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index cfc638b..d630c41 100644 --- a/bookmarklet/ffffallback.css +++ b/bookmarklet/ffffallback.css @@ -73,6 +73,15 @@ body.ffffallback-hide-original #ffffallback-content-container { display: block!important; opacity: 1!important; } +#ffffallback-controller { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} #ffffallback-controller { display: block!important; diff --git a/site/css/screen.css b/site/css/screen.css index 1e6a233..91d78e8 100644 --- a/site/css/screen.css +++ b/site/css/screen.css @@ -141,7 +141,7 @@ span.horizon { position:absolute; } span.rising {width:100%; margin-top:10.5em;} -span.setting {width:55em; margin-top:2.5em;margin-left:-16em;} +span.setting {width:52em; margin-top:2.5em;margin-left:-22em;} #main { border-left: 1px solid #423e39; margin:0 0 0 4em; @@ -271,7 +271,7 @@ h3 { } #main ol + p { - background:url(../images/bang.png) no-repeat 3px 2px; + background:url(../images/bang.png) no-repeat 3px 1px; font-weight:bold; padding-left:2em; margin-left:-2em; @@ -290,6 +290,9 @@ footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.c color:rgba(143,187,204,0.4); } footer p a span {color:rgba(143,187,204,1)} +footer p a[href="http://twitter.com/jbrewer"]:hover span, footer p a[href="http://twitter.com/shinypb"]:hover span { + color:#64c2e8; +} footer .twitter-share-button { position:relative; top:5px; @@ -299,6 +302,52 @@ footer .twitter-share-button { /* media queries for responsive design */ +/* One-column - iPhone portrait and any 320px device */ +@media (max-width:640px){ + .container{ + width: 320px; + } + #secondary{ + margin-left: 15px; + } +} + +/* One-column - iPhone landscape */ +@media (orientation:landscape) and (min-width:321px) and (max-width:480px){ + /* + .container{ + width: 480px; + }*/ +} + +/* Two-column - iPad */ +@media (min-width:641px) and (max-width:960px){ + hgroup { + margin-bottom:10em; + } + +} + +/* 15" MacBook Pro */ +@media (min-width:1281px) and (max-width:1600px){ + .container{ + width: 1280px; + } +} + +/* 17" MacBook Pro, iMac */ +@media (min-width:1601px) and (max-width:1920px){ + .container{ + width: 1600px; + } +} + +/* HD */ +@media (min-width:1920px) and (max-width:2240px){ + .container{ + width: 1920px; + } +} @media all and (orientation:portrait) { diff --git a/site/index.html b/site/index.html index 26f9a40..0f2b04d 100644 --- a/site/index.html +++ b/site/index.html @@ -10,9 +10,7 @@ <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> - <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- CSS : implied media="all" --> <link rel="stylesheet" href="css/screen.css"> @@ -32,7 +30,7 @@ <h2>A simple tool for bulletproof web typography.</h2> </hgroup> - <p><strong><span class="brave"><i class="ir">It's a brave new world.</i></span> Web fonts are here, sparking an exciting new era in web design. While this new-found freedom can be intoxicating, the importance of dependable web typography can not be overstated.</strong></p> + <p><strong><span class="brave"><i class="ir">It's a brave new world.</i></span> Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means better layouts for everyone.</strong></p> <p>So in the spirit of bulletproof web design, we give you…</p> <div class="bkmrklt"> @@ -53,12 +51,12 @@ <p>Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We <strike>are</strike> might get it working for IE and Opera if time permits.</p> </aside> <ol class="steps"> - <li>Drag the bookmarklet to your browser toolbar.</li> - <li>Go to the page you want to test and click the bookmarklet to get started.</li> + <li><strong>Drag</strong> the bookmarklet to your browser toolbar.</li> + <li>Go to the page you want to test and <strong>click</strong> the bookmarklet to get started.</li> <li>The bookmarklet will scan the CSS of the page in order to identify existing web fonts. Then, using magical unicorns and javascript rainbows, FFFFALLBACK clones the page and provides a tool where you can test and analyze different fallback font choices. <span class="note">You can also add an input in order to change font-size, line-height, color, etc.</span> </li> - <li>Bulletproof your font-stacks and rejoice!</li> + <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li> </ol> <p>For more background on how this came to be and why it's important, read <a href="http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/">Type study: Choosing fallback fonts</a>.</p> @@ -69,7 +67,7 @@ <p><small>Extra big high-fives to the kind souls whose encouragement brought this to life: <a href="http://twitter.com/TrentWalton">Trent Walton</a>, <a href="http://twitter.com/TimBrown">Tim Brown</a>, <a href="http://twitter.com/Kyle">Kyle Sollenberger</a>, <a href="http://twitter.com/yarcom">Yaron Schoen</a> and <a href="http://twitter.com/aworkinglibrary">Mandy Brown</a>.</small></p> <p class="tweet"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ffffallback.com" data-text="I'm using @ffffallback to help bulletproof my web typography. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> - <small>Tell the world know about FFFFALLBACK!</small> + <small>Tell the world about FFFFALLBACK!</small> </p> </footer> </div> |