from susy to bourbon/neat

This commit is contained in:
2014-10-06 22:27:20 -04:00
parent c28cc89649
commit ff419b8276
7 changed files with 57 additions and 52 deletions

View File

@ -1,4 +1,4 @@
@import "susy";
@import "bourbon";
@font-face {
font-family: Typewriter;
@ -8,13 +8,14 @@
$serif: 'PT Serif', 'Georgia', serif;
$typewriter: Typewriter,"Georgia","Times",serif;
$total-columns : 4;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
// Layout
$max-width: em(624) !default;
$grid-columns: 8;
$column: 4em;
$gutter: 1em;
$container-style: magic;
//$visual-grid: true;
$show-grid-backgrounds : true;
@import "neat";
$break: 8;
$mobile: new-breakpoint(max-width 500px 4);

View File

@ -1,5 +1,3 @@
@import "base";
body {
color: #343434;
background: #ffffff;
@ -22,23 +20,28 @@ body {
}
.container {
@include container($total-columns, $break);
@include outer-container;
#header {
header {
@include span-columns(2);
h1 {
a {
color: #343434;
}
}
@include media($mobile) {
@include span-columns(4);
}
}
nav {
text-transform: uppercase;
line-height: 3em;
@include span-columns(6);
ul.navigation {
border-left: 4px solid #dedede;
padding-left: 0.5em;
border-left: 1px solid #dedede;
padding-left: 1em;
li {
display: inline;
@ -50,6 +53,14 @@ body {
}
}
}
@include media($mobile) {
@include span-columns(4);
line-height: 1em;
ul.navigation {
border-left: 4px solid #dedede;
padding-left: 0.5em;
}
}
}
}
@ -86,10 +97,18 @@ body {
clear: both;
border-bottom: 1px solid #dedede;
line-height: 2;
time {
display: none;
time {
display: block;
float: left;
width: 8em;
color: #696969;
}
@include media($mobile) {
time {
display: none;
}
}
}
.vcard {
@ -98,7 +117,6 @@ body {
clear: both;
p {
font-size: 16px;
margin: 0 0 0.5em 0;
}
@ -112,36 +130,3 @@ body {
}
}
}
@include at-breakpoint($break) {
body .container {
#header {
clear: both;
header {
@include span-columns(2);
}
nav {
line-height: 3em;
@include span-columns(6 omega);
ul.navigation {
border-left: 1px solid #dedede;
padding-left: 1em;
}
}
}
#main {
article.list {
time {
display: block;
float: left;
width: 8em;
color: #696969;
}
}
}
}
}