diff options
| -rw-r--r-- | bookmarklet/ffffallback.js | 4 | ||||
| -rw-r--r-- | site/css/screen2.css | 44 | ||||
| -rw-r--r-- | site/index.html | 4 |
3 files changed, 15 insertions, 37 deletions
diff --git a/bookmarklet/ffffallback.js b/bookmarklet/ffffallback.js index 15a8f5d..d374986 100644 --- a/bookmarklet/ffffallback.js +++ b/bookmarklet/ffffallback.js @@ -98,6 +98,8 @@ var knownBoringFonts = [ 'helvetica', + 'helvetica neue', + 'normal helvetica', 'lucida grande', 'tahoma', 'microsoft sans serif', @@ -336,7 +338,7 @@ var fontClass, row; $.each($.getAllFontsInUse(document.body), function(font) { fontClass = $.getClassForFont(font); - addRowWithContent('<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75;"></textarea>'); + addRowWithContent('<b>' + font + '</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="' + fontClass + '" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75 !important;"></textarea>'); }); addRowWithContent('<b class="global"><i>Or</i> Set a global fallback</b><input type="text" value="" placeholder="Fallback font" class="ffffallback-specify-font" data:font-class="*" /><a href="#" class="ffffallback-disclosure"><span>▼</span></a><textarea class="ffffallback-more-values" placeholder="e.g. line-height: 1.75 !important;"></textarea>'); diff --git a/site/css/screen2.css b/site/css/screen2.css index cf629e5..c1727cc 100644 --- a/site/css/screen2.css +++ b/site/css/screen2.css @@ -149,7 +149,7 @@ span.setting {width:52em; margin-top:2.5em;margin-left:-20em;} } .content { - max-width:32em; + width:32em; position:relative; } hgroup { @@ -243,7 +243,7 @@ hgroup + p, hgroup + p + p { font-size: 1.3125em; line-height:1.1429; margin-bottom:1.5em; - max-width:25em; + width:25em; } .bkmrklt { @@ -334,7 +334,11 @@ h3 { #main ol li { margin-bottom:1em; } - +#main ol .note { + display:block; + font-size:0.8125em; + margin-top:1em; +} #main ol + p { background:url(../images/bang.png) no-repeat 3px 1px; font-weight:bold; @@ -369,12 +373,9 @@ footer .twitter-share-button { /* media queries for responsive design */ /* One-column - iPhone portrait and any 320px device */ @media (max-width:640px){ - .container{ + .content{ width: 320px; } - #secondary{ - margin-left: 15px; - } } /* One-column - iPhone landscape */ @@ -385,7 +386,7 @@ footer .twitter-share-button { }*/ } -/* Two-column - iPad */ +/* iPad */ @media (min-width:641px) and (max-width:960px){ hgroup { margin-bottom:10em; @@ -393,34 +394,7 @@ footer .twitter-share-button { } -/* 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/ */ diff --git a/site/index.html b/site/index.html index f46d916..9c3291d 100644 --- a/site/index.html +++ b/site/index.html @@ -53,7 +53,7 @@ <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> + <span 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.</span> </li> <li>Bulletproof your font-stacks and <strong>rejoice</strong>!</li> </ol> @@ -71,6 +71,8 @@ </footer> </div> </div> + <script src="http://ffffallback.com/bookmarklet/ffffallback.js" ></script> + <link rel="stylesheet" href="http://ffffallback.com/bookmarklet/bookmarklet.css" type="text/css" media="screen"/> <script src="js/css_browser_selector.js" ></script> <script> var myURL = window.location.toString(); |