Example page layout and style tweaks.

thoughtbot · Nov 9, 2012 · 49482e0 · 49482e0
1 parent 5f8ec2d
commit 49482e0
Show file tree

Hide file tree

Showing 8 changed files with 305 additions and 454 deletions.
diff --git a/_sass/desktop-example.scss b/_sass/desktop-example.scss
@@ -13,7 +13,7 @@ section {
   }
 
   div {
-    height: $body-line-height*5;
+    height: $body-line-height*3;
     line-height: $body-line-height;
     text-align: left;
     padding: 1em;
@@ -27,20 +27,56 @@ section {
   }
 
   &.first {
-    div#alpha, div#zeta {
+    div#alpha {
+      @include span-columns(1);
+    }
+
+    div#beta {
+      @include span-columns(11);
+    }
+
+    div#gamma {
+      @include span-columns(2);
+    }
+
+    div#delta {
+      @include span-columns(10);
+    }
+
+    div#epsilon {
+      @include span-columns(3);
+    }
+
+    div#zeta {
+      @include span-columns(9);
+    }
+
+    div#eta {
       @include span-columns(4);
     }
 
-    div#beta, div#epsilon {
+    div#theta {
       @include span-columns(8);
     }
 
-    div#gamma,  div#delta {
+    div#iota {
+      @include span-columns(5);
+    }
+
+    div#kappa {
+      @include span-columns(7);
+    }
+
+    div#lambda {
+      @include span-columns(6);
+    }
+
+    div#mu {
       @include span-columns(6);
     }
 
-    div#beta, div#delta {
-      @include omega();
+    div#beta, div#delta, div#zeta, div#theta, div#kappa, div#mu {
+      @include omega;
     }
   }
 
@@ -60,6 +96,7 @@ section {
 
         aside {
           @include span-columns(4 of 8);
+          border: none;
           height: 84%;
           padding: 1em;
         }
@@ -78,7 +115,6 @@ section {
       height: 5.5em;
       text-align: center;
       border-bottom: 0;
-      background-color: #ddd;
     }
 
     div#alpha {

diff --git a/_sass/mobile-example.scss b/_sass/mobile-example.scss
@@ -1,13 +1,19 @@
 @import "bourbon/bourbon";
 @import "variables";
 $visual-grid: true;
-$visual-grid-color: #eee;
+$visual-grid-color: #eef9ff;
 $visual-grid-opacity: 0.4;
+$ltblue: #D5EEFB;
+$midblue: #AADBF5;
+$dkblue: #41A8DF;
+$dkerblue: #298EC3;
+$textblue: #072f44;
 @import "neat/neat";
 @import "typography";
 @import "reset";
 
 body {
+  color: $textblue;
   line-height: $body-line-height;
   text-align: center;
 }
@@ -21,7 +27,7 @@ pre {
 }
 
 header {
-  background-color: #000;
+  background-color: $dkerblue;
   @include clearfix();
   padding: 0.5em 1em;
   text-align: center;
@@ -37,14 +43,14 @@ header {
 }
 
 section {
-  background-color: #eee;
+  background-color: $ltblue;
   text-align: center;
   line-height: $body-line-height*2;
 
   div {
-    border-bottom: 1px solid #bbb;
-    background-color: #ddd;
+    background-color: $midblue;
     font-size: 0.8em;
+    margin-bottom: 2em;
   }
 
   &.first {
@@ -58,23 +64,27 @@ section {
   &.second {
     div#beta {
       aside, article {
-        background-color: #BBB;
+        background-color: $dkblue;
+      }
+
+      aside {
+        border-bottom: 1px solid $dkerblue;
       }
     }
   }
 
   &.third {
      div#dummy {
-      background-color: #ddd;
+      background-color: $midblue;
     }
 
     div#alpha {
       aside {
-        background-color: #eee;
+        background-color: $dkblue;
       }
 
       article {
-        background-color: #FFF;
+        background-color: $dkerblue;
       }
     }
   }
@@ -116,7 +126,7 @@ section {
 }
 
 div.code {
-  background-color: #eee;
+  background-color: $ltblue;
   text-align: center;
   padding-top: 1em;
   padding-bottom: 1em;