update header layout, vertically align left and right panes

src/stylesheets/header.css

@@ -1,21 +1,18 @@
 .section.header {
-    padding-top: 1.6em;
-    padding-bottom: 1.4em;
+    align-items: center;
+    display: flex;
+}
+
+@media (max-width: 768px) {
+    .section.header {
+        flex-direction: column;
+    }
 }
 
 .section.header .split {
     padding: 0 1em;
 }
 
-.section.header .splitter {
-    display: block;
-    border-left: 1em solid rgba(0, 0, 0, 0.15);
-    width: 1em;
-
-    /* this should be calculated from right panel height */
-    height: 24em;
-}
-
 .section.header .name {
     color: #f5f5f5;
     display: inline-block;
@@ -52,11 +49,17 @@
 
 .section.header .picture {
     background: white;
+    border: 0.5em solid white;
     border-radius: 50%;
     box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
+    display: block;
+    overflow: hidden;
+}
+
+.section.header .picture img {
     box-sizing: content-box;
-    padding: 3%;
-    width: 94%;
+    height: 100%;
+    width: 100%;
 }
 
 .section.header .picture-container {