104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<header>
|
|
<img
|
|
class="nav-logo"
|
|
src="@/assets/sebin-smug-icon.png"
|
|
alt="Sebin Avatar"
|
|
/>
|
|
|
|
<navigation :routes="routes" />
|
|
</header>
|
|
|
|
<router-view />
|
|
</template>
|
|
|
|
<script>
|
|
import Navigation from "@/components/Navigation.vue";
|
|
|
|
export default {
|
|
components: { Navigation },
|
|
data() {
|
|
return {
|
|
nsfw: false,
|
|
isConfirmedHorny: false,
|
|
isWarn: false,
|
|
routes: [
|
|
{ path: "/", name: "Home" },
|
|
{ path: "/general", name: "General" },
|
|
{ path: "/anatomy", name: "Anatomy" },
|
|
{ path: "/clothing", name: "Clothing" },
|
|
{ path: "/abilities", name: "Abilities" },
|
|
{ path: "/overdrive", name: "Overdrive" },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
showWarning() {
|
|
if (!this.isConfirmedHorny) {
|
|
this.isWarn = true;
|
|
|
|
setTimeout(() => {
|
|
this.nsfw = false;
|
|
}, 1);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/scss/base.scss";
|
|
@import "~normalize.css";
|
|
|
|
#app {
|
|
margin: 6em 0 2em 0;
|
|
color: $copy-color;
|
|
font-size: 1.125em;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
transition: all ease-in-out 0.25s;
|
|
|
|
@media (min-width: 50em) {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
@media (min-width: 125em) {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
|
|
z-index: 1;
|
|
|
|
max-width: 70em;
|
|
margin: 1em;
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
|
|
|
background-color: darken($bg-color-dark, 5%);
|
|
|
|
@media (min-width: 90em) {
|
|
margin: 1em auto;
|
|
}
|
|
}
|
|
|
|
.nav-logo {
|
|
display: block;
|
|
margin: 0 0 0 0.25em;
|
|
height: 2em;
|
|
border: 0.125em solid #fff;
|
|
border-radius: 100%;
|
|
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
|
}
|
|
</style>
|