From 028e3a11b9058579fbff3002ddbe067875c35b28 Mon Sep 17 00:00:00 2001
From: Tom Hodson <thomas.c.hodson@gmail.com>
Date: Thu, 23 Jun 2022 16:33:05 +0200
Subject: [PATCH] fix up mobile layout

---
 _includes/header.html |  1 +
 _sass/cv.scss         | 11 ++++-------
 _sass/header.scss     | 24 ++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 0d503b2..ce0f863 100644
--- a/_includes/header.html
+++ b/_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>
\ No newline at end of file
diff --git a/_sass/cv.scss b/_sass/cv.scss
index 8609d37..81511e9 100644
--- a/_sass/cv.scss
+++ b/_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 {
-        flex: 0 1 0px;
-        padding: 0px;
+    summary.cv {
+        flex-direction: column;
     }
 
 }
\ No newline at end of file
diff --git a/_sass/header.scss b/_sass/header.scss
index e99b1ee..915dabd 100644
--- a/_sass/header.scss
+++ b/_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;
+    }
 }
\ No newline at end of file