Fix layout bug in examples page

thoughtbot · Aug 24, 2012 · 81edcf0 · 81edcf0
1 parent 228ead5
commit 81edcf0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/_sass/desktop-example.scss b/_sass/desktop-example.scss
@@ -7,6 +7,10 @@ section {
   text-align: center;
   margin-bottom: 3em;
 
+  & > code {
+    display: block;
+  }
+
   div {
     height: $body-line-height*5;
     line-height: $body-line-height;
@@ -112,11 +116,20 @@ section {
   }
 
   &.fifth {
+    & > code {
+      margin-bottom: -1.5em;
+    }
     div.box {
       font-size: 0.78em;
       margin-top: 2em;
       @include span-columns(3);
-      @include nth-omega('4n+1');
+      @include nth-omega(4n);
     }
   }
 }
+
+div.code {
+  @include outer-container();
+  text-align: center;
+  padding-bottom: 0;
+}
diff --git a/_sass/mobile-example.scss b/_sass/mobile-example.scss
@@ -73,9 +73,12 @@ section {
       }
     }
   }
+}
 
-  &.fourth {
-
-  }
+div.code {
+  background-color: #eee;
+  text-align: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
diff --git a/css/desktop-example.css b/css/desktop-example.css
@@ -20,6 +20,8 @@ section {
     display: table; }
   section:after {
     clear: both; }
+  section > code {
+    display: block; }
   section div {
     height: 8.09em;
     line-height: 1.618em;
@@ -147,6 +149,8 @@ section {
     text-align: center; }
     section.fourth div#alpha:last-child {
       margin-right: 0; }
+  section.fifth > code {
+    margin-bottom: -1.5em; }
   section.fifth div.box {
     font-size: 0.78em;
     margin-top: 2em;
@@ -156,5 +160,19 @@ section {
     width: 23.23176%; }
     section.fifth div.box:last-child {
       margin-right: 0; }
-    section.fifth div.box:nth-child(4n+1) {
+    section.fifth div.box:nth-child(4n) {
       margin-right: 0; }
+
+div.code {
+  zoom: 1;
+  max-width: 64em;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  padding-bottom: 0; }
+  div.code:before, div.code:after {
+    content: "";
+    display: table; }
+  div.code:after {
+    clear: both; }
diff --git a/css/mobile-example.css b/css/mobile-example.css
@@ -212,3 +212,9 @@ section {
     background-color: #eee; }
   section.third div#alpha article {
     background-color: #FFF; }
+
+div.code {
+  background-color: #eee;
+  text-align: center;
+  padding-top: 1em;
+  padding-bottom: 1em; }
diff --git a/examples/index.html b/examples/index.html
@@ -92,14 +92,16 @@ <h3>Shifting columns</h3>
 </section>
 
 <h3>Automatic rows</h3>
+<div class="code">
+  <code>@include outer-container;</code>
+</div>
 
 <section class="fifth">
-<code>@include outer-container;</code>
   <div class="box">
     <pre>
 li.block {
   @include span-columns(3);
-  @include nth-omega('4n+1');
+  @include nth-omega(4n);
 }</pre>
   </div>
     <div class="box">