feat: tweak header styling

src/App.vue

@@ -8,9 +8,10 @@
       </div>
       <div>😈</div>
     </label>
-
     <header>
+      <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;
   }
 }
 

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]
         ]
       };