Initial implementation of media queries. Introduce mobile friendly views

* Rename style.css to resume.css for alphabetical inclusion order
* Mobile runs at 100% width and much less floating.
* Based on the media queries from the Frameless Framework

assets/css/resume.css

@@ -1,25 +1,23 @@
 .clearfix {
   zoom: 1;
 	&:after {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    clear: both;
-    content: ".";
-	}
+        display: block;
+        visibility: hidden;
+        height: 0;
+        clear: both;
+        content: ".";
+    }
 }
 
 body {
     font-family: 'Hoefler Text', Times New Roman, Times, serif;
     color: #444;
-    padding: 2em 0;
 }
 h1, h2, h3, h4, ul dl dt {
     font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
 }
 
 .container {
-    width: 1000px;
     margin: 0 auto;
     padding: 0;
     background: whiteSmoke;
@@ -30,7 +28,7 @@ h1, h2, h3, h4, ul dl dt {
 
 .resume {
     position:relative;
-    padding: 40px 80px;
+    padding: 10px 20px;
 }
 
 a {
@@ -47,9 +45,9 @@ a[href$='.pdf'] {
 }
 
 blockquote {
-    top: 0;
-    right: 40px;
-    position: absolute;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4em;
 }
 
 hr {
@@ -69,33 +67,30 @@ hr {
 h1 {
     margin: 0;
     padding: 0;
-    font-size: 48px;
-    text-transform: uppercase;
-    letter-spacing: 3px;
+    font-size: 36px;
+    letter-spacing: -1px;
     font-weight: normal;
 }
 h2 {
     margin: 0;
     padding: 0;
-    text-transform: uppercase;
+    font-size: 18px;
     font-style: italic;
-    letter-spacing: 2px;
+    letter-spacing: -1px;
     font-weight: normal;
 }
 
 h3 {
-    float: left;
-    width: 16%;
     margin: 0;
     padding: 0;
+    font-size: 150%;
     font-style: italic;
     font-weight: normal;
 }
 
 h3+p {
-    margin: 0 0 16px; padding: 0;
-    float: left;
-    width: 84%;
+    margin: 0 0 16px;
+    padding: 0;
     display: block;
     font-size: 104%;
     line-height: 24px;
@@ -108,22 +103,20 @@ ul {
     list-style: none;
 }
 ul li {
-    width: 28%;
     margin: 0;
     padding: 0;
-    float: left;
 }
 
 ul dl {
     margin: 0;
     padding: 0;
+    width: 100%;
     dt {
-        font-size: 122%;
-        margin-bottom: .25em;
+        font-size: 100%;
     }
     dd {
         margin: 0 0 1em;
-        padding: .5em 2em 0 0;
+        padding: 0 2em 0 0;
         font-size: .8em;
         line-height: 1.5em;
     }
@@ -137,20 +130,16 @@ ol {
 }
 
 ol li {
-    margin: 0;
+    margin: 0 0 0 1em;
     padding: 0;
     border-top: 1px solid #CCCCCC;
-    width: 33%;
+    width: 100%;
     float: left;
     list-style: none;
     line-height: 24px;
     font-size: 14px;
 }
-ol li:nth-child(3n) {
-    width: 34%;
-}
-
-ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(3) {
+ol li:nth-child(1) {
     border-top: none;
 }
 
@@ -171,14 +160,13 @@ dl {
         line-height: 1.4em;
     }
     strong {
-        float: right;
-        margin-top: -2em;
+        display: block;
     }
     em {
         display: block;
-        font-size: 130%;
+        font-size: 110%;
         margin-bottom: .5em;
-        font-style: normal;
+        font-style: bold;
     }
     
 }

assets/css/screen.css

@@ -0,0 +1,152 @@
+
+
+/*
+  Mobile layout
+  240–479 px
+  Zoomed out below 320 px
+*/
+
+@media screen and (min-width: 15em) {
+
+}
+
+
+/*
+  Wide mobile layout
+  480-767 px
+  Zoomed in above 480 px
+*/
+
+@media screen and (min-width: 30em) {
+
+}
+
+
+/*
+  Tablet layout
+  600-911 px
+  Zoomed in above 600 px
+*/
+
+@media screen and (min-width: 37.5em) {
+    body {
+        padding: 2em 0;
+    }
+    ol {
+        margin: 0 0 0 1em;
+    }
+    ol li {
+        width: 50%;
+        margin: 0;
+    }
+    ol li:nth-child(1), ol li:nth-child(2) {
+        border-top: none;
+    }
+}
+
+
+/*
+  Widescreen layout
+  912-1887 px
+  Zoomed in above 912 px
+*/
+
+@media screen and (min-width: 57em) {
+    .container {
+        width: 1000px;
+    }
+    .resume {
+        position:relative;
+        padding: 40px 80px;
+    }
+    h1 {
+        font-size: 48px;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-weight: normal;
+    }
+    h2 {
+        text-transform: uppercase;
+        font-style: italic;
+        letter-spacing: 2px;
+        font-weight: normal;
+    }
+    
+    blockquote {
+        top: 0;
+        right: 40px;
+        position: absolute;
+    }
+    
+    h3 {
+        float: left;
+        width: 16%;
+    }
+    
+    h3+p {
+        float: left;
+        width: 84%;
+    }
+    
+    ul li {
+        width: 28%;
+        float: left;
+    }
+    ul dl {
+        dt {
+            font-size: 122%;
+            font-weight: normal;
+            margin-bottom: .75em;
+        }
+        dd {
+            padding: 0 4em 0 0;
+        }
+    }
+
+    ol {
+        float: left;
+        width: 84%;
+        margin: 0;
+    }
+
+    ol li {
+        width: 33%;
+        margin: 0;
+    }
+    ol li:nth-child(3n) {
+        width: 34%;
+    }
+    ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(3) {
+        border-top: none;
+    }
+    
+    dl {
+        dt {
+        }
+        dd {
+        }
+        strong {
+            float: right;
+            margin-top: -2em;
+        }
+        em {
+            font-size: 130%;
+            font-style: normal;
+        }
+        
+    }
+
+
+}
+
+
+/*
+  Huge-screen layout
+  1888-2520 px
+  Zoomed in above 1920 px
+*/
+
+@media screen and (min-width: 118em) {
+
+
+}