adjusted some copy and related styles

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>&#x25bc;</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>&#x25bc;</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>&#x25bc;</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();