Clean up margins and make them more uniform.

- Margins of headers, paragraphs, code blocks, images, and blockquotes are now uniform - Scale font sizes and margins with a single change in the article font size rather than individually changing each element.
willkoehler · Aug 22, 2014 · b42c28f · b42c28f
1 parent 0f6fa8b
commit b42c28f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/_assets/stylesheets/_article.scss b/_assets/stylesheets/_article.scss
@@ -95,11 +95,11 @@ article {
 
     blockquote {
         border:0;
-        font-size:24px;
-        margin:1.2em -3em 1.2em 0;
+        margin: 1.5em -3em 1.5em 0;
         padding:0;
 
         p {
+            margin: 0;
             font-size:30px;
             line-height:1.1;
             color:$accent;
@@ -114,7 +114,7 @@ article {
     }
 
     h2 {
-        font-size:1.5em;
+        font-size:1.55em;
         margin:0.5em 0 1em;
         font-weight:600;
     }
@@ -177,7 +177,7 @@ article {
 
 
     .highlight {
-        margin: 1em -3.5em;
+        margin: 1.5em -3.5em;
 
         pre {
             border: 0;

diff --git a/_assets/stylesheets/_responsive.scss b/_assets/stylesheets/_responsive.scss
@@ -9,6 +9,9 @@
 @media (max-width: 720px) {
 
     article {
+        // Reduce the font size. This will effect all derived 'em' font sizes, margins, and padding
+        font-size: 16px;
+
         // reduce padding between image and article
         padding-top: 50px;
 
@@ -18,7 +21,7 @@
             margin-right: 2em;
         }
 
-        // display code blocks inline with text
+        // display code blocks inline with text (instead of shifted-left)
         .highlight {
             margin-left: 0em;
             margin-right: 0em;
@@ -31,29 +34,22 @@
 
         // display full-width images inline with text (instead of shifted-left)
         .full {
-            margin:1em 0;
+            margin-left: 0;
+            margin-right: 0;
         }
 
-        // reduce top/bottom margin of blockquotes and don't extend past right margin
+        // Reduce font size and don't extend blockquotes past right margin
         blockquote {
-            margin:1em 0;
+            margin-right: 0;
 
             p {
-                font-size:1em;
+                font-size: 1.2em;
             }
         }
 
-        // reduce font sizes
+        // reduce h1 font size slightly more
         h1 {
-            font-size:1.8em;
-        }
-
-        h2 {
-            font-size:1.4em;
-        }
-
-        p {
-            font-size:0.9em;
+            font-size: 2em;
         }
     }