Mic92
/
homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use mobile first approach for layout

This commit is contained in:
Jörg Thalheim 2012-09-01 20:39:46 +02:00
parent 5933a34a32
commit f1222bb324
1 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
source/stylesheets/site.css.scss
View File

@ -5,9 +5,31 @@
//@import "compass-holmes"; // css-based debugging
@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 {
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 {
@ -70,9 +92,17 @@ footer {
@include transition-timing-function(ease-in);
}
.span3 { @include span-columns(3,9); }
.span3_omega { @include span-columns(3 omega,9); }
.clear { clear: both; }
@include at-breakpoint(40em) {
.span3 { @include span-columns(3,9); }
.span3_omega {
@include span-columns(3 omega,9);
@include clearfix;
}
dd { margin-left: 0;}
}
@include at-breakpoint(45em) {
dd { margin-left: 1em;}
}
#sitelink {
float: left;
@ -88,34 +118,6 @@ footer {
@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 {
font-size: 2em;
li {