124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
<template>
|
|
<header>
|
|
<div class="nsfw-bar">
|
|
<div class="nsfw-bar__content">
|
|
<div>
|
|
If you wish to see NSFW content on this page flip this switch.
|
|
</div>
|
|
<nsfw-switch
|
|
id="nsfw-switch-top"
|
|
v-model="$parent.nsfw"
|
|
@change="$parent.showWarning()"
|
|
/>
|
|
</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 {
|
|
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>
|