Clean up the gradient demo page.

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
-
-%p
+.ex
+  #radial-gradient.gradient-example
+  %p
     This will yield a radial gradient with an apparent specular highlight  
 
-#radial-gradient.gradient-example
-
-%p
+.ex
+  #linear-gradient.gradient-example
+  %p
     This yields a linear gradient spanning from $start to $end coordinates  
 
-#linear-gradient.gradient-example
-
-%p
+.ex
+  #v-gradient.gradient-example
+  %p
     This yields a gradient starting at the top with #fff, ending in #aaa  
 
-#v-gradient.gradient-example
-
-%p
+.ex
+  #v-gradient-2.gradient-example
+  %p
     Same as above but with a #ccc at the halfway point  
 
-#v-gradient-2.gradient-example
-
-%p
+.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  
 
-#v-gradient-3.gradient-example
 
-%p
+.ex
+  #h-gradient.gradient-example
+  %p
     This yields a horizontal linear gradient spanning from left to right.
 
-#h-gradient.gradient-example

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

doc-src/content/stylesheets/_examples.sass

@@ -4,6 +4,8 @@
     h1
       text-align: center
 
+  #demo
+    +clearfix
   #how
     +full(12)
     +pie-clearfix