adjust font sizes and breakpoints

mourner · Nov 5, 2012 · 9ad15f7 · 9ad15f7
1 parent 88356ea
commit 9ad15f7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/css/screen.css b/css/screen.css
@@ -7,7 +7,7 @@ a {
 	color: #06f;
 }
 h1 {
-	font-size: 2.4em;
+	font-size: 2.2em;
 }
 h2 {
 	font-size: 1.4em;
@@ -20,10 +20,14 @@ h3, h4 {
 }
 
 p, ul {
-	font-size: 14px;
+	font-size: 0.8125em;
 	line-height: 1.5;
 	margin: 0 0 1.5em;
 }
+code {
+	font-size: 1.2727em;
+	color: #777;
+}
 iframe {
 	border: 0;
 	overflow: hidden;
@@ -61,6 +65,9 @@ iframe {
 }
 
 @media only screen and (min-width: 34em) {
+	p, ul {
+		font-size: 0.875em;
+	}
 	.feature:first-child,
 	.info:first-child {
 		border-right: 1px dotted #aaa;
@@ -69,14 +76,14 @@ iframe {
 		padding: 1em;
 	}
 	h1 {
-		font-size: 3em;
+		font-size: 2.6em;
 	}
 	h2 {
-		font-size: 1.7em;
+		font-size: 1.6em;
 	}
 }
 
-@media only screen and (min-width: 52em) {
+@media only screen and (min-width: 54em) {
 	.content {
 		border: none;
 		border-right: 1px dotted #aaa;
@@ -85,10 +92,22 @@ iframe {
 	.info:first-child {
 		border: none;
 	}
+	h1 {
+		font-size: 3em;
+	}
+	h2 {
+		font-size: 1.7em;
+	}
 }
 
-@media only screen and (min-width: 80em) {
+@media only screen and (min-width: 76em) {
 	.info:first-child {
 		border-right: 1px dotted #aaa;
 	}
+	h1 {
+		font-size: 3.2em;
+	}
+	h2 {
+		font-size: 1.8em;
+	}
 }
diff --git a/index.html b/index.html
@@ -20,13 +20,13 @@
 			.feature, .info { width: 50%; }
 		}
 
-		@media only screen and (min-width: 52em) {
+		@media only screen and (min-width: 54em) {
 			.content { width: 66.66%; }
 			.sidebar { width: 33.33%; }
 			.info    { width: 100%;   }
 		}
 
-		@media only screen and (min-width: 80em) {
+		@media only screen and (min-width: 76em) {
 			.content { width: 58.33%; } /* 7/12 */
 			.sidebar { width: 41.66%; } /* 5/12 */
 			.info    { width: 50%;    }