improved responsive typography styles

This commit is contained in:
Brandon Mathis 2011-07-03 17:06:38 -04:00
parent b9ad060b5d
commit 252bfd24af

View File

@ -10,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
.mono { font-family: $mono; } .mono { font-family: $mono; }
body > header h1 { body > header h1 {
font-size: 2.6em; font-size: 2.2em;
@extend .heading; @extend .heading;
font-weight: normal; font-weight: normal;
line-height: 1.2em; line-height: 1.2em;
@ -22,6 +22,15 @@ body {
color: $text-color; color: $text-color;
@extend .serif; @extend .serif;
} }
h1 {
font-size: 2.2em;
line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
body { font-size: 1.15em; }
h1 { font-size: 3em; line-height: 1.2em; }
}
#{headings()}{ #{headings()}{
@extend .heading; @extend .heading;
@ -29,13 +38,6 @@ body {
margin-bottom: 1em; margin-bottom: 1em;
font-weight: bold; font-weight: bold;
} }
h1 {
font-size: 3.2em;
line-height: 1.2em;
@media only screen and (max-width: 768px) { font-size: 2.2em; }
}
h2, section h1 { h2, section h1 {
font-size: 1.5em; font-size: 1.5em;
} }