Style update

Move borders below header

root/index.html

@@ -10,14 +10,16 @@
 <main class="wrapper">
   <header id="masthead">
     <h1>Eryn Wells</h1>
+  </header>
+  <div id="content">
     <p>iOS accessibility engineer. Programming language geek. Calligrapher. Occasional chef. Hopeful gardener.
     Yogini. Queer. Feminist.</p>
-  </header>
+  </div>
-  <footer class="nav">
+  <nav>
     <a href="https://github.com/erynofwales">GitHub</a>
     <a href="./resume.html">Résumé</a>
     <a href="https://keybase.io/erynofwales">Keybase</a>
-  </footer>
+  </nav>
 </main>
 </body>
 </html>

root/styles/home.css

@@ -13,11 +13,11 @@ body {
     text-align: center;
 }
 
-.nav {
+nav {
     text-align: center;
 }
 
-.nav a {
+nav a {
     color: #aaa;
     font-weight: 200;
     margin-right: 0.75em;
@@ -25,13 +25,6 @@ body {
     transition: color 100ms;
 }
 
-.nav a:hover {
+nav a:hover {
     color: #3486ff;
 }
-
-@media only screen and (min-width: 760px) {
-    .wrapper {
-        border-top: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
-    }
-}

root/styles/main.css

@@ -21,6 +21,10 @@ body {
     font-size: 10pt;
 }
 
+header {
+    border-bottom: 1px solid #ddd;
+}
+
 h1 {
     font-family: "Love Ya Like A Sister", Georgia, serif;
     font-size: 4em;
@@ -56,11 +60,19 @@ a {
     transition: color 100ms;
 }
 
+nav {
+    border-top: 1px solid #ddd;
+}
+
 @media only screen and (max-width: 500px) {
     header {
         margin-bottom: 20px;
     }
 
+    nav {
+        margin-top: 20px;
+    }
+
     .wrapper {
         width: 100%;
         padding: 0 8px;
@@ -69,12 +81,16 @@ a {
 
 @media only screen and (min-width: 500px) {
     header {
-        margin-bottom: 60px;
+        margin-bottom: 40px;
+    }
+
+    nav {
+        margin-top: 40px;
     }
 
     .wrapper {
         width: 480px;
-        padding: 60px 0 8px 0;
+        padding: 0 0 8px 0;
     }
 }