Added style of main page

src/App.vue

@@ -20,12 +20,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .fs-wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-flow: column;
+  position: relative;
   .fs-content {
-    padding: 70px 20px 20px;
-    flex-grow: 1;
+    margin-top: 70px;
+    padding-top: 20px;
+    min-height: calc(100vh - 90px);
   }
 }
 </style>

src/assets/scss/_global.scss

@@ -11,7 +11,8 @@ body {
   background: $black;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, .heading {
+  margin-top: 0;
   font-family: $heading-font-family;
   font-weight: $fw-regular;
 }

src/components/Navbar.vue

@@ -44,8 +44,8 @@ export default defineComponent({
   right: 0;
   height: 70px;
   padding: 0 20px;
-  background: $black;
-  box-shadow: 0 5px 5px rgba($white, 0.1);
+  background: $fs-black;
+  box-shadow: 0 5px 5px rgba($black, 0.3);
 
   &:after {
     position: absolute;
@@ -58,6 +58,7 @@ export default defineComponent({
     background-image: url("/nav-bg.png");
     background-size: cover;
     background-position: center right;
+    opacity: 0.75;
   }
 
   .navbar-menu {

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="home">
-    <h2>Homepage</h2>
-  </div>
+  <section class="home">
+    <h2 class="heading">Homepage</h2>
+  </section>
 </template>
 
 <script lang="ts">
@@ -11,3 +11,26 @@ export default defineComponent({
   name: "Home"
 });
 </script>
+
+<style lang="scss" scoped>
+.home {
+  position: relative;
+  min-height: inherit;
+  padding: 0 20px;
+
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: -20px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-image: url("/home_bg-min.jpg");
+    background-size: cover;
+    opacity: 0.5;
+    z-index: -1;
+    pointer-events: none;
+  }
+}
+</style>