From d77c8df750de7bf1277663581c51a6fe3628143d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 28 Mar 2020 18:04:10 +0100
Subject: [PATCH] feat: tweak header styling

---
 src/App.vue         | 54 ++++++++++++++++++++++++++++++++++++---------
 src/mixins/Sebin.js |  4 ++--
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 406271e..55e1a3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,9 +8,10 @@
       </div>
       <div>😈</div>
     </label>
-
     <header>
-      <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
+      <div>
+        <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
+      </div>
       <div>
         <h1>{{ appName }}</h1>
         <h2>{{ appSubtitle }}</h2>
@@ -341,10 +342,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
 
 :root {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Fira Sans Extra Condensed", sans-serif;
   font-size: 16px;
   line-height: 1.5;
 }
@@ -463,24 +464,55 @@ export default {
 
 header {
   display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
 
-  img {
-    flex: 0 1 20%;
+  @media (min-width: 35em) {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
   }
 
   div {
-    flex: 0 1 80%;
-    padding-left: 1em;
+    flex: 0 1 100%;
+
+    &:first-child {
+      flex: 0 1 50%;
+
+      @media (min-width: 35em) {
+        flex: 0 1 30%;
+      }
+    }
+
+    img {
+      width: 100%;
+      border-radius: 5em;
+      border: 0.375em solid #fff;
+      box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
+    }
+  }
+
+  h1,
+  h2 {
+    font-family: "Exo", sans-serif;
+    margin: 0;
+    text-align: center;
   }
 
   h1 {
-    font-size: 2.2em;
-    line-height: 1;
+    font-size: 2.125em;
+    font-weight: 900;
+    font-style: italic;
+
+    @media (min-width: 35em) {
+      font-size: 2.75em;
+    }
   }
 
   h2 {
     font-size: 1em;
-    font-weight: normal;
+    font-weight: 300;
+    font-style: italic;
   }
 }
 
diff --git a/src/mixins/Sebin.js b/src/mixins/Sebin.js
index 7f34d2c..354cc21 100644
--- a/src/mixins/Sebin.js
+++ b/src/mixins/Sebin.js
@@ -100,7 +100,7 @@ export default {
       };
 
       const colors = {
-        headers: ["Body Part", "Color Value (hex)", "Color"],
+        headers: ["Body Part", "Color (hex)", "Color"],
         data: [
           ["Primary Scale Color", this.colors.scalesPrimary],
           ["Secondary Scale Color", this.colors.scalesSecondary],
@@ -108,7 +108,7 @@ export default {
           ["Secondary Hair Color", this.colors.hairSecondary],
           ["Eyes", this.colors.eyes],
           ["Facial Spikes", this.colors.eyebrows],
-          ["Horns / Claws / Nipples", this.colors.horns],
+          ["Horns/Claws/Nipples", this.colors.horns],
           ["Tail Spikes", this.colors.tailspikes]
         ]
       };