From 3c39eea48ce3dd94a184fa2a1c4cfc734b2f9654 Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <ayushm12360@gmail.com>
Date: Thu, 23 Jul 2020 01:32:25 +0530
Subject: [PATCH] add brand as link; adjust typography

---
 src/components/Header.vue        |  6 +++---
 src/scss/base/_base.scss         |  2 +-
 src/scss/components/_header.scss | 13 ++++++++++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6b631a4..5660f66 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header>
-        <div class="brand">
+        <a href="https://ayushm.com" class="brand">
             <div class="logo">
                 <img src="@/assets/logo.png" alt="Ayush M. Logo" width="60px" height="60px">
             </div>
@@ -8,9 +8,9 @@
                 <span>Ayush</span>
                 <span>Mukherjee.</span>
             </div>
-        </div>
+        </a>
         <nav>
-            <router-link class="active" to="#work">work</router-link>
+            <router-link to="#work">work</router-link>
             <router-link to="#about">about</router-link>
             <router-link to="#skills">skills</router-link>
             <router-link to="#contact">contact</router-link>
diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
index 7ed6d51..36097f2 100644
--- a/src/scss/base/_base.scss
+++ b/src/scss/base/_base.scss
@@ -21,7 +21,7 @@ body {
 }
 
 p {
-    letter-spacing: 0.005em;
+    letter-spacing: 0.01em;
     line-height: 1.6em;
 }
 
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 8166a9f..8408f4a 100644
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -1,19 +1,22 @@
 header {
-    padding: 60px 120px;
+    padding: 40px 90px 40px 120px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     
     .brand {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        width: 210px;
+        padding: 20px 30px 20px 30px;
         font-size: $font-brand;
+        color: $fg;
+        text-decoration: none;
+        transition: 0.2s ease-in-out;
 
         .logo {
             width: 60px;
             height: 60px;
+            margin-right: 10px;
         }
 
         .name {
@@ -21,6 +24,10 @@ header {
             flex-direction: column;
             font-weight: $font-bold;
         }
+
+        &:hover {
+            background: darken($bg, 4%);
+        }
     }
 
     nav {