Added global app style (fonts/variables/scss)

src/App.vue

@@ -1,8 +1,31 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-    <router-link to="/profile">Profile</router-link>
+  <div class="fs-wrapper">
+    <navbar />
+    <div class="fs-content">
+      <router-view />
+    </div>
   </div>
-  <router-view />
 </template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Navbar from "@/components/Navbar.vue";
+
+export default defineComponent({
+  components: {
+    Navbar
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.fs-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-flow: column;
+  .fs-content {
+    padding: 70px 20px 20px;
+    flex-grow: 1;
+  }
+}
+</style>

src/assets/scss/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');

src/assets/scss/_global.scss

@@ -0,0 +1,40 @@
+@import 'libs/normalize';
+
+@import 'fonts';
+@import 'variables';
+
+body {
+  font-family: $body-font-family;
+  font-size: $font-size-base;
+  line-height: 1.2;
+  color: $white;
+  background: $black;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font-family;
+  font-weight: $fw-regular;
+}
+h1 { font-size: 30px; }
+h2 { font-size: 25px; }
+h3 { font-size: 22px; }
+h4 { font-size: 18px; }
+
+ul {
+  &.no-style {
+    margin: 0;
+    padding-left: 0;
+    list-style-type: none;
+  }
+}
+
+a {
+  &.no-style {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+hr {
+  border-color: rgba($white, .2);
+}

src/assets/scss/_variables.scss

@@ -0,0 +1,16 @@
+
+$white: #fff;
+$black: #000;
+$fs-black: #070712;
+
+$heading-font-family: 'Poppins', serif;
+$body-font-family: 'Open Sans', sans-serif;
+
+$font-size-base: 14px;
+
+$fw-light: 300;
+$fw-regular: 400;
+$fw-semibold: 600;
+$fw-bold: 700;
+$fw-extra-bold: 800;
+$fw-black: 900;

src/components/Navbar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="navbar">
+    <ul class="navbar-menu no-style">
+      <li v-for="item in items" :key="item.url" class="navbar-item">
+        <router-link :to="item.link" class="navbar-link no-style">
+          {{ item.text }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "navbar",
+  data() {
+    return {
+      items: [
+        {
+          text: "Home",
+          link: "/"
+        },
+        {
+          text: "About",
+          link: "/about"
+        },
+        {
+          text: "Profile",
+          link: "/profile"
+        }
+      ]
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  padding: 0 20px;
+  background: $black;
+  box-shadow: 0 5px 5px rgba($white, 0.1);
+
+  &:after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 50%;
+    display: block;
+    content: "";
+    background-image: url("/nav-bg.png");
+    background-size: cover;
+    background-position: center right;
+  }
+
+  .navbar-menu {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    line-height: 70px;
+
+    .navbar-item {
+      &:not(:first-child) {
+        padding-left: 20px;
+      }
+
+      .navbar-link {
+        color: $white;
+        position: relative;
+        padding: 0 8px;
+        &:after {
+          display: block;
+          content: "";
+          position: absolute;
+          background: $white;
+          width: 0;
+          height: 1px;
+          bottom: -8px;
+          transition: width 0.25s ease-in-out;
+        }
+
+        &.router-link-active {
+          &:after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/main.ts

@@ -3,7 +3,8 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 
-import "./assets/scss/libs/_normalize.scss";
+import "@/assets/scss/libs/_normalize.scss";
+import "@/assets/scss/_global.scss";
 
 createApp(App)
   .use(store)

src/views/About.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about">
-    <h1>About</h1>
+    <h2>About</h2>
   </div>
 </template>
 

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <h1>Homepage</h1>
+    <h2>Homepage</h2>
   </div>
 </template>
 

src/views/Profile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <header class="profile-header">
-      <h1>My Profile</h1>
+      <h2>My Profile</h2>
       <hr />
       <h2>Profile for {{ user.name }}</h2>
     </header>

vue.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@import "src/assets/scss/_variables.scss";`
+      }
+    }
+  }
+};