From 9d55c57169d044ea67e974c2ca3ce873f32aa748 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Tue, 19 Mar 2024 11:32:42 +0000
Subject: [PATCH] Update bio

---
 _includes/header.html |  7 ++++-
 _sass/header.scss     | 71 +++++++++++++++++++++++++------------------
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 4742989..396d04d 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -4,7 +4,12 @@
 <img src="/assets/images/avatar.jpeg" class = "u-photo avatar" alt = "A picture of me.">
 <a class="p-name u-url u-uid" href="https://thomashodson.com"><h1>Tom Hodson</h1></a>
 </div>
-<p class="p-note">Physicist, Programmer, Maker and Baker
+<p class="p-note bio">
+    <span>Maker, Baker</span>
+    <span>Programmer</span>
+    <span><a href="/thesis">Reformed&nbsp;Physicist</a></span>
+    <span><a href = "https://ecmwf.int">RSE@ECMWF</a> </span>
+</p>
 <p class="professional-links">
   <a href="https://github.com/TomHodson" rel="me authn" class="u-url">GitHub {% include icons/github.svg %}</a>
   <a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url">Mastodon {% include icons/mastodon.svg %}</a>
diff --git a/_sass/header.scss b/_sass/header.scss
index 42c487c..8bf2ea6 100644
--- a/_sass/header.scss
+++ b/_sass/header.scss
@@ -80,38 +80,37 @@ header {
       height: auto;
       padding-left: 20px;
       padding-right: 20px;
-    }
-
-    // To squish the text together a bit in the mobile view.
-    header p {
-        margin-block: 0.25em;
-    }
-
-    header .avatar {
-        margin: auto;
-    } 
-
-    nav {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    nav a {
-        margin-left: 1em;
-    }
-
-    header p.professional-links {
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    header hr {
+    
+    hr {
         border-width:1px;
     }
 
-    header p.professional-links {
+    .bio {
+        span {
+            display: inline;
+        }
+        span:after {
+            content: ', ';
+        }
+        span:last-of-type:after {
+            content: '';
+        }
+    }
+
+    // To squish the text together a bit in the mobile view.
+    p {
+        margin-block: 0.25em;
+    }
+
+    .avatar {
+        margin: auto;
+    } 
+    
+    p.professional-links {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+
         a {
             margin-left: 1em;
             margin-right: 1em;
@@ -128,4 +127,16 @@ header {
             margin-left: 0;
         }
     }
-}
\ No newline at end of file
+    
+    } 
+
+    nav {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    nav a {
+        margin-left: 1em;
+    }
+}