From 2bbb1d2e546a8f17309877fbd5a33c94475aa78c Mon Sep 17 00:00:00 2001
From: amphineko <sukareki@gmail.com>
Date: Thu, 26 Mar 2020 01:17:24 +0800
Subject: [PATCH] update header layout, vertically align left and right panes

---
 src/stylesheets/header.css | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/stylesheets/header.css b/src/stylesheets/header.css
index 56967fe..200dc8c 100644
--- a/src/stylesheets/header.css
+++ b/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 {