From 5d5b46437143d41af16ee454aede15e193f845f0 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 23 May 2017 10:53:56 -0700
Subject: [PATCH] Style update

Move borders below header
---
 root/index.html      |  8 +++++---
 root/styles/home.css | 13 +++----------
 root/styles/main.css | 20 ++++++++++++++++++--
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/root/index.html b/root/index.html
index 381ffff..e78938f 100644
--- a/root/index.html
+++ b/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>
-  <footer class="nav">
+  </div>
+  <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>
diff --git a/root/styles/home.css b/root/styles/home.css
index c5d25e5..2634ac8 100644
--- a/root/styles/home.css
+++ b/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;
-    }
-}
diff --git a/root/styles/main.css b/root/styles/main.css
index ddb93eb..128e218 100644
--- a/root/styles/main.css
+++ b/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;
     }
 }