improved all areas of css coverage including sizing for mobile

public/css/main.css

@@ -1,135 +1,171 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
 /* fonts */
 @font-face {
-    font-family: 'allerregular';
-    src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/aller_rg-webfont.woff?') format('woff'),
-         url('https://d2xxklvztqk0jd.cloudfront.net/fonts/aller_rg-webfont.ttf') format('truetype');
+    font-family: 'aller';
+    src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/aller.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'droidsans';
+    src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/droidsans.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 @font-face {
-    font-family: 'droid_sansregular';
-    src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/droidsans-webfont.woff?') format('woff'),
-         url('https://d2xxklvztqk0jd.cloudfront.net/fonts/droidsans-webfont.ttf') format('truetype');
+    font-family: 'formatekonave';
+    src: url('https://d2xxklvztqk0jd.cloudfront.net/fonts/formatekonave.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
-/* default styles */
+/**
+ * css reset
+ * html5 display-role reset
+ * and default styles
+ */
+html, body, div, span, object, h1, h2, h3, h4, h5,
+h6, p, blockquote, pre, a, code, em, img, strong,
+dl, ol, ul, li, embed, footer, header, menu, nav,
+time, audio, video, progress {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+footer, header, menu, nav {
+    display: block;
+}
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
+}
 html {
-    font-family: 'droid_sansregular', helvetica;
+    font-family: 'droidsans', helvetica;
+    font-size: 32px;
 }
-body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
-    font-size-adjust: 0.5;
+body {
+    line-height: 1.4;
+    color: #333;
+    background-color: #fff;
 }
 h1 {
-    font-size: 2em;
-    line-height: 1.25;
+    font-size: 2.25em;
 }
 h2 {
-    font-size: 1.625em;
-    line-height: 1.15384615;
+    font-size: 1.875em;
 }
 h3 {
-    font-size: 1.375em;
-    line-height: 1.13636364;
+    font-size: 1.5em;
 }
 h4 {
   font-size: 1.125em;
-  line-height: 1.11111111;
-}
-blockquote, strong {
-    font-size: 1.25em;
-    line-height: 1.25;
 }
-h1, h2, h3, h4 {
-    font-family: 'allerregular', sans-serif, georgia;
-    margin-bottom: 15px;
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'aller', sans-serif, georgia;
     margin-top: 20px;
+    margin-bottom: 12px;
     letter-spacing: 2px;
 }
+h3, h4 {
+    margin-top: 15px;
+    margin-bottom: 10px;
+}
+h5, h6 {
+    margin-top: 10px;
+}
 h1, h2 {
     font-weight: bolder;
 }
-h3, h4, strong {
+h3, h4, strong, b {
     font-weight: bold;
 }
-p, ul {
-    margin-bottom: 10px;
+h1 a, h2 a, h3 a, h4 a, strong a {
+    color: #444;
+    text-decoration: underline;
+}
+strong {
+    font-size: 1.15em;
+}
+em {
+    font-style: italic;
+    font-weight: 200;
+}
+blockquote {
+    quotes: none;
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: 5px solid #eee;
+    font-style: italic;
+}
+hr {
+    height: 0;
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+pre {
+    font-family: 'formatekonave', monospace;
+}
+code {
+    padding: 2px 4px;
+    font-size: 0.9em;
+    padding: 0.05em 4px;
+    border-radius: 4px;
+    background: #000;
+    overflow-x: auto;
+    color: #f8f8f8;
+}
+pre code {
+    display: block;
+    margin: 10px 0;
+    padding: 0.5em;
+}
+ul {
+    list-style: disc;
+}
+ol {
+    list-style: decimal;
 }
 li {
     margin-left: 45px;
-    list-style-type: disc;
+    margin-bottom: 5px;
+    line-height: 1.25;
 }
-p>a, li>a {
-    text-decoration: underline;
+ul, ol, dl, p {
+    margin-bottom: 10px;
 }
 a, a:hover, a:active, a:visited {
-    color: #000;
-    text-decoration: none;
+    background-color: transparent;
+    text-decoration: underline;
+    outline: 0;
+    color: #337ab7;
 }
-a>img {
-    border: none;
+a:hover, a:focus {
+    text-decoration: underline;
+    color: #23527c;
+}
+a:focus {
+    outline: thin dotted;
+    text-decoration: underline;
+    outline-offset: -2px;
 }
 img {
+    display: block;
+    border: none;
     max-width: 100%;
+    height: auto;
+    vertical-align: middle;
 }
 
-/* default sizes */
+/* containers */
 header, .content, footer {
     max-width: 980px;
     margin: 20px auto;
     padding: 0 2%;
     font-size: 1em;
-    line-height: 1.25;
 }
 
 /* header & navigation */
@@ -141,15 +177,11 @@ header h1 {
     margin-bottom: 15px;
 }
 nav li {
-    font-size: 1.375em;
-    line-height: 1.13636364;
+    font-size: 1.5em;
     display: inline;
     padding: 0 15px;
 }
 
-/* content styles */
-
-
 /* footer styles */
 footer {
     text-align: center;
@@ -187,43 +219,20 @@ footer .skype {
     clear: both;
 }
 
-/* responsive styles */
-@media (min-width: 43.75em) {
-    header, .content, footer {
-        font-size: 1em;
-        line-height: 1.375;
-    }
-    h1 {
-        font-size: 2.5em;
-        line-height: 1.125;
-    }
-    h2, nav li {
-        font-size: 2em;
-        line-height: 1.25;
-    }
-    h3 {
-        font-size: 1.5em;
-        line-height: 1.25;
-    }
-    h4 {
-        line-height: 1.22222222;
-    }
-    blockquote {
-        font-size: 1.5em;
-        line-height: 1.45833333;
+/* responsive font sizes and link styles */
+@media only screen and (min-width: 981px) {
+    html {
+        font-size: 24px;
     }
 }
-@media (min-width: 56.25em) {
-    h1 {
-        font-size: 3em;
-        line-height: 1.05;
+@media only screen and (min-width: 1200px) {
+    html {
+        font-size: 16px;
     }
-    h2, nav li {
-        font-size: 2.25em;
-        line-height: 1.25;
+    h1 a, h2 a, h3 a, h4 a, strong a {
+        text-decoration: none;
     }
-    h3 {
-        font-size: 1.75em;
-        line-height: 1.25;
+    a, a:hover, a:active, a:visited {
+        text-decoration: none;
     }
 }