_demo.scss in compass-ui-0.0.4

- old
+ new

@@ -4,22 +4,33 @@
 $test-blue: #049CDB;
 $test-blue-dark: #0064CD;
 $test-red: #9D261D;
 $test-orange: #F89406;
 $test-green: #46A546;
+$test-green-light: lighten($test-green, 45%);
+$test-green-medium: lighten($test-green, 30%);
+$test-green-dark: darken($test-green, 18%);
 
 body{ 
-  font: 62.5% Arial, Helvetica, sans-serif;
-  margin: 20px 0;
+  font: 62.5% "Trebuchet MS", Helvetica, Arial, sans-serif;
+  // font: 100% "Trebuchet MS", Helvetica, sans-serif;
 }
 
 
 #container {
-  @include container;
+  // @include container;
+  margin: 20px auto;
+  // width: 60%;
+  width: 90%;
+  max-width: 960px;
 
   #header, #footer {
-    @include column(24, true);
+    // @include column(24, true);
+    margin: 0 auto 20px; 
+    // width: 93.75%; /* 900px / 960px */
+    width: 100%;
+
     background-color: $test-blue-dark;
     @include background-image(linear-gradient($test-blue, $test-blue-dark));
     @include border-radius(5px);
     color: white;
     margin-bottom: 10px;
@@ -27,10 +38,11 @@
     h1 {
       font-size: 2.0em;
       color: white;
       margin: 6px;
       padding: 10px 0;
+      text-transform: uppercase;
     }
     
   }
 
   // a {
@@ -39,16 +51,20 @@
   //     color: $test-blue;
   //   }
   // }
 
   #content {
-    @include column(18);
+    // @include column(18);
     padding-top: 10px;
+    float: left; 
+    width: 80%; /* 566px / 900px */
   }
 
   #sidebar {
-    @include column(6, true);
+    // @include column(6, true);
+    float: right;
+    width: 20%; /* 331px / 900px */
 
     a {
       display: block;
       margin: 5px 0;
       text-decoration: none;
@@ -63,10 +79,25 @@
     //   padding: 0.9em 0.7em;
     // }
   }
 }
 
+// media queries
+
+@media screen and (max-width: 768px) {
+  #container {
+    margin: 20px;
+    width: auto;
+
+    #sidebar, #content, #header, #footer {
+      margin: 0 0 20px;
+      width: 100%;
+    }
+  }
+}
+
+
 .demoHeaders { 
   margin-top: 2em; 
   margin-bottom: 1em;
 }
 ul#icons { 
@@ -100,17 +131,21 @@
   font-weight: bold;
 }
 
 h2#showing {
   @include border-radius(5px);
-  // @include background-image(linear-gradient($test-blue, $test-blue-dark));
-  // @include background-image(linear-gradient(lighten($test-orange, 20%), $test-orange));
   background-color: $test-green;
-  @include background-image(linear-gradient(lighten($test-green, 20%), $test-green));
-  color: darken($test-green, 18%);
+  @include background-image(linear-gradient($test-green-medium, $test-green));
+  color: $test-green-dark;
   padding: 0.9em;
   span {
     color: white;
+    display: block;
+  }
+  span.summary {
+    font-size: 0.7em;
+    color: #ffffff;
+    padding-top: 6px;
   }
 }
 
 p {
   font-size: 1.3em;