refactor: ♻️ split up App.vue into separate components

src/components/Header.vue

@@ -0,0 +1,125 @@
+<template>
+  <header>
+    <div class="nsfw-bar">
+      <div class="nsfw-bar__content">
+        <div>
+          This Page contains materials considered NSFW. Do you wish to see such
+          content?
+        </div>
+        <nsfw-switch />
+      </div>
+    </div>
+
+    <div class="header flex flex--row flex--wrap flex--center flex--center-v">
+      <div class="header__image-container col col-m-6 col-3">
+        <img
+          class="header__image"
+          src="@img/sebin-smug-icon.png"
+          alt="Sebin Avatar"
+        />
+      </div>
+      <div class="header__headings col col-m-12 col-7">
+        <h1 class="header__main-heading">{{ mainHeading }}</h1>
+        <h2 class="header__sub-heading">{{ subHeading }}</h2>
+      </div>
+    </div>
+
+    <ref-navbar :navlinks="navlinks" />
+  </header>
+</template>
+
+<script>
+import NsfwSwitch from "@components/NsfwSwitch.vue";
+import RefNavbar from "@components/Navbar.vue";
+
+export default {
+  props: {
+    mainHeading: String,
+    subHeading: String
+  },
+  data() {
+    return {
+      navlinks: [
+        { href: "#general", label: "General", nsfw: false },
+        { href: "#anatomy", label: "Anatomy", nsfw: false },
+        { href: "#wings", label: "Wings", nsfw: false },
+        { href: "#head", label: "Head", nsfw: false },
+        { href: "#upperbody", label: "Upper Body", nsfw: false },
+        { href: "#penis", label: "Penis", nsfw: true },
+        { href: "#clothes", label: "Clothing Styles", nsfw: false },
+        { href: "#abilities", label: "Abilities", nsfw: false }
+      ]
+    };
+  },
+  components: {
+    NsfwSwitch,
+    RefNavbar
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+header {
+  background-color: $bg-color-dark;
+}
+
+.header {
+  max-width: 40em;
+  margin: 1em auto;
+
+  &__image {
+    width: 100%;
+    border-radius: 100%;
+    border: 0.375em solid #fff;
+    box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
+  }
+
+  &__main-heading,
+  &__sub-heading {
+    font-family: "Exo", sans-serif;
+    margin: 1rem 0;
+    text-align: center;
+  }
+
+  &__main-heading {
+    font-size: 2.125em;
+    font-weight: 900;
+    font-style: italic;
+
+    @media (min-width: 35em) {
+      font-size: 2.75em;
+    }
+  }
+
+  &__sub-heading {
+    font-size: 1em;
+    font-weight: 300;
+    font-style: italic;
+  }
+}
+
+.nsfw-bar {
+  background-color: $bg-color-light;
+  padding: 0.5em;
+
+  &__content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    max-width: 40rem;
+    margin: auto;
+
+    div {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+
+    label {
+      flex: 0 0 5em;
+    }
+  }
+}
+</style>