diff options
Diffstat (limited to 'site/index.html')
| -rw-r--r-- | site/index.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..7ab006b --- /dev/null +++ b/site/index.html @@ -0,0 +1,118 @@ +<!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"> + + <!-- 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"> + + <script type="text/javascript" src="http://use.typekit.com/rbn4gdu.js"></script> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + <!--[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 class="ir"> + <h1>FFFFALLBACK</h1> + <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>So in the spirit of bulletproof web design, we give you…</p> + + <div class="bkmrklt"> + <a href="#">ffffallback</a> + <span>the bookmarklet!</span> + </div> + + + <h3>Okay, so how do I use this thing?</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]--> + <aside> + <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>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> + </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> + <span class="horizon setting"></span> + <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 know about FFFFALLBACK!</small> + </p> + </footer> + </div> + </div> + <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> |