use mobile first approach for layout
This commit is contained in:
parent
5933a34a32
commit
f1222bb324
|
@ -5,9 +5,31 @@
|
||||||
//@import "compass-holmes"; // css-based debugging
|
//@import "compass-holmes"; // css-based debugging
|
||||||
@import "susy";
|
@import "susy";
|
||||||
|
|
||||||
|
// Setting up the Magic Grid
|
||||||
|
$total-columns: 12; // 12 columns
|
||||||
|
$column-width: 4em; // columns are 4em wide
|
||||||
|
$gutter-width: 1em; // with 1em gutters
|
||||||
|
$grid-padding: 1em; // and 1em padding on the grid container
|
||||||
|
$container-style: magic;
|
||||||
|
$container-width: 50em;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Lobster', Georgia, Times, serif;
|
font-family: 'Lobster', Georgia, Times, serif;
|
||||||
font-size: 3em;
|
font-size: 2em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include at-breakpoint(40em) {
|
||||||
|
.span3 { @include span-columns(3,9); }
|
||||||
|
.span3_omega { @include span-columns(3 omega,9); }
|
||||||
|
.clear { clear: both; }
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -70,9 +92,17 @@ footer {
|
||||||
@include transition-timing-function(ease-in);
|
@include transition-timing-function(ease-in);
|
||||||
}
|
}
|
||||||
|
|
||||||
.span3 { @include span-columns(3,9); }
|
@include at-breakpoint(40em) {
|
||||||
.span3_omega { @include span-columns(3 omega,9); }
|
.span3 { @include span-columns(3,9); }
|
||||||
.clear { clear: both; }
|
.span3_omega {
|
||||||
|
@include span-columns(3 omega,9);
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
dd { margin-left: 0;}
|
||||||
|
}
|
||||||
|
@include at-breakpoint(45em) {
|
||||||
|
dd { margin-left: 1em;}
|
||||||
|
}
|
||||||
|
|
||||||
#sitelink {
|
#sitelink {
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -88,34 +118,6 @@ footer {
|
||||||
@include text-shadow(0px, -1px, 1px, rgb(255,255,255), 0px, 1px, 1px, rgb(102,102,102));
|
@include text-shadow(0px, -1px, 1px, rgb(255,255,255), 0px, 1px, 1px, rgb(102,102,102));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 900) {
|
|
||||||
dd { margin-left: 2em;}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 770) {
|
|
||||||
dd { margin-left: 1em;}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 770) {
|
|
||||||
dd { margin-left: 1em;}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 740) {
|
|
||||||
dd { margin-left: 0;}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600) {
|
|
||||||
.span3 { @include reset-columns}
|
|
||||||
.span3_omega { @include reset-columns}
|
|
||||||
dd { margin-left: 1em;}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 480) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
line-height: 1em;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#overview {
|
#overview {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
li {
|
li {
|
||||||
|
|
Loading…
Reference in New Issue