Permalink
Browse files

Fix layout bug in examples page

  • Loading branch information...
Reda Lemeden
Reda Lemeden committed Aug 9, 2012
1 parent 228ead5 commit 81edcf0758eec115b0c215ef05063ed981e01aeb
Showing with 49 additions and 7 deletions.
  1. +14 −1 _sass/desktop-example.scss
  2. +6 −3 _sass/mobile-example.scss
  3. +19 −1 css/desktop-example.css
  4. +6 −0 css/mobile-example.css
  5. +4 −2 examples/index.html
View
@@ -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;
+}
@@ -73,9 +73,12 @@ section {
}
}
}
+}
- &.fourth {
-
- }
+div.code {
+ background-color: #eee;
+ text-align: center;
+ padding-top: 1em;
+ padding-bottom: 1em;
}
View
@@ -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; }
View
@@ -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; }
View
@@ -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">

0 comments on commit 81edcf0

Please sign in to comment.