Browse code

improved responsive typography styles

Brandon Mathis authored on 03/07/2011 at 21:06:38
Showing 1 changed files
... ...
@@ -10,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
10 10
 .mono { font-family: $mono; }
11 11
 
12 12
 body > header h1 {
13
-  font-size: 2.6em;
13
+  font-size: 2.2em;
14 14
   @extend .heading;
15 15
   font-weight: normal;
16 16
   line-height: 1.2em;
... ...
@@ -22,6 +22,15 @@ body {
22 22
   color: $text-color;
23 23
   @extend .serif;
24 24
 }
25
+h1 {
26
+  font-size: 2.2em;
27
+  line-height: 1.2em;
28
+}
29
+
30
+@media only screen and (min-width: 768px) {
31
+  body { font-size: 1.15em; }
32
+  h1 { font-size: 3em; line-height: 1.2em; }
33
+}
25 34
 
26 35
 #{headings()}{
27 36
   @extend .heading;
... ...
@@ -29,13 +38,6 @@ body {
29 29
   margin-bottom: 1em;
30 30
   font-weight: bold;
31 31
 }
32
-h1 {
33
-  font-size: 3.2em;
34
-  line-height: 1.2em;
35
-  @media only screen and (max-width: 768px) { font-size: 2.2em; }
36
-}
37
-
38
-
39 32
 h2, section h1 {
40 33
   font-size: 1.5em;
41 34
 }