From b9be4702fd83737d0013271bf913dbb2be74d048 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Mon, 10 Jan 2011 09:26:34 -0800
Subject: [PATCH] made the stretching example be less lame.

---
 .../compass/layout/stretching/markup.haml     | 45 ++++++++++++-------
 .../compass/layout/stretching/stylesheet.sass | 19 ++++----
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/doc-src/content/examples/compass/layout/stretching/markup.haml b/doc-src/content/examples/compass/layout/stretching/markup.haml
index 24a9dbba..2bb89b98 100644
--- a/doc-src/content/examples/compass/layout/stretching/markup.haml
+++ b/doc-src/content/examples/compass/layout/stretching/markup.haml
@@ -1,17 +1,30 @@
 .example
-  Click on the the following links to make them stretch.
-  Click <a href="#">here</a> to dismiss it.
-  #stretch-container
-    %ul
-      %li
-        %a#stretch-full(href="#stretch-full")
-          This element is fully stretched.
-      %li
-        %a#stretch-offset(href="#stretch-offset")
-          This element is stretched with a 1em offset on each side.
-      %li
-        %a#stretch-x(href="#stretch-x")
-          This element is stretched horizontally.
-      %li
-        %a#stretch-y(href="#stretch-y")
-          This element is stretched vertically.
+  %ul
+    %li.stretch-container
+      #stretch-full
+        This element is fully stretched.
+    %li.stretch-container
+      #stretch-offset
+        This element is stretched with a 1em offset on each side.
+    %li.stretch-container
+      #stretch-x
+        This
+        %br
+        element
+        %br
+        is
+        %br
+        stretched
+        %br
+        horizontally.
+    %li.stretch-container
+      #stretch-y
+        This
+        %br
+        element
+        %br
+        is
+        %br
+        stretched
+        %br
+        vertically.
diff --git a/doc-src/content/examples/compass/layout/stretching/stylesheet.sass b/doc-src/content/examples/compass/layout/stretching/stylesheet.sass
index b3ba1412..63894268 100644
--- a/doc-src/content/examples/compass/layout/stretching/stylesheet.sass
+++ b/doc-src/content/examples/compass/layout/stretching/stylesheet.sass
@@ -1,29 +1,32 @@
 @import "compass/layout/stretching"
+@import "compass/utilities"
 @import "compass/css3"
 
-#stretch-container
+.stretch-container
   border: 1px solid #999
-  min-width: 200px
-  min-height: 200px
+  width: 200px
+  height: 200px
   position: relative
+  +inline-block
 .stretched
   $stretch-color: #4C6B99
   border: 3px solid $stretch-color
   +border-radius(8px)
   display: block
   background-color: darken($stretch-color, 30%)
+  color: white
   text-align: center
   vertical-align: middle
-  padding: 2em 0
-#stretch-full:target
+  padding: 0.5em
+#stretch-full
   @extend .stretched
   +stretch
-#stretch-offset:target
+#stretch-offset
   @extend .stretched
   +stretch(1em, 1em, 1em, 1em)
-#stretch-x:target
+#stretch-x
   @extend .stretched
   +stretch-x
-#stretch-y:target
+#stretch-y
   @extend .stretched
   +stretch-y