centering the content, adjusting elements accordingly

3 files changed, 35 insertions, 16 deletions

diff --git a/bookmarklet/ffffallback.css b/bookmarklet/ffffallback.css
index d630c41..66f6794 100644
--- a/bookmarklet/ffffallback.css
+++ b/bookmarklet/ffffallback.css
@@ -251,7 +251,7 @@ body.ffffallback-hide-original #ffffallback-content-container {
   border-top:1px solid #444!important;
   list-style: none!important;
   margin: 0!important;
-  padding:0.5em 0 0.5em 1em!important;
+  padding:0.5em 0 1em 1em!important;
 }
 
 #ffffallback-fonts li b {
diff --git a/site/css/screen2.css b/site/css/screen2.css
index c1727cc..5d59d99 100644
--- a/site/css/screen2.css
+++ b/site/css/screen2.css
@@ -140,17 +140,23 @@ span.horizon {
   position:absolute;
 }
 span.rising {width:100%;  margin-top:15em;}
-span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}
+/*span.setting {width:52em; margin-top:2.5em;margin-left:-20em;}*/
+span.setting {width:100%; position:absolute;bottom:2.5em;}
+
+
+
 #main {
-  border-left: 1px solid #423e39;
-  margin:0 0 0 4em;
-  padding:3em 0 0 7em;
+  border: 1px solid #423e39;
+  border-width:0 1px;
+  margin:0 4em;
+  padding:3em 0 0 0;
   position:relative;
 }
 
 .content {
-  width:32em;
+  width:31em;
   position:relative;
+  margin: 0 auto;
 }
 hgroup {
   margin:0 0 12em 0;
@@ -239,12 +245,24 @@ hgroup h2 {
   left: 2.25em;
 }
 
-hgroup + p, hgroup + p + p {
+hgroup + p {
   font-size: 1.3125em;
   line-height:1.1429;
   margin-bottom:1.5em;
-  width:25em;
+  width:24em;
+}
+hgroup + p + p {
+  font-size: 1.125em;
+  line-height:1.5;
+  margin-bottom:1.5em;
 }
+.smcap {
+  font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
+  font-size:0.9em;
+  font-weight:200;
+  text-transform:uppercase;
+}
+
 
 .bkmrklt {
   font-size:1.3125em;
@@ -278,10 +296,10 @@ hgroup + p, hgroup + p + p {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
-  -moz-box-shadow:    0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
-  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
-  -o-box-shadow:      0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
-  box-shadow:         0 1px 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(0,0,0,0.2);
+  -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;
diff --git a/site/index.html b/site/index.html
index 97457d0..513d0ae 100644
--- a/site/index.html
+++ b/site/index.html
@@ -29,11 +29,11 @@
       <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. Ffffallback makes it easy to find the perfect fallback fonts, so you can make sure your designs degrade gracefully. Fffallback means a better typographic web for everyone.</strong></p> 
-    <p>In the spirit of bulletproof web design, we give you&hellip;</p>
+    <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 you can make sure your designs degrade gracefully. <span class="smcap">Ffffallback</span> means a better typographic web for everyone.</strong></p> 
+    <p>So, in the spirit of bulletproof web design, we give you&hellip;</p>
 
     <div class="bkmrklt">
-      <a href="#" id="bookmarklet" data-drag="Drag me!">ffffallback</a>
+      <a href="#" id="bookmarklet" data-drag="Drag me! ➹">ffffallback</a>
       <span>the bookmarklet!</span>
     </div>
     
@@ -59,8 +59,9 @@
     </ol>
   
     <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>
-    <span class="horizon setting"></span>
     <footer>
+      <span class="horizon setting"></span>
+      
       <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>