fix up mobile layout

_includes/header.html

@@ -10,4 +10,5 @@
   <a href="/feed.xml"><img class="icon" src="/assets/icons/rss.svg">RSS</a>
 </p>
 {% include sidebar.html %}
+<hr>
 </header>

_sass/cv.scss

@@ -110,17 +110,14 @@ div.cv-title-container button:hover {
 }
 
 @media only screen and (max-width: 900px) {  
-    div.details-img img {
-        display:none;
-        padding:0px;
-    }
     div.details-container {
         margin-left:2.2rem;
+        flex-direction: column;
+        align-items: center;
     }
 
-    div.details-img {
+    summary.cv {
-        flex: 0 1 0px;
+        flex-direction: column;
-        padding: 0px;
     }
 
 }

_sass/header.scss

@@ -18,6 +18,13 @@ header {
     top: 0px;
 }
 
+//a horizontal dividing line to swap in when we switch to mobile layout
+header hr {
+    border:0px solid #eee;
+    width: 100%;
+    margin-top: 1em;
+}
+
 header .profile-pic-name {
     text-align: center;
 }
@@ -41,6 +48,7 @@ header img.icon {
     height: 1em;
     width: 1em;
     margin-right: 0.5em;
+    margin-left: 0.5em;
     flex: 0 0 auto;
 }
 
@@ -61,10 +69,13 @@ header p.professional-links a {
       width: 100%;
       border: 0px;
       text-align: center;
+      align-items: center;
       height: auto;
       padding-left: 20px;
       padding-right: 20px;
     }
+
+
   
     header .avatar {
         margin: auto;
@@ -78,4 +89,17 @@ header p.professional-links a {
     nav a {
         margin-left: 1em;
     }
+
+    header p.professional-links {
+        flex-direction: row;
+    }
+
+    header hr {
+        border-width:1px;
+    }
+
+    header p.professional-links a {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
 }