sebin-reference/src/App.vue

<template>
  <ref-header>
    <img
      class="nav-logo"
      src="@/assets/sebin-smug-icon.png"
      alt="Sebin Avatar"
    />

    <navigation :routes="routes" />
  </ref-header>

  <main>
    <router-view />
  </main>

  <ref-footer>
    <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
    <p>
      Background Pattern &copy;
      <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
    </p>
  </ref-footer>
</template>

<script>
import Navigation from "@/components/Navigation.vue";
import RefHeader from "@/components/Header.vue";
import RefFooter from "@/components/Footer.vue";

export default {
  components: { Navigation, RefHeader, RefFooter },
  data() {
    return {
      nsfw: false,
      isConfirmedHorny: false,
      isWarn: false,
      version: require("../package.json").version,
      routes: [
        { path: "/", name: "Home" },
        { path: "/general", name: "General" },
        { path: "/anatomy", name: "Anatomy" },
        { path: "/clothing", name: "Clothing" },
        { path: "/abilities", name: "Abilities" },
        { path: "/overdrive", name: "Overdrive" },
      ],
      links: [
        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
        {
          href: "https://www.furaffinity.net/user/sonofdragons",
          text: "Fur Affinity",
        },
      ],
    };
  },
  methods: {
    showWarning() {
      if (!this.isConfirmedHorny) {
        this.isWarn = true;
        document.body.classList.toggle("scroll-lock");

        setTimeout(() => {
          this.nsfw = false;
        }, 1);
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/scss/base.scss";
@import "~normalize.css";

#app {
  color: $copy-color;
  font-size: 1.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all ease-in-out 0.25s;

  @include mq-desktop {
    font-size: 1.25em;
  }

  @include mq-bigscreen {
    font-size: 1.5em;
  }

  position: relative;

  &:before,
  &:after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &:before {
    background: url("/subtle-prism.svg");
    mix-blend-mode: multiply;
    z-index: -1;
  }

  &:after {
    background: radial-gradient(
        circle at bottom right,
        $bg-color-lighter 5%,
        transparent 50%
      ),
      radial-gradient(
        circle at top left,
        $bg-color-light 5%,
        $bg-color-dark 100%
      );

    z-index: -2;

    @include theme(dark) {
      background: radial-gradient(
          circle at bottom right,
          darken($bg-color-lighter, 30%) 5%,
          transparent 50%
        ),
        radial-gradient(
          circle at top left,
          darken($bg-color-light, 10%) 5%,
          darken($bg-color-dark, 10%) 100%
        );
    }
  }
}

.nav-logo {
  display: block;
  margin: 0 0.5em 0 0.25em;
  height: 2em;
  border: 0.125em solid #fff;
  border-radius: 100%;
  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
}

main {
  min-height: 100vh;
  padding: 2em 0 1em 0;
}

.footer p {
  margin: 0;

  & + p {
    margin: 0.5em auto 0 auto;
  }
}
</style>