responsive styling

2 files changed, 43 insertions, 20 deletions

diff --git a/site/css/screen2.css b/site/css/screen2.css
index 076729e..f00cc84 100644
--- a/site/css/screen2.css
+++ b/site/css/screen2.css
@@ -165,11 +165,16 @@ hgroup h1 {
   font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
   font-size:3.5em;
   font-weight:200;
+  letter-spacing:4px;
   line-height:1;
   margin-left:1.35em;
   text-transform:uppercase;
 }
 
+.wf-active hgroup h1{
+  letter-spacing:0px;
+}
+
 hgroup h1:before { 
   content: "F"; 
   background:#fef1d8;
@@ -249,7 +254,7 @@ hgroup + p {
   font-size: 1.3125em;
   line-height:1.1429;
   margin-bottom:1.5em;
-  width:24em;
+  xwidth:24em;
 }
 hgroup + p strong {
   line-height: 1.25;
@@ -267,7 +272,7 @@ hgroup + p + p {
 }
 .smcap {
   font-family:"kulturista-web-1","kulturista-web-2", "Courier New";
-  font-size:0.9em;
+  font-size:1em;
   font-weight:200;
   text-transform:uppercase;
 }
@@ -360,11 +365,23 @@ h3 a {
 #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;
@@ -374,12 +391,7 @@ h3 a {
 .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 {
@@ -405,23 +417,34 @@ footer .twitter-share-button {
 /* 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;}
 	.content{
 		width: 320px;
 	}
-}
-
-/* One-column - iPhone landscape */
-@media (orientation:landscape) and (min-width:321px) and (max-width:480px){
-	/*
-	.container{
-		width: 480px;
-	}*/
+	#main {
+	  border:0;
+	  margin:0;
+	  padding-top:2em;
+	}
+	.rising {margin-top:13em;}
+	.setting {margin-top:-25em;}
+	hgroup h1 {font-size:2.6em;}
+	hgroup h2 {font-size:1em;}
+	.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){
-	hgroup {
-		margin-bottom:10em;
+  #main {
+    margin:0 2em;
+  }
+	.content {
+		
 	}
 
 }
diff --git a/site/index.html b/site/index.html
index 4ec4d5e..3363175 100644
--- a/site/index.html
+++ b/site/index.html
@@ -56,7 +56,7 @@
       <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>
+      <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>
     
@@ -67,7 +67,7 @@
       <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>
       <p class="tweet">
         <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ffffallback.com" data-text="I'm using @ffffallback to help bulletproof my web typography. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-        <small>Tell the world about FFFFALLBACK!</small>
+        <small>Tell the world about <span class="smcap">FFFFALLBACK</span>!</small>
       </p>
     </footer>  
   </div>