diff options
| -rw-r--r-- | README | 4 | ||||
| -rw-r--r-- | bookmarklet/ffffallback.css | 2 | ||||
| -rw-r--r-- | index.html | 116 | ||||
| -rw-r--r-- | secret.html | 75 | ||||
| -rwxr-xr-x | site/Thumbs.db | bin | 14336 -> 0 bytes | |||
| -rw-r--r-- | site/css/screen.css | 379 | ||||
| -rw-r--r-- | site/css/screen2.css | 455 | ||||
| -rw-r--r-- | site/images/bang.png | bin | 397 -> 0 bytes | |||
| -rw-r--r-- | site/images/bookmarklet-button.png | bin | 1999 -> 0 bytes | |||
| -rw-r--r-- | site/images/brand.png | bin | 2782 -> 0 bytes | |||
| -rw-r--r-- | site/images/bravenewworld.png | bin | 2667 -> 0 bytes | |||
| -rw-r--r-- | site/index.html | 117 | ||||
| -rw-r--r-- | site/js/css_browser_selector.js | 8 | ||||
| -rwxr-xr-x | site/js/jquery.lettering.js | 66 |
14 files changed, 100 insertions, 1122 deletions
@@ -1,4 +0,0 @@ -README - -Props to Mark. He is amazeballs. -Props to webkit scrollbar stuff from http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
\ No newline at end of file diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css index 66f6794..b5ac76d 100644 --- a/bookmarklet/ffffallback.css +++ b/bookmarklet/ffffallback.css @@ -3,7 +3,7 @@ } #ffffallback-content-container { - opacity:0.5!important; + opacity:0.6!important; position: absolute!important; left: 0!important; top: 0!important; @@ -1,23 +1,106 @@ -<!DOCTYPE html> -<html> +<!doctype html> +<html lang="en"> <head> <meta charset="utf-8"> - <title>FFFFALLBACK</title> - <style type="text/css" media="screen"> - body { - color:#444; - font: normal normal normal 1em/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif; - } - </style> + <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> - <hgroup> - <h1>FFFFALLBACK</h1> - <h2>A simple tool for bulletproof web typography.</h2> - </hgroup> - <p> - Coming soon. - </p> + <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 || []; @@ -29,7 +112,6 @@ 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> diff --git a/secret.html b/secret.html deleted file mode 100644 index d6ff420..0000000 --- a/secret.html +++ /dev/null @@ -1,75 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>FFFFALLBACK</title> - <style type="text/css" media="screen"> - body { - color:#444; - font: normal normal normal 1em/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif; - } - h2 { - font-family: Georgia, serif; - } - #main { - margin:0 auto; - width:600px; - } - </style> -</head> -<body> - <div id="main"> - <hgroup> - <h1>FFFFALLBACK</h1> - <h2>A simple tool for bulletproof web typography.</h2> - </hgroup> - <p>Shhhh! This is top secret. Grab the bookmarklet and take it for a spin. Please send any and all feedback to me at <a href="mailto:josh@jbrewer.me">feedback@ffffallback.com</a></p> - <p>This is the bookmarklet: <a id="bookmarklet" href="#">ffffallback</a>—drag it to your bookmarks bar and brace yourself for an onslaught of unicorns and rainbows.</p> - </div> - - - <script> - var myURL = window.location.toString(); - if(myURL.indexOf('#') >= 0) { - myURL = myURL.split('#')[0]; - } - 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> diff --git a/site/Thumbs.db b/site/Thumbs.db Binary files differdeleted file mode 100755 index 2c97afd..0000000 --- a/site/Thumbs.db +++ /dev/null diff --git a/site/css/screen.css b/site/css/screen.css deleted file mode 100644 index a337aa4..0000000 --- a/site/css/screen.css +++ /dev/null @@ -1,379 +0,0 @@ -/* HTML5 ✰ Boilerplate—html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - vertical-align:baseline; - background:transparent; -} -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display:block; -} -article:after,aside:after,div:after,form:after,header:after,hgroup:after,nav:after,section:after,ul:after,ol:after{ - clear:both; - content:"."; - display:block; - height:0; - visibility:hidden; -} -nav ul { list-style:none; } -blockquote, q { quotes:none; } -blockquote:before, blockquote:after, -q:before, q:after { content:''; content:none; } -a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } -ins { background-color:#ff9; color:#000; text-decoration:none; } -mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } -del { text-decoration: line-through; } -abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } -table { border-collapse:collapse; border-spacing:0; } -hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } -input, select { vertical-align:middle; } -/* END RESET CSS */ - -/* BASIC STYLING */ -body { font:1em/1.5 sans-serif; } -select, input, textarea, button { font:99% sans-serif; } -pre, code, kbd, samp { font-family: monospace, sans-serif; } -h1,h2,h3,h4,h5,h6 { font-weight: bold; } -h1 {font-size:3em;} -h2 {font-size:2.25em;} -h3 {font-size:1.3125em;} -h4 {font-size:1em} -h5 {font-size:0.875em;;} -h6 {font-size:0.75em;;} -html { overflow-y: scroll; } -a:hover, a:active { outline: none; } -a, a:active, a:visited { color: #8fbbcc; text-decoration:none;position:relative;} -a:hover { - color: #64c2e8; - -moz-transition: all 0.25s ease-out; - -o-transition: all 0.25s ease-out; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -p a:hover { - color: #64c2e8; - text-shadow:#4c4a47 1px 1px 0, #4c4a47 2px 2px 0, #4c4a47 3px 3px 0; - top:-3px; - left:-3px; - -moz-transition: all 0.25s ease-out; - -o-transition: all 0.25s ease-out; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.ie a:hover { - left:0; - top:0; - text-decoration:underline; -} -ul, ol { margin-left: 2em; } -ol { list-style-type: decimal;} -nav ul, nav li { margin: 0; list-style-type:none;} -small { font-size: 85%; } -strong, th { font-weight: bold; } -td, td img { vertical-align: top; } -sub, sup { font-size: 75%; line-height: 0; position: relative; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } -pre { - padding: 15px; - white-space: pre; - white-space: pre-wrap; - white-space: pre-line; - word-wrap: break-word; -} -textarea { overflow: auto; } -.ie6 legend, .ie7 legend { margin-left: -7px; } -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; } -.ie7 input[type="checkbox"] { vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } -button, input, select, textarea { margin: 0; } -/* colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { - border-radius: 1px; - -moz-box-shadow: 0px 0px 5px red; - -webkit-box-shadow: 0px 0px 5px red; - box-shadow: 0px 0px 5px red; -} - -/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; }*/ -a:link { -webkit-tap-highlight-color: #FF5E99; } -button { width: auto; overflow: visible; } -.ie7 img { -ms-interpolation-mode: bicubic; } -.clear {clear:both;display:block;} -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - -/* Primary Styles | Author: Josh Brewer (twitter.com/jbrewer) */ -html {height:100%;} -body { - background:#2d2a27; - color:#cabfac; - color:rgba(202,191,171,1); - font: normal 1em/1.5 "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; - height:100%; - width:100%; -} -span.horizon { - border-top:1px solid #423E39; - height:1px; - margin-left:0; - - position:absolute; -} -span.rising {width:100%; margin-top:10.5em;} -span.setting {width:52em; margin-top:2.5em;margin-left:-22em;} -#main { - border-left: 1px solid #423e39; - margin:0 0 0 4em; - padding:3em 0 0 7em; - position:relative; -} - -.content { - max-width:32em; - position:relative; -} -hgroup { - background:url(../images/brand.png) no-repeat 0 0; - display: block; - direction: ltr; - margin:0 0 5em -4.5625em; - overflow: hidden; - text-align: left; - text-indent: -999em; - height:80px; - width:409px; -} - -/* Really wish H&FJ webfonts were available… but they're not. Image replacement it is. -.brave { - background: #2d2a27; - color:#fef1d8; - font-size:1.05em; - left:30em; - line-height:1; - position:absolute; - text-transform:uppercase; - top:3.85em; - height: 170px; - width: 170px; - -webkit-border-radius: 170px; - -moz-border-radius: 170px; - border-radius: 170px; - background-clip: padding-box; - z-index:100; -} -.brave:before { - content: ""; - background:#9b3d17; - position:absolute; - text-transform:uppercase; - left:10px; - top: 10px; - height:150px; - width: 150px; - -webkit-border-radius: 150px; - -moz-border-radius: 150px; - border-radius: 150px; - background-clip: padding-box; - z-index:-1; -}*/ -.brave { - background: #2d2a27 url(../images/bravenewworld.png) no-repeat 0 0; - color:#fef1d8; - font-size:1em; - left:27.75em; - line-height:1; - position:absolute; - top:1.5em; - height: 176px; - width: 176px; - z-index:100; -} -.brave i { - display:block; - text-indent:-9999em; -} - -hgroup + p, hgroup + p + p { - font-size: 1.3125em; - line-height:1.1429; - margin-bottom:1.5em; - max-width:25em; -} - -.bkmrklt { - font-size:1.3125em; - margin-bottom: 3em; - position:relative; -} -.bkmrklt a { - background:url(../images/bookmarklet-button.png) no-repeat 0 0; - border:0; - direction: ltr; - display:block; - overflow: hidden; - text-indent:-9999em; - text-align: left; - height:57px; - width:215px; -} -.bkmrklt a:hover { - border-bottom:0; -} -.bkmrklt span { - color:#eebe5f; - left: 11em; - letter-spacing:4px; - position: absolute; - text-transform:uppercase; - top: 0.95em; -} - -h3 { - margin:0 0 1em; -} -#main aside { - color:rgba(202,191,171,0.5); - font-size: 0.75em; - line-height: 1.7; - padding-top: .4em; - position: absolute; - right: -21.5em; - width: 16em; -} -#main ol { - margin:0 0 1.5em; -} -#main ol li { - margin-bottom:1em; -} - -#main ol + p { - background:url(../images/bang.png) no-repeat 3px 1px; - font-weight:bold; - padding-left:2em; - margin-left:-2em; -} -.ie #main ol.steps { - display:none; -} - - -footer { - margin:5em 0; -} -footer p {margin-bottom:2.5em;} -footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.com/shinypb"] { - border-bottom:0; - 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; -} - - - - -/* 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) { - -} - -@media all and (orientation:landscape) { - -} - -/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) - consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ -@media screen and (max-device-width: 480px) { - -} - -/* print styles */ -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; - -ms-filter: none !important; } - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } -}
\ No newline at end of file diff --git a/site/css/screen2.css b/site/css/screen2.css deleted file mode 100644 index 9f031b1..0000000 --- a/site/css/screen2.css +++ /dev/null @@ -1,455 +0,0 @@ -/* HTML5 ✰ Boilerplate—html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - vertical-align:baseline; - background:transparent; -} -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display:block; -} -article:after,aside:after,div:after,form:after,header:after,hgroup:after,nav:after,section:after,ul:after,ol:after{ - clear:both; - content:"."; - display:block; - height:0; - visibility:hidden; -} -nav ul { list-style:none; } -blockquote, q { quotes:none; } -blockquote:before, blockquote:after, -q:before, q:after { content:''; content:none; } -a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } -ins { background-color:#ff9; color:#000; text-decoration:none; } -mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } -del { text-decoration: line-through; } -abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } -table { border-collapse:collapse; border-spacing:0; } -hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } -input, select { vertical-align:middle; } -/* END RESET CSS */ - -/* BASIC STYLING */ -body { font:1em/1.5 sans-serif; } -select, input, textarea, button { font:99% sans-serif; } -pre, code, kbd, samp { font-family: monospace, sans-serif; } -h1,h2,h3,h4,h5,h6 { font-weight: bold; } -h1 {font-size:3em;} -h2 {font-size:2.25em;} -h3 {font-size:1.3125em;} -h4 {font-size:1em} -h5 {font-size:0.875em;;} -h6 {font-size:0.75em;;} -html { overflow-y: scroll; } -a:hover, a:active { outline: none; } -a, a:active, a:visited { color: #8fbbcc; text-decoration:none;position:relative;} -a:hover { - color: #64c2e8; - -moz-transition: all 0.25s ease-out; - -o-transition: all 0.25s ease-out; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -p a:hover { - color: #64c2e8; - text-shadow:#4c4a47 1px 1px 0, #4c4a47 2px 2px 0, #4c4a47 3px 3px 0; - top:-3px; - left:-3px; - -moz-transition: all 0.25s ease-out; - -o-transition: all 0.25s ease-out; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.ie a:hover { - left:0; - top:0; - text-decoration:underline; -} -ul, ol { margin-left: 2em; } -ol { list-style-type: decimal;} -nav ul, nav li { margin: 0; list-style-type:none;} -small { font-size: 85%; } -strong, th { font-weight: bold; } -td, td img { vertical-align: top; } -sub, sup { font-size: 75%; line-height: 0; position: relative; } -sup { top: -0.5em; } -sub { bottom: -0.25em; } -pre { - padding: 15px; - white-space: pre; - white-space: pre-wrap; - white-space: pre-line; - word-wrap: break-word; -} -textarea { overflow: auto; } -.ie6 legend, .ie7 legend { margin-left: -7px; } -input[type="radio"] { vertical-align: text-bottom; } -input[type="checkbox"] { vertical-align: bottom; } -.ie7 input[type="checkbox"] { vertical-align: baseline; } -.ie6 input { vertical-align: text-bottom; } -label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } -button, input, select, textarea { margin: 0; } -/* colors for form validity */ -input:valid, textarea:valid { } -input:invalid, textarea:invalid { - border-radius: 1px; - -moz-box-shadow: 0px 0px 5px red; - -webkit-box-shadow: 0px 0px 5px red; - box-shadow: 0px 0px 5px red; -} - -/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } -::selection { background:#FF5E99; color:#fff; text-shadow: none; }*/ -a:link { -webkit-tap-highlight-color: #FF5E99; } -button { width: auto; overflow: visible; } -.ie7 img { -ms-interpolation-mode: bicubic; } -.clear {clear:both;display:block;} -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - -/* Primary Styles | Author: Josh Brewer (twitter.com/jbrewer) */ -html {height:100%;} -body { - background:#2d2a27; - color:#cabfac; - color:rgba(202,191,171,1); - font: normal 1em/1.5 "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; - height:100%; - width:100%; -} - -span.horizon { - border-top:1px solid #423E39; - height:1px; - margin-left:0; - position:absolute; -} -span.rising {width:100%; margin-top:15em;} -span.setting {width:100%; margin-top: -20em;} - -#main { - border: 1px solid #423e39; - border-width:0 1px; - margin:0 4em; - padding:3em 0 0 0; - position:relative; -} - -.content { - width:32em; - position:relative; - margin: 0 auto; -} -hgroup { - margin:0 0 12em 0; -} -hgroup h1 { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:3.5em; - font-weight:200; - line-height:1; - margin-left:1.35em; - text-transform:uppercase; -} -.wf-inactive hgroup h1{ - letter-spacing:4px; -} - -hgroup h1:before { - content: "F"; - background:#fef1d8; - border:1px solid #2d2a27; - color:#2d2a27; - font-size:0.5em; - font-weight:200; - margin-right:0.5em; - padding-top:0.25em; - position:absolute; - text-align:center; - vertical-align:center; - top:0.1em; - left:0; - width:1.5em; - height:1.25em; - -moz-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - -webkit-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - -o-box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; - box-shadow: 3px 3px 0 #b0a796, 4px 4px 0 #2d2a27, 7px 7px 0 #615c53; -} - - -hgroup h2 { - color:#eebe5f; - font-size:1.3125em; - font-weight:200; - letter-spacing:0.1em; - margin-top:0.5em; -} - -.brave { - background: #2d2a27; - color:#fef1d8; - font-size:1.05em; - left:8em; - line-height:1; - position:absolute; - text-transform:uppercase; - top:5.25em; - height: 7em; - width: 7em; - -webkit-border-radius: 7em; - -moz-border-radius: 7em; - border-radius: 7em; - background-clip: padding-box; - z-index:100; -} -.brave:before { - content: ""; - background:#9b3d17; - position:absolute; - text-transform:uppercase; - left:10px; - top: 10px; - height:6em; - width: 6em; - -webkit-border-radius: 6em; - -moz-border-radius: 6em; - border-radius: 6em; - background-clip: padding-box; - z-index:-1; -} -.brave i { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:0.8125em; - font-style: normal; - font-weight: normal; - top: 2.25em; - position: relative; - width: 4em; - display: block; - left: 2.25em; -} - -hgroup + p { - font-size: 1.3125em; - line-height:1.1429; - margin-bottom:1.5em; - xwidth:24em; -} -hgroup + p strong { - line-height: 1.25; - font-size: 1.125em; -} -.wf-active hgroup + p strong { - line-height: 1.25; - font-size: 1.25em; -} - -hgroup + p + p { - font-size: 1.25em; - line-height:1.5; - margin-bottom:1.5em; -} -.smcap { - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size:0.7em; - font-weight:200; - text-transform:uppercase; -} -.wf-inactive .smcap { - font-size:1em; -} - -.bkmrklt { - font-size:1.3125em; - margin:2em 0 3em; - position:relative; -} - -@-webkit-keyframes drag-me { - from { - top:0; - left:0; - } - to { - top:-20px; - left:30px; - } -} - -.bkmrklt a { - background: rgba(255, 255, 255, 0.1); - border: 1px solid #2D2A27; - color: #F0E4CC; - font-family:"kulturista-web-1","kulturista-web-2", "Courier New"; - font-size: 1.125em; - padding: .5em 1em; - position:relative; - text-align:center; - text-transform: uppercase; - text-shadow:0 1px 1px #2D2A27; - z-index:100; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - -o-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2); -} -.bkmrklt a:hover { - -webkit-animation-name: drag-me; - -webkit-animation-duration: 2s; - -webkit-animation-timing-function: ease-in-out; -} -.bkmrklt a:after { - content: attr(data-drag); - display:none; -} -.bkmrklt a:hover:after { - background:rgba(0,0,0,0.8); - display:block; - position:absolute; - top:-3em; - left:30%; - padding:0.5em 1em; - font-family: "proxima-nova-1","proxima-nova-2", "Helvetica Neue", Calibri, Arial, Helvetica, sans-serif; - font-size:0.5em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -.bkmrklt span { - color:#eebe5f; - font-size:0.9125em; - font-weight:200; - left: 11em; - letter-spacing:4px; - margin-left:0.5em; - text-transform:uppercase; -} - - -h3 { - margin:0 0 1.5em; -} -h3 a { - color:rgba(202,191,171,0.75); - font-weight:normal; - position:relative; - top:-4px; -} -#main ol { - margin:0; -} -#main ol li { - margin-bottom:1em; -} -#main ol li:last-child { - margin-bottom:0; -} -#main ol .note { - display:block; - font-size:0.8125em; - margin-top:1em; -} -#main aside { - color:rgba(202,191,171,0.5); - font-size: 0.75em; - line-height: 1.7; - margin:1em 0 4em; -} -aside strong { - margin-left:-8px; -} -#main aside + p { - background:url(../images/bang.png) no-repeat 3px 1px; - font-weight:bold; - padding-left:2em; - margin-left:-2em; -} -.ie #main ol.steps { - display:none; -} - - -footer { - margin:5em 0; -} -footer p {margin-bottom:2.5em;} -footer p a[href="http://twitter.com/jbrewer"], footer p a[href="http://twitter.com/shinypb"] { - border-bottom:0; - 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; -} - -/* media queries for responsive design */ -/* One-column - iPhone portrait and any 320px device */ -@media (max-width:640px){ - body {font-size:85%;} - .typekit-badge {display:none !important;} - .content{ - width: 310px; - margin:0 auto; - } - #main { - border:0; - margin:0; - padding-top:2em; - } - .rising {margin-top:13em !important;} - .setting {margin-top:-22em !important;} - hgroup h1 {font-size:2.6em !important;} - hgroup h2 {font-size:1.2em;letter-spacing:normal;} - .brave {left:5.25em;top:4.5em;} - hgroup + p strong {font-size:0.9em;} - .bkmrklt {text-align:center;} - .bkmrklt span {display:block;margin-top:1em;} - footer {font-size:95%;} -} - -/* iPad */ -@media (min-width:641px) and (max-width:960px){ - #main { - margin:0 2em; - } -} - -/* print styles */ -@media print { - * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; - -ms-filter: none !important; } - a, a:visited { color: #444 !important; text-decoration: underline; } - a[href]:after { content: " (" attr(href) ")"; } - abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } - tr, img { page-break-inside: avoid; } - @page { margin: 0.5cm; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3{ page-break-after: avoid; } -}
\ No newline at end of file diff --git a/site/images/bang.png b/site/images/bang.png Binary files differdeleted file mode 100644 index 5c26a96..0000000 --- a/site/images/bang.png +++ /dev/null diff --git a/site/images/bookmarklet-button.png b/site/images/bookmarklet-button.png Binary files differdeleted file mode 100644 index 917c3c5..0000000 --- a/site/images/bookmarklet-button.png +++ /dev/null diff --git a/site/images/brand.png b/site/images/brand.png Binary files differdeleted file mode 100644 index 02f32f6..0000000 --- a/site/images/brand.png +++ /dev/null diff --git a/site/images/bravenewworld.png b/site/images/bravenewworld.png Binary files differdeleted file mode 100644 index 07b9d79..0000000 --- a/site/images/bravenewworld.png +++ /dev/null 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> diff --git a/site/js/css_browser_selector.js b/site/js/css_browser_selector.js deleted file mode 100644 index 0668aa7..0000000 --- a/site/js/css_browser_selector.js +++ /dev/null @@ -1,8 +0,0 @@ -/* -CSS Browser Selector v0.4.0 (Nov 02, 2010) -Rafael Lima (http://rafael.adm.br) -http://rafael.adm.br/css_browser_selector -License: http://creativecommons.org/licenses/by/2.5/ -Contributors: http://rafael.adm.br/css_browser_selector#contributors -*/ -function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent); diff --git a/site/js/jquery.lettering.js b/site/js/jquery.lettering.js deleted file mode 100755 index 4515590..0000000 --- a/site/js/jquery.lettering.js +++ /dev/null @@ -1,66 +0,0 @@ -/*global jQuery */ -/*! -* Lettering.JS 0.6.1 -* -* Copyright 2010, Dave Rupert http://daverupert.com -* Released under the WTFPL license -* http://sam.zoy.org/wtfpl/ -* -* Thanks to Paul Irish - http://paulirish.com - for the feedback. -* -* Date: Mon Sep 20 17:14:00 2010 -0600 -*/ -(function($){ - function injector(t, splitter, klass, after) { - var a = t.text().split(splitter), inject = ''; - if (a.length) { - $(a).each(function(i, item) { - inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after; - }); - t.empty().append(inject); - } - } - - var methods = { - init : function() { - - return this.each(function() { - injector($(this), '', 'char', ''); - }); - - }, - - words : function() { - - return this.each(function() { - injector($(this), ' ', 'word', ' '); - }); - - }, - - lines : function() { - - return this.each(function() { - var r = "eefec303079ad17405c889e092e105b0"; - // Because it's hard to split a <br/> tag consistently across browsers, - // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash - // (of the word "split"). If you're trying to use this plugin on that - // md5 hash string, it will fail because you're being ridiculous. - injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); - }); - - } - }; - - $.fn.lettering = function( method ) { - // Method calling logic - if ( method && methods[method] ) { - return methods[ method ].apply( this, [].slice.call( arguments, 1 )); - } else if ( method === 'letters' || ! method ) { - return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array - } - $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); - return this; - }; - -})(jQuery);
\ No newline at end of file |
