centering the content, adjusting elements accordingly

author: Josh Brewer 2011-04-19 18:11:35 -0700
committer: Josh Brewer 2011-04-19 18:11:35 -0700
commit: b38483bccfedf008638a8f207b9f685fb9934997 (patch)
tree: 009280383df4a2068bcc76ac784e00d11545b004
parent: e674bd5f72d0f9fd68c707cd355c4fc72bb37b47 (diff)
download: ffffallback-b38483bccfedf008638a8f207b9f685fb9934997.tar.bz2
2 files changed, 45 insertions, 31 deletions
diff --git a/site/css/screen2.css b/site/css/screen2.css
index 5d59d99..076729e 100644
--- a/site/css/screen2.css
+++ b/site/css/screen2.css
@@ -141,7 +141,7 @@ span.horizon {
 }
 span.rising {width:100%;  margin-top:15em;}
 /*span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}*/
-span.setting {width:100%; position:absolute;bottom:2.5em;}
+span.setting {width:100%; margin-top: -20em;}
 
 
 
@@ -154,7 +154,7 @@ span.setting {width:100%; position:absolute;bottom:2.5em;}
 }
 
 .content {
-  width:31em;
+  width:32em;
   position:relative;
   margin: 0 auto;
 }
@@ -251,8 +251,17 @@ hgroup + p {
   margin-bottom:1.5em;
   width:24em;
 }
-hgroup + p + p {
+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;
 }
@@ -262,7 +271,9 @@ hgroup + p + p {
   font-weight:200;
   text-transform:uppercase;
 }
-
+.wf-active .smcap {
+  font-size:0.7em;
+}
 
 .bkmrklt {
   font-size:1.3125em;
@@ -333,21 +344,18 @@ hgroup + p + p {
   text-transform:uppercase;
 }
 
+
 h3 {
-  margin:0 0 1em;
+  margin:0 0 1.5em;
 }
-#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;
+h3 a {
+  color:rgba(202,191,171,0.75);
+  font-weight:normal;
+  position:relative;
+  top:-4px;
 }
-
 #main ol {
-  margin:0 0 1.5em;
+  margin:0;
 }
 #main ol li {
   margin-bottom:1em;
@@ -357,7 +365,7 @@ h3 {
   font-size:0.8125em;
   margin-top:1em;
 }
-#main ol + p {
+#main aside + p {
   background:url(../images/bang.png) no-repeat 3px 1px;
   font-weight:bold;
   padding-left:2em;
@@ -366,6 +374,12 @@ h3 {
 .ie #main ol.steps {
   display:none;
 } 
+#main aside {
+  color:rgba(202,191,171,0.5);
+  font-size: 0.75em;
+  line-height: 1.7;
+  margin:0 0 1.5em;
+}
 
 
 footer {
diff --git a/site/index.html b/site/index.html
index 513d0ae..4ec4d5e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -21,7 +21,7 @@
   <![endif]-->
 </head>
 <body>
-  <span class="horizon rising"></span>
+  <span class="horizon rising"></span>  
   <div id="main">
    <div class="content">
     <hgroup>
@@ -36,9 +36,8 @@
       <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a>
       <span>the bookmarklet!</span>
     </div>
-    
-    
-    <h3>Okay, so how do I use this thing?</h3>
+
+    <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>
@@ -46,22 +45,23 @@
         <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 &amp; Safari) or Firefox. We <strike>are</strike> might get it working for IE and Opera if time permits.</p>
-    </aside>
     <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 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 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>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 &amp; 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>
-      <span class="horizon setting"></span>
-      
+    
+    
+    <footer>      
       <p><span class="clear"><a href="mailto:feedback@fallback.com">Questions, comments &amp; 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>
@@ -72,7 +72,7 @@
     </footer>  
   </div> 
   </div>
-
+  <span class="horizon setting"></span>
   <script src="js/css_browser_selector.js" ></script>  
   <script>
     var myURL = window.location.toString();
author	Josh Brewer	2011-04-19 18:11:35 -0700
committer	Josh Brewer	2011-04-19 18:11:35 -0700
commit	b38483bccfedf008638a8f207b9f685fb9934997 (patch)
tree	009280383df4a2068bcc76ac784e00d11545b004
parent	e674bd5f72d0f9fd68c707cd355c4fc72bb37b47 (diff)
download	ffffallback-b38483bccfedf008638a8f207b9f685fb9934997.tar.bz2