Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fix layout bug in examples page

  • Loading branch information...
commit 81edcf0758eec115b0c215ef05063ed981e01aeb 1 parent 228ead5
@kaishin kaishin authored
View
15 _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;
+}
View
9 _sass/mobile-example.scss
@@ -73,9 +73,12 @@ section {
}
}
}
+}
- &.fourth {
-
- }
+div.code {
+ background-color: #eee;
+ text-align: center;
+ padding-top: 1em;
+ padding-bottom: 1em;
}
View
20 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; }
View
6 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; }
View
6 examples/index.html
@@ -92,14 +92,16 @@
</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">
Please sign in to comment.
Something went wrong with that request. Please try again.