From af5ab4e6c93402fcfd6d9748ce94498bade2ba6c Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Fri, 12 Nov 2010 22:01:26 -0800
Subject: [PATCH] Clean up the gradient demo page.

---
 .../compass/css3/gradient/markup.haml         | 56 ++++++++++---------
 .../compass/css3/gradient/stylesheet.sass     | 10 +++-
 doc-src/content/stylesheets/_examples.sass    |  2 +
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml
index ab893e81..efd72744 100644
--- a/doc-src/content/examples/compass/css3/gradient/markup.haml
+++ b/doc-src/content/examples/compass/css3/gradient/markup.haml
@@ -1,35 +1,37 @@
-%p
-  this box has no gradients
+.ex
+  .gradient-example
+  %p
+    This box has no gradients
 
-.gradient-example
+.ex
+  #radial-gradient.gradient-example
+  %p
+    This will yield a radial gradient with an apparent specular highlight  
 
-%p
-  This will yield a radial gradient with an apparent specular highlight  
+.ex
+  #linear-gradient.gradient-example
+  %p
+    This yields a linear gradient spanning from $start to $end coordinates  
 
-#radial-gradient.gradient-example
+.ex
+  #v-gradient.gradient-example
+  %p
+    This yields a gradient starting at the top with #fff, ending in #aaa  
 
-%p
-  This yields a linear gradient spanning from $start to $end coordinates  
+.ex
+  #v-gradient-2.gradient-example
+  %p
+    Same as above but with a #ccc at the halfway point  
 
-#linear-gradient.gradient-example
+.ex
+  #v-gradient-3.gradient-example
+  %p
+    Same as the first example but with #ccc at the
+    30% from the top, and #bbb at 70% from the top  
 
-%p
-  This yields a gradient starting at the top with #fff, ending in #aaa  
 
-#v-gradient.gradient-example
+.ex
+  #h-gradient.gradient-example
+  %p
+    This yields a horizontal linear gradient spanning from left to right.
 
-%p
-  Same as above but with a #ccc at the halfway point  
-
-#v-gradient-2.gradient-example
-
-%p
-  Same as the first example but with #ccc at the
-  30% from the top, and #bbb at 70% from the top  
-
-#v-gradient-3.gradient-example
-
-%p
-  This yields a horizontal linear gradient spanning from left to right.
-
-#h-gradient.gradient-example
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass
index a827b866..5e07c757 100644
--- a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass
+++ b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass
@@ -1,10 +1,18 @@
-@import compass/css3
+@import compass
+.ex
+  width: 48%
+  margin-right: 2%
+  float: left
+  +clearfix
 
 .gradient-example
   width: 80px
   height: 80px
   background: red
   margin: 20px
+  border: 1px solid #111
+  float: left
+  margin: 1em 1em 0 0
 
 // This will yield a radial gradient with an apparent specular highlight  
 #radial-gradient
diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass
index 125b9a7e..1cb6f1f4 100644
--- a/doc-src/content/stylesheets/_examples.sass
+++ b/doc-src/content/stylesheets/_examples.sass
@@ -4,6 +4,8 @@
     h1
       text-align: center
 
+  #demo
+    +clearfix
   #how
     +full(12)
     +pie-clearfix