Lots of style and formatting and stuff updates

root/styles/home.css

@@ -1,51 +1,43 @@
 @import url(./main.css);
 
-#masthead {
+body {
+    /* Flex box: center everything vertically */
+    align-items: center;
+}
+
+.wrapper {
     margin-top: 120px;
-    padding: 60px 0;
-    text-align: center;
+    padding: 60px 0 8px 0;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
 }
 
-#masthead,
-.navi {
+.wrapper {
     width: 640px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#masthead h1 {
-    margin-bottom: 0.25em;
-}
-
-p {
-    font-size: 18px;
-    font-weight: 200;
-    line-height: 27px;
-}
-
-#key-info,
-#key-download {
-    margin-top: 27px;
-}
-
-.navi {
-    margin-top: 4px;
     text-align: center;
 }
 
-.navi a {
-    color: #aaa;
+header {
+    margin-bottom: 60px;
 }
 
-.navi a:hover {
-    color: #005580;
+footer {
+    margin: 0;
+    padding: 0;
 }
 
-code {
-    background: white;
-    border: 0;
-    font-size: 80%;
-    color: #aaa;
+.nav {
+    text-align: center;
+}
+
+.nav a {
+    color: #aaa;
+    font-weight: 200;
+    margin-right: 0.75em;
+    -webkit-transition: color 100ms;
+    transition: color 100ms;
+}
+
+.nav a:hover {
+    color: #3486ff;
 }

root/styles/main.css

@@ -2,34 +2,36 @@
 
 html,
 body,
-div {
+div,
+h1, h2, h3, h4, h5, h6 {
     margin: 0;
     padding: 0;
 }
 
 body, h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    padding: 0;
     font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
     background-color: white;
 }
 
 body {
+    /* Flex box: center everything horizontally */
     display: flex;
-    align-items: center;
     justify-content: center;
+    font-size: 12pt;
 }
 
-#masthead {
-}
-
-#masthead h1 {
+h1 {
     font-family: "Love Ya Like A Sister", Georgia, serif;
-    color: #ee2e64;
-    font-size: 60px;
+    font-size: 4.5em;
+    margin-bottom: 0.25em;
 }
 
-#masthead h1 small {
+h1, a:hover {
+    /*color: #ee2e64;*/
+    color: #3486ff;
+}
+
+h1 small {
     font-family: Helvetica, Arial, sans-serif;
 }
 
@@ -41,11 +43,14 @@ h1 a:hover {
     color: inherit;
 }
 
-a {
-    color: #44accf;
+p, li, dt, dd {
+    font-weight: 200;
+    line-height: 1.4em;
 }
 
-a:hover {
-    color: #005580;
+a {
+    color: #44accf;
     text-decoration: none;
+    -webkit-transition: color 100ms;
+    transition: color 100ms;
 }

root/styles/resume.css

@@ -0,0 +1,94 @@
+@import url(./main.css);
+
+.wrapper {
+    margin-top: 28px;
+}
+
+#resume {
+    width: 640px;
+}
+
+#resume h1 a {
+    text-decoration: none;
+}
+
+.job header {
+    margin-top: 6px;
+    margin-bottom: 4px;
+}
+
+h2 {
+    margin-bottom: 4px;
+}
+
+h3, dt {
+    font-size: 1.17em;
+}
+
+h3, h4 {
+    margin-bottom: 2px;
+}
+
+header h3,
+header h4 {
+    float: left;
+}
+
+header .date,
+header .date {
+    float: right;
+}
+
+.date {
+    font-size: 80%;
+    font-style: italic;
+    font-weight: 200;
+}
+
+.subtitle {
+    clear: both;
+    font-size: 85%;
+    font-style: italic;
+}
+
+h3 .location,
+h4 .location {
+    font-weight: normal;
+    font-size: 80%;
+}
+
+h3 .location:before,
+h4 .location:before {
+    content: ", ";
+}
+
+#resume > section {
+    margin-bottom: 2em;
+}
+
+ul {
+    clear: both;
+    margin: 0;
+    padding-left: 1.5em;
+}
+
+li {
+    list-style: none;
+    margin: 0;
+    text-indent: -0.80em;
+}
+
+li:before {
+    content: "– ";
+}
+
+dt {
+    font-weight: 500;
+    margin-top: 3px;
+    margin-bottom: 0px;
+}
+
+dd {
+    margin: 0;
+    margin-left: 1em;
+}