feat: ♻️ refactor ALL THE THINGS!!! (again)
Update to Vue 3 and employ Vue Router, additional design changes and navigation changes
This commit is contained in:
sebin.nyshkim@icloud.com
parent
e9f29b655d
commit
ae5d4d2633
59 changed files with 2768 additions and 1381 deletions
|
|
@ -49,11 +49,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
@import "@/scss/_variables.scss";
|
||||
|
||||
.datatable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: 55rem;
|
||||
margin: auto;
|
||||
|
||||
&__heading,
|
||||
&__cell {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ export default {};
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
@import "@scss/_mixins.scss";
|
||||
@import "@/scss/_variables.scss";
|
||||
@import "@/scss/_mixins.scss";
|
||||
|
||||
.figure {
|
||||
margin: 1em auto;
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
@import "@scss/_mixins.scss";
|
||||
@import "@/scss/_variables.scss";
|
||||
@import "@/scss/_mixins.scss";
|
||||
|
||||
.gallery {
|
||||
&__prev,
|
||||
|
|
|
|||
|
|
@ -1,124 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
<template>
|
||||
<nav class="nav" :class="{ 'nav--fixed': isFixed }" ref="nav">
|
||||
<ul class="nav__list flex flex--row flex--nowrap flex--center-v">
|
||||
<template v-for="(item, id) in navlinks">
|
||||
<li class="nav__item" :key="id" v-show="isNsfw(item.nsfw)">
|
||||
<a class="nav__link" href="#" v-scroll-to="item.href">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
<div class="nav__underline"></div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import throttle from "lodash/throttle";
|
||||
import debounce from "lodash/debounce";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
navlinks: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFixed: false,
|
||||
offsetTop: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setOffsetTop() {
|
||||
this.offsetTop = this.$el.offsetTop;
|
||||
this.$el.style.height = `${this.$refs.nav.scrollHeight}px`;
|
||||
},
|
||||
checkIsFixed() {
|
||||
this.isFixed = this.offsetTop < window.scrollY;
|
||||
},
|
||||
isNsfw(item) {
|
||||
if (this.$parent.$parent.nsfw) {
|
||||
return true;
|
||||
} else {
|
||||
return this.$parent.$parent.nsfw === item;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
throttle(() => {
|
||||
if (!this.offsetTop) {
|
||||
this.setOffsetTop();
|
||||
}
|
||||
this.checkIsFixed();
|
||||
}, 50)
|
||||
);
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
debounce(() => {
|
||||
this.setOffsetTop();
|
||||
this.checkIsFixed();
|
||||
}, 100)
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/base.scss";
|
||||
|
||||
.nav {
|
||||
&--fixed .nav__list {
|
||||
background-color: $bg-color-light;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__list {
|
||||
margin: 0;
|
||||
padding: 0 0.5em;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
||||
@include mq-desktop {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
padding: 0.5em 0.375em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
color: $copy-color;
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover ~ .nav__underline {
|
||||
&::before,
|
||||
&::after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__underline {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0.125em;
|
||||
background-color: $copy-color;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/components/Navigation.vue
Normal file
105
src/components/Navigation.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<nav class="nav">
|
||||
<ul class="nav__list flex flex--row flex--nowrap flex--center-v">
|
||||
<li class="nav__item" v-for="(route, idx) in routes" :key="idx">
|
||||
<router-link class="nav__link" :to="route.path">
|
||||
{{ route.name }}
|
||||
</router-link>
|
||||
<div class="nav__underline"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
routes: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/scss/base.scss";
|
||||
|
||||
.nav {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
||||
@include mq-desktop {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
padding: 0.375em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: $copy-color;
|
||||
margin-bottom: 0.375em;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover ~ .nav__underline {
|
||||
&::before,
|
||||
&::after {
|
||||
width: 50%;
|
||||
background-color: $copy-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: $bg-color-light;
|
||||
|
||||
&:hover ~ .nav__underline {
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: $bg-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav__underline {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0.125em;
|
||||
// background-color: $copy-color;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,6 +29,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/scss/base.scss";
|
||||
|
||||
.nsfw-switch {
|
||||
font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
|
||||
"android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
|
||||
|
|
@ -107,7 +109,7 @@ export default {
|
|||
pointer-events: none;
|
||||
|
||||
&:checked + .toggle {
|
||||
background-color: #4bd763;
|
||||
background-color: $bg-color-light;
|
||||
|
||||
&::before {
|
||||
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/_variables.scss";
|
||||
@import "@scss/_mixins.scss";
|
||||
@import "@/scss/_variables.scss";
|
||||
@import "@/scss/_mixins.scss";
|
||||
|
||||
.nsfw-warning {
|
||||
position: fixed;
|
||||
|
|
|
|||
30
src/components/Prose.vue
Normal file
30
src/components/Prose.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="prose">
|
||||
<slot name="default"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/scss/base.scss";
|
||||
|
||||
.prose {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
.quickfacts {
|
||||
max-width: 55rem;
|
||||
margin: {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 55em) {
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/base.scss";
|
||||
@import "@/scss/base.scss";
|
||||
|
||||
.quickfacts {
|
||||
border-radius: 1em;
|
||||
|
|
|
|||
56
src/components/Welcome.vue
Normal file
56
src/components/Welcome.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="welcome flex flex--row flex--wrap flex--center flex--center-v">
|
||||
<div class="welcome__image-container col col-m-6 col-3">
|
||||
<img
|
||||
class="welcome__image"
|
||||
src="@/assets/sebin-smug-icon.png"
|
||||
alt="Sebin Avatar"
|
||||
/>
|
||||
</div>
|
||||
<div class="welcome__headings col col-m-12 col-7">
|
||||
<h1 class="welcome__main-heading">
|
||||
<slot name="main"></slot>
|
||||
</h1>
|
||||
<h2 class="welcome__sub-heading">
|
||||
<slot name="sub"></slot>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.welcome {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue