Lots of general website tweaks

- Resume updates
- Style updates for the resume (print styles!)
- Prototyping some additions to the resume for side projects and some JS to support that

root/styles/main.css

@@ -19,9 +19,10 @@ body {
     display: flex;
     justify-content: center;
     font-size: 10pt;
+    letter-spacing: 1px;
 }
 
-header {
+main > header {
     border-bottom: 1px solid #ddd;
 }
 

root/styles/resume.css

@@ -4,7 +4,7 @@
     margin: 8px;
 }
 
-#resume h1 a {
+h1 a {
     text-decoration: none;
 }
 
@@ -13,6 +13,10 @@
     margin-bottom: 4px;
 }
 
+#resume section:first-of-type {
+    margin-top: 1em;
+}
+
 h2 {
     margin-bottom: 4px;
 }
@@ -25,14 +29,25 @@ h3, h4 {
     margin-bottom: 2px;
 }
 
-header h3,
-header h4 {
-    float: left;
+.flex-buttons, .flex-date {
+    display: -webkit-flex;
+    display: flex;
 }
 
-header .date,
-header .date {
-    float: right;
+.flex-date {
+    align-items: baseline;
+}
+
+.flex-date .date {
+    margin-left: auto;
+}
+
+.flex-buttons {
+    align-items: center;
+}
+
+.flex-buttons .buttons {
+    margin-left: 1em;
 }
 
 .date {
@@ -42,7 +57,6 @@ header .date {
 }
 
 .subtitle {
-    clear: both;
     font-size: 85%;
     font-style: italic;
 }
@@ -89,6 +103,18 @@ dd {
     margin-left: 1em;
 }
 
+#side-projects button {
+    background-color: #f5f5f5;
+    border: none;
+    border-radius: 2px;
+    display: inline;
+}
+
+#side-projects button:hover, #side-projects .selected {
+    background-color: #3486ff;
+    color: #eee;
+}
+
 @media only screen and (max-width: 500px) {
     .wrapper {
         margin-top: 8px;
@@ -112,3 +138,56 @@ dd {
         padding: 60px 0;
     }
 }
+
+@media only print {
+    h1 {
+        font-family: Arial, Verdana, sans-serif;
+        color: black;
+    }
+
+    body {
+        margin: 0.25in 0.5in;
+    }
+
+    main > header {
+        border: none;
+    }
+
+    .wrapper {
+        margin: 0;
+        padding: 0;
+    }
+
+    .job header {
+        margin-bottom: 0;
+    }
+
+    h2 {
+        margin-bottom: 0px;
+    }
+
+    #side-projects .buttons {
+        display: none;
+    }
+
+    #skills dl {
+        margin-top: 0.5em;
+    }
+
+    #skills dt:before {
+        content: "";
+        display: block;
+    }
+
+    #skills dt:after {
+        content: ": ";
+    }
+
+    #skills dt, dd {
+        display: inline;
+    }
+
+    #skills dd {
+        margin-left: 0;
+    }
+}