diff options
Diffstat (limited to 'site/index.html')
| -rw-r--r-- | site/index.html | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/site/index.html b/site/index.html deleted file mode 100644 index 492bd2d..0000000 --- a/site/index.html +++ /dev/null @@ -1,117 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <title>FFFFALLBACK - A simple tool for bulletproof web typography.</title> - <meta name="description" content="Bulletproof web typography, bookmarklet, web fonts"> - <meta name="author" content="Josh Brewer"> - - <!-- Mobile viewport optimized: j.mp/bplateviewport --> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - - <link rel="shortcut icon" href="/favicon.ico"> - - <script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <link rel="stylesheet" href="css/screen2.css"> - <!--[if lt IE 9]> - <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> - <![endif]--> -</head> -<body> - <span class="horizon rising"></span> - <div id="main"> - <div class="content"> - <hgroup> - <h1>FFFFALLBACK</h1> - <h2>A simple tool for bulletproof web typography.</h2> - </hgroup> - - <p><span class="brave"><i>It's a brave new world.</i></span> <strong>Web fonts are here, sparking an exciting new era in web design. <span class="smcap">Ffffallback</span> makes it easy to find the perfect fallback fonts so that your designs degrade gracefully.</strong></p> - <p>So, in the spirit of bulletproof web design, we give you…</p> - - <div class="bkmrklt"> - <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a> - <span>the bookmarklet!</span> - </div> - - <h3>Okay, so how do I use this thing?<a href="#caveat">*</a></h3> - <!--[if IE]> - <ol> - <li>Well… you don't. We noticed you are using Internet Explorer. Unfortunately, this tool doesn't work in IE at this time.</li> - <li>If you have Firefox or Chrome installed, please visit this page in either of those browsers and follow the instructions. </li> - <li>If you don't have either of those browsers installed, we strongly encourage you to download <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://firefox.com">Firefox</a> now!</li> - </ol> - <![endif]--> - <ol class="steps"> - <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.</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, <span class="smcap">FFFFALLBACK</span> clones the page and provides a tool where you can test and analyze different fallback font choices. - <ol> - <li class="note">You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use <strong>!important</strong>, as it’s…well, you know, important.</li> - </ol> - </li> - <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li> - </ol> - <aside class="caveat"> - <p><strong>*</strong> Small caveat: this bookmarklet only works on webkit browsers (Chrome & Safari) or Firefox. We might get it working for IE and Opera if time permits. But I wouldn't hold your breath.</p> - </aside> - <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> - - - <footer> - <p><span class="clear"><a href="mailto:feedback@fallback.com">Questions, comments & feedback</a><span> · </span><a href="https://github.com/jbrewer/ffffallback">Fork it on Github</a></span> - Handcrafted by <a href="http://twitter.com/jbrewer">@<span>jbrewer</span></a> and <a href="http://twitter.com/shinypb">@<span>shinypb</span></a>, with love, in San Francisco.</p> - <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 about <span class="smcap">FFFFALLBACK</span>!</small> - </p> - </footer> - </div> - </div> - <span class="horizon setting"></span> - <script src="js/css_browser_selector.js" ></script> - <script> - var myURL = window.location.toString(); - var baseURL; - if(myURL.match(/\.html$/)) { - var urlChunks = myURL.split('/'); - baseURL = urlChunks.slice(0, urlChunks.length - 1).join('/') - } else { - baseURL = myURL; - } - if(baseURL.substring(myURL.length - 1) !== '/') { - baseURL += '/'; - } - var jsURL = baseURL + 'bookmarklet/ffffallback.js?r=' + Math.random(); - var cssURL = baseURL + 'bookmarklet/ffffallback.css?r=' + Math.random(); - var bookmarkletSource = 'javascript:' + -"(function() {\ - var scriptTag = document.createElement('script');\ - scriptTag.setAttribute('src', '" + jsURL + "');\ - var linkTag = document.createElement('link');\ - linkTag.setAttribute('href', '" + cssURL + "');\ - linkTag.setAttribute('rel','stylesheet');\ - document.body.appendChild(scriptTag);\ - document.body.appendChild(linkTag);\ -})();".replace(/\n/g, ' '); - - document.getElementById('bookmarklet').setAttribute('href', bookmarkletSource); - </script> - <script type="text/javascript"> - - var _gaq = _gaq || []; - _gaq.push(['_setAccount', 'UA-109790-10']); - _gaq.push(['_trackPageview']); - - (function() { - var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); - })(); - </script> -</body> -</html> |