From 35ea8d18f349deb03f6412d67b42baddf822408e Mon Sep 17 00:00:00 2001 From: Josh Brewer Date: Tue, 19 Apr 2011 23:02:40 -0700 Subject: moving new site out of site folder and last couple tweaks in prep for launch --- README | 4 - bookmarklet/ffffallback.css | 2 +- index.html | 116 ++++++++-- secret.html | 75 ------ site/Thumbs.db | Bin 14336 -> 0 bytes site/css/screen.css | 379 ------------------------------ site/css/screen2.css | 455 ------------------------------------- site/images/bang.png | Bin 397 -> 0 bytes site/images/bookmarklet-button.png | Bin 1999 -> 0 bytes site/images/brand.png | Bin 2782 -> 0 bytes site/images/bravenewworld.png | Bin 2667 -> 0 bytes site/index.html | 117 ---------- site/js/css_browser_selector.js | 8 - site/js/jquery.lettering.js | 66 ------ 14 files changed, 100 insertions(+), 1122 deletions(-) delete mode 100644 README delete mode 100644 secret.html delete mode 100755 site/Thumbs.db delete mode 100644 site/css/screen.css delete mode 100644 site/css/screen2.css delete mode 100644 site/images/bang.png delete mode 100644 site/images/bookmarklet-button.png delete mode 100644 site/images/brand.png delete mode 100644 site/images/bravenewworld.png delete mode 100644 site/index.html delete mode 100644 site/js/css_browser_selector.js delete mode 100755 site/js/jquery.lettering.js diff --git a/README b/README deleted file mode 100644 index 09ab363..0000000 --- a/README +++ /dev/null @@ -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; diff --git a/index.html b/index.html index 4b3408d..60e7b3c 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,106 @@ - - + + - FFFFALLBACK - + + FFFFALLBACK - A simple tool for bulletproof web typography. + + + + + + + + + + + + + -
-

FFFFALLBACK

-

A simple tool for bulletproof web typography.

-
-

- Coming soon. -

+ +
+
+
+

FFFFALLBACK

+

A simple tool for bulletproof web typography.

+
+ +

It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

+

So, in the spirit of bulletproof web design, we give you…

+ +
+ ffffallback + the bookmarklet! +
+ +

Okay, so how do I use this thing?*

+ +
    +
  1. Drag the bookmarklet to your browser toolbar.
    2. +
  2. Go to the page you want to test and click the bookmarklet.
    3. +
  3. 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. +
      +
    1. You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use !important, as it’s…well, you know, important.
      2. +
    +
    4. +
  4. Bulletproof your font-stacks and rejoice!
    5. +
+ +

For more background on how this came to be and why it's important, read Type study: Choosing fallback fonts.

+ + + +
+
+ + + diff --git a/secret.html b/secret.html deleted file mode 100644 index d6ff420..0000000 --- a/secret.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - FFFFALLBACK - - - -
-
-

FFFFALLBACK

-

A simple tool for bulletproof web typography.

-
-

Shhhh! This is top secret. Grab the bookmarklet and take it for a spin. Please send any and all feedback to me at feedback@ffffallback.com

-

This is the bookmarklet: ffffallback—drag it to your bookmarks bar and brace yourself for an onslaught of unicorns and rainbows.

-
- - - - - - - diff --git a/site/Thumbs.db b/site/Thumbs.db deleted file mode 100755 index 2c97afd..0000000 Binary files a/site/Thumbs.db and /dev/null differ 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 deleted file mode 100644 index 5c26a96..0000000 Binary files a/site/images/bang.png and /dev/null differ diff --git a/site/images/bookmarklet-button.png b/site/images/bookmarklet-button.png deleted file mode 100644 index 917c3c5..0000000 Binary files a/site/images/bookmarklet-button.png and /dev/null differ diff --git a/site/images/brand.png b/site/images/brand.png deleted file mode 100644 index 02f32f6..0000000 Binary files a/site/images/brand.png and /dev/null differ diff --git a/site/images/bravenewworld.png b/site/images/bravenewworld.png deleted file mode 100644 index 07b9d79..0000000 Binary files a/site/images/bravenewworld.png and /dev/null differ 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 @@ - - - - - - FFFFALLBACK - A simple tool for bulletproof web typography. - - - - - - - - - - - - - - - - -
-
-
-

FFFFALLBACK

-

A simple tool for bulletproof web typography.

-
- -

It's a brave new world. Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts so that your designs degrade gracefully.

-

So, in the spirit of bulletproof web design, we give you…

- -
- ffffallback - the bookmarklet! -
- -

Okay, so how do I use this thing?*

- -
    -
  1. Drag the bookmarklet to your browser toolbar.
    2. -
  2. Go to the page you want to test and click the bookmarklet.
    3. -
  3. 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. -
      -
    1. You can also toggle open an input in order to change font-size, line-height, color, etc. Remember to use !important, as it’s…well, you know, important.
      2. -
    -
    4. -
  4. Bulletproof your font-stacks and rejoice!
    5. -
- -

For more background on how this came to be and why it's important, read Type study: Choosing fallback fonts.

- - - -
-
- - - - - - 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 += ''+item+''+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
tag consistently across browsers, - // (*ahem* IE *ahem*), we replaces all
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 -- cgit v1.2.3