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
|
|
@ -3,7 +3,7 @@ module.exports = {
|
||||||
env: {
|
env: {
|
||||||
node: true,
|
node: true,
|
||||||
},
|
},
|
||||||
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
|
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: "babel-eslint",
|
parser: "babel-eslint",
|
||||||
},
|
},
|
||||||
|
|
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -2,6 +2,7 @@
|
||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
|
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
.env.*.local
|
.env.*.local
|
||||||
|
|
@ -10,9 +11,11 @@ node_modules
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.idea
|
.idea
|
||||||
|
.vscode
|
||||||
*.suo
|
*.suo
|
||||||
*.ntvs*
|
*.ntvs*
|
||||||
*.njsproj
|
*.njsproj
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
# sebin-reference
|
# vue3-test
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
```
|
```
|
||||||
|
|
|
||||||
1910
package-lock.json
generated
1910
package-lock.json
generated
File diff suppressed because it is too large
Load diff
18
package.json
18
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "sebin-reference",
|
"name": "sebin-reference",
|
||||||
"version": "0.6.4",
|
"version": "0.7.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
|
|
@ -8,25 +8,25 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.11.0",
|
"core-js": "^3.6.5",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"vue": "^2.6.12",
|
"vue": "^3.0.0",
|
||||||
"vue-scrollto": "^2.20.0"
|
"vue-router": "^4.0.0-0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"eslint-plugin-prettier": "^3.3.1",
|
||||||
"eslint-plugin-vue": "^6.2.2",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
"image-webpack-loader": "^6.0.0",
|
"image-webpack-loader": "^8.0.1",
|
||||||
"lodash": "^4.17.21",
|
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
"sass": "^1.26.5",
|
"sass": "^1.26.5",
|
||||||
"sass-loader": "^8.0.2",
|
"sass-loader": "^8.0.2"
|
||||||
"vue-template-compiler": "^2.6.11"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div class="bubbles"></div>
|
<div class="bubbles"></div>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
843
src/App.vue
843
src/App.vue
|
|
@ -1,711 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<header>
|
||||||
<nsfw-warning v-show="isWarn">
|
|
||||||
<template #heading>
|
|
||||||
⚠️⚠️⚠️<br />
|
|
||||||
Whoa, Nelly!
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #message>
|
|
||||||
By enabling NSFW mode you confirm that you are of legal age to view
|
|
||||||
adult content.
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #yes>Yes, show me the goods 👀</template>
|
|
||||||
<template #no>NO, STAHP 😱</template>
|
|
||||||
</nsfw-warning>
|
|
||||||
|
|
||||||
<ref-header
|
|
||||||
mainHeading="Sebin Nyshkim"
|
|
||||||
subHeading="Character Reference Page"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="general">
|
|
||||||
<h2>General</h2>
|
|
||||||
<data-table class="prose" :dataset="getSebinData.generic" />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="anatomy">
|
|
||||||
<h2>Anatomy</h2>
|
|
||||||
|
|
||||||
<ref-figure>
|
|
||||||
<template #img>
|
|
||||||
<div>
|
|
||||||
<img
|
<img
|
||||||
v-if="nsfw"
|
class="nav-logo"
|
||||||
src="@img/sebin-ref-body-NSFW.png"
|
src="@/assets/sebin-smug-icon.png"
|
||||||
alt="Sebin Full Body Ref"
|
alt="Sebin Avatar"
|
||||||
/>
|
/>
|
||||||
<img
|
|
||||||
v-else
|
|
||||||
src="@img/sebin-ref-body-SFW.png"
|
|
||||||
alt="Sebin Full Body Ref"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #caption>
|
|
||||||
<label>Sebin Full Body Reference</label>
|
|
||||||
</template>
|
|
||||||
<template #copyright>
|
|
||||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
|
||||||
</template>
|
|
||||||
</ref-figure>
|
|
||||||
|
|
||||||
<data-table class="prose" :dataset="getSebinData.colors" />
|
<navigation :routes="routes" />
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="prose">
|
<router-view />
|
||||||
<quick-facts>
|
|
||||||
<ul>
|
|
||||||
<li>Bipedal plantigrade</li>
|
|
||||||
<li>
|
|
||||||
Red scales, yellow chest-plates running from underneath chin,
|
|
||||||
over torso, between legs, underside of tail
|
|
||||||
</li>
|
|
||||||
<li>Athletic to body builder physique</li>
|
|
||||||
<li>Sharp, black claws on fingers and toes</li>
|
|
||||||
<li>Brown spikes running over back and top-side of tail</li>
|
|
||||||
<li>Tail about 1 meter in length</li>
|
|
||||||
</ul>
|
|
||||||
</quick-facts>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Sebin is a bipedal plantigrade. His body is mostly covered by red
|
|
||||||
scales with yellow chest plates running from below his chin over his
|
|
||||||
torso all the way down between his legs and underside of his tail.
|
|
||||||
His physique is athletic to muscular. His fingers and toes are
|
|
||||||
equipped sharp black claws. Brown spikes run along his spine down to
|
|
||||||
the tip of his tail. His tail is about one meter in length.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 id="wings">Wings</h3>
|
|
||||||
<div class="prose">
|
|
||||||
<quick-facts>
|
|
||||||
<ul>
|
|
||||||
<li>Wingspan 3-4 meters</li>
|
|
||||||
<li>Closed when on the ground</li>
|
|
||||||
<li>Function like a second pair of arms</li>
|
|
||||||
<li>Pointy talon on end of "hand"</li>
|
|
||||||
</ul>
|
|
||||||
</quick-facts>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
His wing span is around 3-4 meters. He has them closed when on the
|
|
||||||
ground. His wings function like a second pair of arms, at which ends
|
|
||||||
are hand-like limbs with a black talon on top and finger-like
|
|
||||||
extensions, in between which are the membranes of his wings. He can
|
|
||||||
use his wings to fly short distances. Longer distances become
|
|
||||||
difficult due to fatigue of having to carry his own weight with his
|
|
||||||
wings alone.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 id="head">Head</h3>
|
|
||||||
<ref-figure>
|
|
||||||
<template #img>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="@img/sebin-ref-expressions.png"
|
|
||||||
alt="Sebin's Expressions"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #caption>
|
|
||||||
<label>Sebin's Expressions</label>
|
|
||||||
</template>
|
|
||||||
<template #copyright>
|
|
||||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
|
||||||
</template>
|
|
||||||
</ref-figure>
|
|
||||||
|
|
||||||
<div class="prose">
|
|
||||||
<quick-facts>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Round pupils, green iris. Yellow spikes on cheeks, as well as
|
|
||||||
for eyebrows
|
|
||||||
</li>
|
|
||||||
<li>Black horns with slight curve downwards</li>
|
|
||||||
<li>Blue hair, different styles; short style preferred</li>
|
|
||||||
<li>Long, pointy, movable ears</li>
|
|
||||||
<li>Very sharp teeth</li>
|
|
||||||
<li>Tongue with pointy tip</li>
|
|
||||||
</ul>
|
|
||||||
</quick-facts>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
He has round pupils instead of the slit ones typical for reptilians.
|
|
||||||
He has short yellow spikes above his eyes that resemble eyebrows, as
|
|
||||||
well as spikes along the jawline of his cheeks. He has black horns
|
|
||||||
growing out of his head which are mostly straight but slightly curve
|
|
||||||
downwards. His hair is blue and he wears it in varying styles. He
|
|
||||||
has long pointy ears which he can move to determine the origin of
|
|
||||||
sounds around him. He also uses them to express emotion. His teeth
|
|
||||||
are very sharp. In his throat are glands that produce a mixture that
|
|
||||||
allows him to breathe fire. His tongue has a pointy tip.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 id="upperbody">Upper Body</h3>
|
|
||||||
<div class="prose">
|
|
||||||
<quick-facts>
|
|
||||||
<ul>
|
|
||||||
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
|
|
||||||
<li>
|
|
||||||
Any muscle mass from athletic to body builder is fine, with a
|
|
||||||
preference towards body builder
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</quick-facts>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Sebin started working out at the age of 17. Being in top shape is
|
|
||||||
very important to him. His favorite workouts are weight-lifting
|
|
||||||
(dumbbells as well as barbells), lat pulldown, leg press, straight
|
|
||||||
arm pulldown and cable pull. He works out three times a week with
|
|
||||||
one day in between workout days for rest, switching body regions
|
|
||||||
each workout day.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ref-figure>
|
|
||||||
<template #img>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="@img/upper-body-ref.jpg"
|
|
||||||
alt="Sebin's upper body closeup"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #caption>
|
|
||||||
<label>Sebin's upper body closeup</label>
|
|
||||||
</template>
|
|
||||||
<template #copyright>
|
|
||||||
<a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
|
|
||||||
</template>
|
|
||||||
</ref-figure>
|
|
||||||
|
|
||||||
<div class="prose">
|
|
||||||
<p>
|
|
||||||
Sebin is very focused on evenly distributed muscle mass but pays
|
|
||||||
special attention to his back, chest and arms. This is so his fire
|
|
||||||
breath doesn't get weak and he can throw fire projectiles farther. A
|
|
||||||
strong back ensures his wings continue to carry him so he can stay
|
|
||||||
airbourne for extended periods of time.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Additional Muscle References</h3>
|
|
||||||
<div class="prose" v-show="!nsfw">
|
|
||||||
<div class="nsfw-bar">
|
|
||||||
<div class="nsfw-bar__content flex flex--row flex--nowrap">
|
|
||||||
<div>
|
|
||||||
<strong>
|
|
||||||
Some of these additional references are NSFW. Please enable
|
|
||||||
NSFW mode to reveal them.
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
<nsfw-switch
|
|
||||||
id="nsfw-switch-muscle"
|
|
||||||
v-model="nsfw"
|
|
||||||
@change="showWarning()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ref-gallery v-show="nsfw">
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref12.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref1.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref2.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref3.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By
|
|
||||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
|
||||||
Marsel-Defender
|
|
||||||
</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref4.png" />
|
|
||||||
<figcaption>
|
|
||||||
By
|
|
||||||
<a href="https://www.furaffinity.net/user/sirboburto">
|
|
||||||
SirBoburto
|
|
||||||
</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref5.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref6.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref7.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By
|
|
||||||
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref8.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref9.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref10.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/muscle-ref/muscle-ref11.jpg" />
|
|
||||||
<figcaption>
|
|
||||||
By
|
|
||||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
|
||||||
Marsel-Defender
|
|
||||||
</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</ref-gallery>
|
|
||||||
|
|
||||||
<h3 v-show="nsfw" id="penis">Penis</h3>
|
|
||||||
<ref-figure v-show="nsfw">
|
|
||||||
<template #img>
|
|
||||||
<div>
|
|
||||||
<img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #caption>
|
|
||||||
<label>Sebin's manly parts</label>
|
|
||||||
</template>
|
|
||||||
<template #copyright>
|
|
||||||
<a href="https://twitter.com/draftgon">draftgon</a>
|
|
||||||
</template>
|
|
||||||
</ref-figure>
|
|
||||||
|
|
||||||
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
|
|
||||||
|
|
||||||
<div class="prose" v-show="nsfw">
|
|
||||||
<quick-facts>
|
|
||||||
<ul>
|
|
||||||
<li>Human-shaped with ridges</li>
|
|
||||||
<li>Ring-like sheath surrounding shaft</li>
|
|
||||||
<li>
|
|
||||||
Extends from sheath when erect, lives inside sheath when not
|
|
||||||
erect
|
|
||||||
</li>
|
|
||||||
<li>External balls</li>
|
|
||||||
</ul>
|
|
||||||
</quick-facts>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Despite his majorly reptilian appearance he has nipples, a feature
|
|
||||||
of the human side of his family, which also shows with his external
|
|
||||||
testicles. Rather than a slit which houses his penis he has a
|
|
||||||
pouch-like sheath, with the tip slightly peeking out of it when not
|
|
||||||
aroused. His penis is mainly humanoid in shape but is surrounded by
|
|
||||||
several ridges. He can take it out of its pouch while it's still
|
|
||||||
soft (e.g. for passing water). When aroused his charcoal black shaft
|
|
||||||
pushes out from the sheath, its base girded by the sheath like a
|
|
||||||
ring.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="clothes">
|
|
||||||
<h2>Clothing Styles</h2>
|
|
||||||
|
|
||||||
<div class="prose">
|
|
||||||
<p>
|
|
||||||
<strong>
|
|
||||||
The following photos are for illustration purposes only. The
|
|
||||||
clothing shown is not to be taken literally. The design may
|
|
||||||
differ!
|
|
||||||
</strong>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Casual Wear</h3>
|
|
||||||
<ref-gallery>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/casual/fullbody.png" alt="Full Body" />
|
|
||||||
<figcaption>
|
|
||||||
<p>
|
|
||||||
Black tank top, flannell shirt, shorts (w/ dangling bands),
|
|
||||||
sneakers
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
|
|
||||||
</p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</ref-gallery>
|
|
||||||
|
|
||||||
<h3>Cold Weather</h3>
|
|
||||||
<ref-gallery>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/cold/fullbody.png" alt="Full Body" />
|
|
||||||
<figcaption>
|
|
||||||
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
|
|
||||||
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</ref-gallery>
|
|
||||||
|
|
||||||
<h3>Workout</h3>
|
|
||||||
<ref-gallery>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/workout/fullbody.png" alt="Full Body" />
|
|
||||||
<figcaption>
|
|
||||||
<p>
|
|
||||||
<strong>Full body:</strong> Snapback hat, tank top, fingerless
|
|
||||||
gloves, shorts, sneakers
|
|
||||||
</p>
|
|
||||||
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/workout/closeup.jpg" alt="Close-up" />
|
|
||||||
<figcaption>
|
|
||||||
<p>
|
|
||||||
<strong>Close-up:</strong> Snapback hat, headphones, tank top,
|
|
||||||
fingerless gloves, shorts, smartwatch
|
|
||||||
</p>
|
|
||||||
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</ref-gallery>
|
|
||||||
|
|
||||||
<h3>"Doesn't need to leave the house today" Style</h3>
|
|
||||||
<ref-gallery>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
|
|
||||||
<figcaption>
|
|
||||||
<p>Tracksuit pants (optional)</p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
|
|
||||||
<figcaption>
|
|
||||||
<p>Topless w/ jockstrap/boxer briefs</p>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</ref-gallery>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="abilities">
|
|
||||||
<h2>Abilities</h2>
|
|
||||||
<div class="prose">
|
|
||||||
<p>
|
|
||||||
Since Sebin is a fire dragon there’s a myriad of abilities he has at
|
|
||||||
his disposal to defend himself.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Attacks</h3>
|
|
||||||
|
|
||||||
<div class="attacks">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<img
|
|
||||||
src="@img/attacks/sebin-fire_breath-hires.png"
|
|
||||||
alt="Sebin Fire Breath"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<p><strong>Fire Breath</strong></p>
|
|
||||||
<p>
|
|
||||||
Like most fire dragons, Sebin can breathe fire. In order to do
|
|
||||||
this, he takes a deep breath to enrich the oxygen in his lungs
|
|
||||||
with gases, which, together with special glands in his mouth,
|
|
||||||
produce a combustible mixture. The resulting jet of fire,
|
|
||||||
reaching several hundred degrees Celsius, spreads out on its way
|
|
||||||
to its target, scorching everything in its path.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<img
|
|
||||||
src="@img/attacks/sebin-flame_toss-hires.png"
|
|
||||||
alt="Sebin Flame Toss"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<p><strong>Flame Toss</strong></p>
|
|
||||||
<p>
|
|
||||||
By spitting fire into his hands, Sebin can form it into a ball
|
|
||||||
and use it as a projectile. His scales are fireproof and can
|
|
||||||
withstand the high temperatures. Due to their high
|
|
||||||
concentration, the projectiles explode upon impact. By combining
|
|
||||||
two fireballs the explosion radius increases dramatically.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<img
|
|
||||||
src="@img/attacks/sebin-kindled_fist-hires.png"
|
|
||||||
alt="Sebin Kindled Fist"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<p><strong>Kindled Fist</strong></p>
|
|
||||||
<p>
|
|
||||||
Apart from throwing projectiles, Sebin can also use the
|
|
||||||
fireballs to wrap his fists in fire. This allows him to inflict
|
|
||||||
severe burns on his opponent with each blow. In addition, he can
|
|
||||||
release the fire from his fists with aimed blows and hurl it at
|
|
||||||
his opponents.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<img
|
|
||||||
src="@img/attacks/sebin-burning_twister-hires.png"
|
|
||||||
alt="Sebin Burning Twister"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<p><strong>Burning Twister</strong></p>
|
|
||||||
<p>
|
|
||||||
A technique used in aerial combat, Sebin uses his fire breath to
|
|
||||||
engulf his body in flames while spinning to become a fire
|
|
||||||
tornado that singes opponents.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Overdrive Form</h2>
|
|
||||||
<ref-figure>
|
|
||||||
<template #img>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="@img/sebin-overdrive_ref-hires.jpg"
|
|
||||||
alt="Sebin in Overdrive"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #caption>
|
|
||||||
<label>Sebin in Overdrive</label>
|
|
||||||
</template>
|
|
||||||
<template #copyright>
|
|
||||||
<a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
|
|
||||||
</template>
|
|
||||||
</ref-figure>
|
|
||||||
|
|
||||||
<div class="prose">
|
|
||||||
<p>
|
|
||||||
Sebin can enter an Overdrive Form which greatly increases his
|
|
||||||
strength and abilities but it comes at a cost.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
He enters Overdrive by engulfing himself in a pillar of flames which
|
|
||||||
transforms his exterior physique. During Overdrive transformation
|
|
||||||
his hair ignites and flickers with blue flames. The corners of his
|
|
||||||
eyes flicker with long green flames. His arms and legs become part
|
|
||||||
carbon black and are crossed by several glowing veins which pulsate
|
|
||||||
like flowing lava. Fire in this form burns several degrees hotter
|
|
||||||
than usual because his body becomes a living blast furnace, which is
|
|
||||||
why his limbs have to be of more fire-proof material to withstand
|
|
||||||
the increased heat.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
To complete the transformation he inhales the flames from the pillar
|
|
||||||
surrounding him which heats up his body from within. Even if Sebin
|
|
||||||
is a fire dragon who can sustain high degrees of heat he is
|
|
||||||
essentially overheating himself from the inside. Because of this he
|
|
||||||
can't maintain this form for more than a few hours before he does
|
|
||||||
permanent damage to his own body.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Direct body contact with Sebin during overdrive causes 3rd degree
|
|
||||||
burns as he emits an extreme temperature, although less than he
|
|
||||||
keeps inside his body. His immediate surroundings are likely to burn
|
|
||||||
or melt.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Attacks</h3>
|
|
||||||
<div class="prose">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Fire Breath</strong> (improved)</td>
|
|
||||||
<td>
|
|
||||||
The reach of Sebin's Fire Breath increases as well as the
|
|
||||||
frequency at which he can fire shots from his mouth.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Flame Toss</strong> (improved)</td>
|
|
||||||
<td>
|
|
||||||
Overdrive Form eliminates the need for Sebin to spit fire into
|
|
||||||
his palms. It instead enables him to fire the shots directly
|
|
||||||
from the palm of his hands, as the firey veins crossing his arms
|
|
||||||
act as an orifice to do so. The explosion radius of the burning
|
|
||||||
projectiles that explode on impact is greatly increased.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Kindled Fist</strong> (improved)</td>
|
|
||||||
<td>
|
|
||||||
As his arms and legs are infused with fire his punches and kicks
|
|
||||||
exert trails of flames while doing so. Landing a punch or kick
|
|
||||||
sears enemies.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- <tr>
|
|
||||||
<td><strong>Searing Discus</strong></td>
|
|
||||||
<td>
|
|
||||||
Overdrive allows Sebin to form rings of fire by igniting flames
|
|
||||||
from his fingertips and swirling them in a circle motion. He can
|
|
||||||
use them for both close quarters or ranged combat.
|
|
||||||
</td>
|
|
||||||
</tr> -->
|
|
||||||
<tr>
|
|
||||||
<td><strong>Combustion Flare</strong></td>
|
|
||||||
<td>
|
|
||||||
Clinking both of his wrists against each other like flints
|
|
||||||
unleashes a devestating fire blast from both of his fire-infused
|
|
||||||
hands. A secure foothold is needed to prevent Sebin from being
|
|
||||||
thrown back by the recoil of the attack. Using this technique in
|
|
||||||
the air is therefore highly risky.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Blazing Pandemonium</strong></td>
|
|
||||||
<td>
|
|
||||||
A heavy impact into the ground from a great height with both
|
|
||||||
fists, tearing deep cracks in the ground around the impact
|
|
||||||
crater. Combined with <strong><em>Kindled Fist</em></strong>
|
|
||||||
the heat in Sebin's arms are forced through the newly created
|
|
||||||
furrows, transforming the scene into an inferno.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Scorching Edge</strong></td>
|
|
||||||
<td>
|
|
||||||
A fiery blade towering several meters into the air that Sebin
|
|
||||||
sends careening towards his enemies from his fire-infused legs
|
|
||||||
with a backflip kick, leaving a swath of destruction in its
|
|
||||||
wake. Upon impact the force of the attack is distributed
|
|
||||||
sideways.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Circling Fire Shield</strong></td>
|
|
||||||
<td>
|
|
||||||
A rather defensive technique. By spinning around with stretched
|
|
||||||
out arms Sebin creates fire balls, which he usually hurls
|
|
||||||
towards enemies, that circle around his body diagonally. They
|
|
||||||
act as a shield while he can still move his arms relatively
|
|
||||||
freely. Enemies would be well advised to keep their distance to
|
|
||||||
this spinning shield, as the fire balls will still explode on
|
|
||||||
contact.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<ref-footer />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import QuickFacts from "@components/QuickFacts.vue";
|
import Navigation from "@/components/Navigation.vue";
|
||||||
import DataTable from "@components/DataTable.vue";
|
|
||||||
import RefGallery from "@components/Gallery.vue";
|
|
||||||
import RefFigure from "@components/Figure.vue";
|
|
||||||
import RefHeader from "@components/Header.vue";
|
|
||||||
import RefFooter from "@components/Footer.vue";
|
|
||||||
import NsfwSwitch from "@components/NsfwSwitch.vue";
|
|
||||||
import NsfwWarning from "@components/NsfwWarning.vue";
|
|
||||||
|
|
||||||
import Sebin from "@mixins/Sebin.js";
|
|
||||||
import Helper from "@mixins/Helper.js";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "app",
|
components: { Navigation },
|
||||||
components: {
|
|
||||||
QuickFacts,
|
|
||||||
DataTable,
|
|
||||||
RefGallery,
|
|
||||||
RefFigure,
|
|
||||||
RefHeader,
|
|
||||||
RefFooter,
|
|
||||||
NsfwSwitch,
|
|
||||||
NsfwWarning,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
nsfw: false,
|
routes: [
|
||||||
isWarn: false,
|
{ path: "/", name: "Home" },
|
||||||
isConfirmedHorny: false,
|
{ path: "/general", name: "General" },
|
||||||
version: require("../package.json").version,
|
{ path: "/anatomy", name: "Anatomy" },
|
||||||
|
{ path: "/clothing", name: "Clothing" },
|
||||||
|
{ path: "/abilities", name: "Abilities" },
|
||||||
|
{ path: "/overdrive", name: "Overdrive" },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mixins: [Sebin, Helper],
|
|
||||||
methods: {
|
|
||||||
showWarning() {
|
|
||||||
if (!this.isConfirmedHorny) {
|
|
||||||
this.isWarn = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.nsfw = false;
|
|
||||||
}, 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/base.scss";
|
@import "@/scss/base.scss";
|
||||||
@import "~normalize.css";
|
@import "~normalize.css";
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
margin: 6em 0 2em 0;
|
||||||
color: $copy-color;
|
color: $copy-color;
|
||||||
font-size: 1.125em;
|
font-size: 1.125em;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
@ -721,127 +53,38 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
header {
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
p {
|
|
||||||
max-width: 45rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
@media (min-width: 125em) {
|
|
||||||
max-width: 55rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose {
|
|
||||||
max-width: 45rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
@media (min-width: 125em) {
|
|
||||||
max-width: 55rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq-mobile {
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
p,
|
|
||||||
.quickfacts {
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
h2 {
|
|
||||||
border-bottom: 0.0625em $copy-color solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
border-bottom: 0.125em $copy-color dotted;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attacks {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
@include mq-desktop {
|
|
||||||
max-width: 45rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 70em) {
|
|
||||||
max-width: 70em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
flex: 0 1 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 0.375em 0;
|
|
||||||
|
|
||||||
@include mq-desktop {
|
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&:nth-child(even) {
|
position: fixed;
|
||||||
text-align: right;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
.col {
|
z-index: 1;
|
||||||
&:first-child {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 70em) {
|
max-width: 70em;
|
||||||
text-align: left;
|
margin: 1em;
|
||||||
flex: 0 1 50%;
|
padding: 0.5em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
&:nth-child(even) {
|
background-color: darken($bg-color-dark, 5%);
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
.col {
|
@media (min-width: 90em) {
|
||||||
&:first-child {
|
margin: 1em auto;
|
||||||
order: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.col {
|
.nav-logo {
|
||||||
flex: 1 1 auto;
|
display: block;
|
||||||
|
margin: 0 0 0 0.25em;
|
||||||
&:first-child {
|
height: 2em;
|
||||||
text-align: center;
|
border: 0.125em solid #fff;
|
||||||
|
border-radius: 100%;
|
||||||
img {
|
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq-desktop {
|
|
||||||
flex: 0 0 15em;
|
|
||||||
height: 15em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
@include mq-desktop {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 784 KiB After Width: | Height: | Size: 784 KiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 734 KiB After Width: | Height: | Size: 734 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 717 KiB After Width: | Height: | Size: 717 KiB |
|
Before Width: | Height: | Size: 432 KiB After Width: | Height: | Size: 432 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 376 KiB After Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 657 KiB After Width: | Height: | Size: 657 KiB |
|
Before Width: | Height: | Size: 560 KiB After Width: | Height: | Size: 560 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 393 KiB After Width: | Height: | Size: 393 KiB |
|
Before Width: | Height: | Size: 512 KiB After Width: | Height: | Size: 512 KiB |
|
Before Width: | Height: | Size: 867 KiB After Width: | Height: | Size: 867 KiB |
|
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 619 KiB After Width: | Height: | Size: 619 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 909 KiB After Width: | Height: | Size: 909 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 306 KiB |
|
Before Width: | Height: | Size: 752 KiB After Width: | Height: | Size: 752 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
BIN
src/assets/sebin-smug-icon.png
Normal file
BIN
src/assets/sebin-smug-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 KiB |
|
|
@ -49,11 +49,13 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/_variables.scss";
|
@import "@/scss/_variables.scss";
|
||||||
|
|
||||||
.datatable {
|
.datatable {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 55rem;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
&__heading,
|
&__heading,
|
||||||
&__cell {
|
&__cell {
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,8 @@ export default {};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/_variables.scss";
|
@import "@/scss/_variables.scss";
|
||||||
@import "@scss/_mixins.scss";
|
@import "@/scss/_mixins.scss";
|
||||||
|
|
||||||
.figure {
|
.figure {
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
|
|
|
||||||
|
|
@ -70,8 +70,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/_variables.scss";
|
@import "@/scss/_variables.scss";
|
||||||
@import "@scss/_mixins.scss";
|
@import "@/scss/_mixins.scss";
|
||||||
|
|
||||||
.gallery {
|
.gallery {
|
||||||
&__prev,
|
&__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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "@/scss/base.scss";
|
||||||
|
|
||||||
.nsfw-switch {
|
.nsfw-switch {
|
||||||
font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
|
font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
|
||||||
"android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
|
"android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
|
||||||
|
|
@ -107,7 +109,7 @@ export default {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
&:checked + .toggle {
|
&:checked + .toggle {
|
||||||
background-color: #4bd763;
|
background-color: $bg-color-light;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
|
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
|
||||||
|
|
|
||||||
|
|
@ -32,8 +32,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/_variables.scss";
|
@import "@/scss/_variables.scss";
|
||||||
@import "@scss/_mixins.scss";
|
@import "@/scss/_mixins.scss";
|
||||||
|
|
||||||
.nsfw-warning {
|
.nsfw-warning {
|
||||||
position: fixed;
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@scss/base.scss";
|
@import "@/scss/base.scss";
|
||||||
|
|
||||||
.quickfacts {
|
.quickfacts {
|
||||||
border-radius: 1em;
|
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>
|
||||||
12
src/main.js
12
src/main.js
|
|
@ -1,11 +1,5 @@
|
||||||
import Vue from "vue";
|
import { createApp } from "vue";
|
||||||
import VueScrollTo from "vue-scrollto";
|
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
createApp(App).use(router).mount("#app");
|
||||||
|
|
||||||
Vue.use(VueScrollTo, { offset: -55 });
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
render: (h) => h(App),
|
|
||||||
}).$mount("#app");
|
|
||||||
|
|
|
||||||
47
src/router/index.js
Normal file
47
src/router/index.js
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
import Home from "../views/Home.vue";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "Home",
|
||||||
|
component: Home,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/general",
|
||||||
|
name: "General",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "general" */ "@/views/General.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/anatomy",
|
||||||
|
name: "Anatomy",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "anatomy" */ "@/views/Anatomy.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/clothing",
|
||||||
|
name: "Clothing",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "clothing" */ "@/views/Clothing.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/abilities",
|
||||||
|
name: "Abilities",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "abilities" */ "@/views/Abilities.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/overdrive",
|
||||||
|
name: "Overdrive",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "overdrive" */ "@/views/Overdrive.vue"),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(process.env.BASE_URL),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
180
src/views/Abilities.vue
Normal file
180
src/views/Abilities.vue
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
<template>
|
||||||
|
<prose>
|
||||||
|
<h2>Abilities</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Since Sebin is a fire dragon there's a myriad of abilities he has at his
|
||||||
|
disposal to defend himself.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Attacks</h3>
|
||||||
|
|
||||||
|
<div class="attacks">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
|
||||||
|
alt="Sebin Fire Breath"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<p><strong>Fire Breath</strong></p>
|
||||||
|
<p>
|
||||||
|
Like most fire dragons, Sebin can breathe fire. In order to do this,
|
||||||
|
he takes a deep breath to enrich the oxygen in his lungs with gases,
|
||||||
|
which, together with special glands in his mouth, produce a
|
||||||
|
combustible mixture. The resulting jet of fire, reaching several
|
||||||
|
hundred degrees Celsius, spreads out on its way to its target,
|
||||||
|
scorching everything in its path.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
|
||||||
|
alt="Sebin Flame Toss"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<p><strong>Flame Toss</strong></p>
|
||||||
|
<p>
|
||||||
|
By spitting fire into his hands, Sebin can form it into a ball and
|
||||||
|
use it as a projectile. His scales are fireproof and can withstand
|
||||||
|
the high temperatures. Due to their high concentration, the
|
||||||
|
projectiles explode upon impact. By combining two fireballs the
|
||||||
|
explosion radius increases dramatically.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
|
||||||
|
alt="Sebin Kindled Fist"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<p><strong>Kindled Fist</strong></p>
|
||||||
|
<p>
|
||||||
|
Apart from throwing projectiles, Sebin can also use the fireballs to
|
||||||
|
wrap his fists in fire. This allows him to inflict severe burns on
|
||||||
|
his opponent with each blow. In addition, he can release the fire
|
||||||
|
from his fists with aimed blows and hurl it at his opponents.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
|
||||||
|
alt="Sebin Burning Twister"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<p><strong>Burning Twister</strong></p>
|
||||||
|
<p>
|
||||||
|
A technique used in aerial combat, Sebin uses his fire breath to
|
||||||
|
engulf his body in flames while spinning to become a fire tornado
|
||||||
|
that singes opponents.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Prose },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/scss/base.scss";
|
||||||
|
|
||||||
|
.attacks {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
@include mq-desktop {
|
||||||
|
max-width: 45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 70em) {
|
||||||
|
max-width: 70em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
flex: 0 1 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0.375em 0;
|
||||||
|
|
||||||
|
@include mq-desktop {
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.col {
|
||||||
|
&:first-child {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 70em) {
|
||||||
|
text-align: left;
|
||||||
|
flex: 0 1 50%;
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.col {
|
||||||
|
&:first-child {
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq-desktop {
|
||||||
|
flex: 0 0 15em;
|
||||||
|
height: 15em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include mq-desktop {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
360
src/views/Anatomy.vue
Normal file
360
src/views/Anatomy.vue
Normal file
|
|
@ -0,0 +1,360 @@
|
||||||
|
<template>
|
||||||
|
<nsfw-warning v-show="isWarn">
|
||||||
|
<template #heading>
|
||||||
|
⚠️⚠️⚠️<br />
|
||||||
|
Whoa, Nelly!
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #message>
|
||||||
|
By enabling NSFW mode you confirm that you are of legal age to view adult
|
||||||
|
content.
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #yes>Yes, show me the goods 👀</template>
|
||||||
|
<template #no>NO, STAHP 😱</template>
|
||||||
|
</nsfw-warning>
|
||||||
|
|
||||||
|
<prose>
|
||||||
|
<nsfw-switch id="nsfw-switch" v-model="nsfw" @change="showWarning()" />
|
||||||
|
|
||||||
|
<h2>Anatomy</h2>
|
||||||
|
|
||||||
|
<ref-figure>
|
||||||
|
<template #img>
|
||||||
|
<img
|
||||||
|
v-if="nsfw"
|
||||||
|
src="@/assets/refs/sebin-ref-body-NSFW.png"
|
||||||
|
alt="Sebin Full Body Ref"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
src="@/assets/refs/sebin-ref-body-SFW.png"
|
||||||
|
alt="Sebin Full Body Ref"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #caption>
|
||||||
|
<label>Sebin Full Body Reference</label>
|
||||||
|
</template>
|
||||||
|
<template #copyright>
|
||||||
|
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||||
|
</template>
|
||||||
|
</ref-figure>
|
||||||
|
|
||||||
|
<data-table class="prose" :dataset="getSebinData.colors" />
|
||||||
|
|
||||||
|
<quick-facts>
|
||||||
|
<ul>
|
||||||
|
<li>Bipedal plantigrade</li>
|
||||||
|
<li>
|
||||||
|
Red scales, yellow chest-plates running from underneath chin, over
|
||||||
|
torso, between legs, underside of tail
|
||||||
|
</li>
|
||||||
|
<li>Athletic to body builder physique</li>
|
||||||
|
<li>Sharp, black claws on fingers and toes</li>
|
||||||
|
<li>Brown spikes running over back and top-side of tail</li>
|
||||||
|
<li>Tail about 1 meter in length</li>
|
||||||
|
</ul>
|
||||||
|
</quick-facts>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sebin is a bipedal plantigrade. His body is mostly covered by red scales
|
||||||
|
with yellow chest plates running from below his chin over his torso all
|
||||||
|
the way down between his legs and underside of his tail. His physique is
|
||||||
|
athletic to muscular. His fingers and toes are equipped sharp black claws.
|
||||||
|
Brown spikes run along his spine down to the tip of his tail. His tail is
|
||||||
|
about one meter in length.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Wings</h3>
|
||||||
|
|
||||||
|
<quick-facts>
|
||||||
|
<ul>
|
||||||
|
<li>Wingspan 3-4 meters</li>
|
||||||
|
<li>Closed when on the ground</li>
|
||||||
|
<li>Function like a second pair of arms</li>
|
||||||
|
<li>Pointy talon on end of "hand"</li>
|
||||||
|
</ul>
|
||||||
|
</quick-facts>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
His wing span is around 3-4 meters. He has them closed when on the ground.
|
||||||
|
His wings function like a second pair of arms, at which ends are hand-like
|
||||||
|
limbs with a black talon on top and finger-like extensions, in between
|
||||||
|
which are the membranes of his wings. He can use his wings to fly short
|
||||||
|
distances. Longer distances become difficult due to fatigue of having to
|
||||||
|
carry his own weight with his wings alone.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Head</h3>
|
||||||
|
<ref-figure>
|
||||||
|
<template #img>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/sebin-ref-expressions.png"
|
||||||
|
alt="Sebin's Expressions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #caption>
|
||||||
|
<label>Sebin's Expressions</label>
|
||||||
|
</template>
|
||||||
|
<template #copyright>
|
||||||
|
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||||
|
</template>
|
||||||
|
</ref-figure>
|
||||||
|
|
||||||
|
<quick-facts>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Round pupils, green iris. Yellow spikes on cheeks, as well as for
|
||||||
|
eyebrows
|
||||||
|
</li>
|
||||||
|
<li>Black horns with slight curve downwards</li>
|
||||||
|
<li>Blue hair, different styles; short style preferred</li>
|
||||||
|
<li>Long, pointy, movable ears</li>
|
||||||
|
<li>Very sharp teeth</li>
|
||||||
|
<li>Tongue with pointy tip</li>
|
||||||
|
</ul>
|
||||||
|
</quick-facts>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
He has round pupils instead of the slit ones typical for reptilians. He
|
||||||
|
has short yellow spikes above his eyes that resemble eyebrows, as well as
|
||||||
|
spikes along the jawline of his cheeks. He has black horns growing out of
|
||||||
|
his head which are mostly straight but slightly curve downwards. His hair
|
||||||
|
is blue and he wears it in varying styles. He has long pointy ears which
|
||||||
|
he can move to determine the origin of sounds around him. He also uses
|
||||||
|
them to express emotion. His teeth are very sharp. In his throat are
|
||||||
|
glands that produce a mixture that allows him to breathe fire. His tongue
|
||||||
|
has a pointy tip.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Upper Body</h3>
|
||||||
|
<quick-facts>
|
||||||
|
<ul>
|
||||||
|
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
|
||||||
|
<li>
|
||||||
|
Any muscle mass from athletic to body builder is fine, with a
|
||||||
|
preference towards body builder
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</quick-facts>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sebin started working out at the age of 17. Being in top shape is very
|
||||||
|
important to him. His favorite workouts are weight-lifting (dumbbells as
|
||||||
|
well as barbells), lat pulldown, leg press, straight arm pulldown and
|
||||||
|
cable pull. He works out three times a week with one day in between
|
||||||
|
workout days for rest, switching body regions each workout day.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ref-figure>
|
||||||
|
<template #img>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/upper-body-ref.jpg"
|
||||||
|
alt="Sebin's upper body closeup"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #caption>
|
||||||
|
<label>Sebin's upper body closeup</label>
|
||||||
|
</template>
|
||||||
|
<template #copyright>
|
||||||
|
<a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
|
||||||
|
</template>
|
||||||
|
</ref-figure>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sebin is very focused on evenly distributed muscle mass but pays special
|
||||||
|
attention to his back, chest and arms. This is so his fire breath doesn't
|
||||||
|
get weak and he can throw fire projectiles farther. A strong back ensures
|
||||||
|
his wings continue to carry him so he can stay airbourne for extended
|
||||||
|
periods of time.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Additional Muscle References</h3>
|
||||||
|
<!-- <div class="nsfw-bar" v-show="!nsfw">
|
||||||
|
<div class="nsfw-bar__content flex flex--row flex--nowrap">
|
||||||
|
<div>
|
||||||
|
<strong>
|
||||||
|
Some of these additional references are NSFW. Please enable NSFW
|
||||||
|
mode to reveal them.
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<nsfw-switch
|
||||||
|
id="nsfw-switch-muscle"
|
||||||
|
v-model="nsfw"
|
||||||
|
@change="showWarning()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<ref-gallery>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref12.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref1.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref2.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref3.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By
|
||||||
|
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||||
|
Marsel-Defender
|
||||||
|
</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref4.png" />
|
||||||
|
<figcaption>
|
||||||
|
By
|
||||||
|
<a href="https://www.furaffinity.net/user/sirboburto"> SirBoburto </a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref5.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref6.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref7.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By
|
||||||
|
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref8.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref9.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref10.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/muscle/muscle-ref11.jpg" />
|
||||||
|
<figcaption>
|
||||||
|
By
|
||||||
|
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||||
|
Marsel-Defender
|
||||||
|
</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ref-gallery>
|
||||||
|
|
||||||
|
<h3>Penis</h3>
|
||||||
|
<ref-figure>
|
||||||
|
<template #img>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/sebin-ref-penis.png"
|
||||||
|
alt="Sebin's manly parts"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #caption>
|
||||||
|
<label>Sebin's manly parts</label>
|
||||||
|
</template>
|
||||||
|
<template #copyright>
|
||||||
|
<a href="https://twitter.com/draftgon">draftgon</a>
|
||||||
|
</template>
|
||||||
|
</ref-figure>
|
||||||
|
|
||||||
|
<data-table :dataset="getSebinData.penis" />
|
||||||
|
|
||||||
|
<quick-facts>
|
||||||
|
<ul>
|
||||||
|
<li>Human-shaped with ridges</li>
|
||||||
|
<li>Ring-like sheath surrounding shaft</li>
|
||||||
|
<li>
|
||||||
|
Extends from sheath when erect, lives inside sheath when not erect
|
||||||
|
</li>
|
||||||
|
<li>External balls</li>
|
||||||
|
</ul>
|
||||||
|
</quick-facts>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Despite his majorly reptilian appearance he has nipples, a feature of the
|
||||||
|
human side of his family, which also shows with his external testicles.
|
||||||
|
Rather than a slit which houses his penis he has a pouch-like sheath, with
|
||||||
|
the tip slightly peeking out of it when not aroused. His penis is mainly
|
||||||
|
humanoid in shape but is surrounded by several ridges. He can take it out
|
||||||
|
of its pouch while it's still soft (e.g. for passing water). When aroused
|
||||||
|
his charcoal black shaft pushes out from the sheath, its base girded by
|
||||||
|
the sheath like a ring.
|
||||||
|
</p>
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
import NsfwSwitch from "@/components/NsfwSwitch.vue";
|
||||||
|
import NsfwWarning from "@/components/NsfwWarning.vue";
|
||||||
|
import RefFigure from "@/components/Figure.vue";
|
||||||
|
import QuickFacts from "@/components/QuickFacts.vue";
|
||||||
|
import DataTable from "@/components/DataTable.vue";
|
||||||
|
import RefGallery from "@/components/Gallery.vue";
|
||||||
|
|
||||||
|
import Sebin from "@/mixins/Sebin.js";
|
||||||
|
import Helper from "@/mixins/Helper.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Prose,
|
||||||
|
NsfwSwitch,
|
||||||
|
NsfwWarning,
|
||||||
|
RefFigure,
|
||||||
|
QuickFacts,
|
||||||
|
DataTable,
|
||||||
|
RefGallery,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nsfw: false,
|
||||||
|
isWarn: false,
|
||||||
|
isConfirmedHorny: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mixins: [Sebin, Helper],
|
||||||
|
methods: {
|
||||||
|
showWarning() {
|
||||||
|
if (!this.isConfirmedHorny) {
|
||||||
|
this.isWarn = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
82
src/views/Clothing.vue
Normal file
82
src/views/Clothing.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<prose>
|
||||||
|
<h2>Clothing Styles</h2>
|
||||||
|
|
||||||
|
<h3>Casual Wear</h3>
|
||||||
|
<ref-gallery>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/casual/fullbody.png" alt="Full Body" />
|
||||||
|
<figcaption>
|
||||||
|
<p>
|
||||||
|
Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
|
||||||
|
</p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ref-gallery>
|
||||||
|
|
||||||
|
<h3>Cold Weather</h3>
|
||||||
|
<ref-gallery>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/cold/fullbody.png" alt="Full Body" />
|
||||||
|
<figcaption>
|
||||||
|
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
|
||||||
|
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ref-gallery>
|
||||||
|
|
||||||
|
<h3>Workout</h3>
|
||||||
|
<ref-gallery>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/workout/fullbody.png" alt="Full Body" />
|
||||||
|
<figcaption>
|
||||||
|
<p>
|
||||||
|
<strong>Full body:</strong> Snapback hat, tank top, fingerless
|
||||||
|
gloves, shorts, sneakers
|
||||||
|
</p>
|
||||||
|
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/workout/closeup.jpg" alt="Close-up" />
|
||||||
|
<figcaption>
|
||||||
|
<p>
|
||||||
|
<strong>Close-up:</strong> Snapback hat, headphones, tank top,
|
||||||
|
fingerless gloves, shorts, smartwatch
|
||||||
|
</p>
|
||||||
|
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ref-gallery>
|
||||||
|
|
||||||
|
<h3>"Doesn't need to leave the house today" Style</h3>
|
||||||
|
<ref-gallery>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/lazy/pants.jpg" alt="Tank Top" />
|
||||||
|
<figcaption>
|
||||||
|
<p>Tracksuit pants (optional)</p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts" />
|
||||||
|
<figcaption>
|
||||||
|
<p>Topless w/ jockstrap/boxer briefs</p>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ref-gallery>
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
import RefGallery from "@/components/Gallery.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Prose, RefGallery },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
24
src/views/General.vue
Normal file
24
src/views/General.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<template>
|
||||||
|
<prose>
|
||||||
|
<h2>General</h2>
|
||||||
|
|
||||||
|
<p>Here's some general information about Sebin to get you started.</p>
|
||||||
|
|
||||||
|
<data-table :dataset="getSebinData.generic" />
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
import DataTable from "@/components/DataTable.vue";
|
||||||
|
|
||||||
|
import Sebin from "@/mixins/Sebin.js";
|
||||||
|
import Helper from "@/mixins/Helper.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Prose, DataTable },
|
||||||
|
mixins: [Sebin, Helper],
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
24
src/views/Home.vue
Normal file
24
src/views/Home.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<template>
|
||||||
|
<prose>
|
||||||
|
<welcome>
|
||||||
|
<template #main>Sebin Nyshkim</template>
|
||||||
|
<template #sub>Character Reference Page</template>
|
||||||
|
</welcome>
|
||||||
|
|
||||||
|
<h3>Welcome to Sebin's Ref Page</h3>
|
||||||
|
<p>
|
||||||
|
Want to learn more about this handsome dragon? You've come to the right
|
||||||
|
place!
|
||||||
|
</p>
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
import Welcome from "@/components/Welcome.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Home",
|
||||||
|
components: { Prose, Welcome },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
146
src/views/Overdrive.vue
Normal file
146
src/views/Overdrive.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
<template>
|
||||||
|
<prose>
|
||||||
|
<h2>Overdrive Form</h2>
|
||||||
|
|
||||||
|
<ref-figure>
|
||||||
|
<template #img>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="@/assets/refs/sebin-overdrive_ref-hires.jpg"
|
||||||
|
alt="Sebin in Overdrive"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #caption>
|
||||||
|
<label>Sebin in Overdrive</label>
|
||||||
|
</template>
|
||||||
|
<template #copyright>
|
||||||
|
<a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
|
||||||
|
</template>
|
||||||
|
</ref-figure>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sebin can enter an Overdrive Form which greatly increases his strength and
|
||||||
|
abilities but it comes at a cost.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
He enters Overdrive by engulfing himself in a pillar of flames which
|
||||||
|
transforms his exterior physique. During Overdrive transformation his hair
|
||||||
|
ignites and flickers with blue flames. The corners of his eyes flicker
|
||||||
|
with long green flames. His arms and legs become part carbon black and are
|
||||||
|
crossed by several glowing veins which pulsate like flowing lava. Fire in
|
||||||
|
this form burns several degrees hotter than usual because his body becomes
|
||||||
|
a living blast furnace, which is why his limbs have to be of more
|
||||||
|
fire-proof material to withstand the increased heat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
To complete the transformation he inhales the flames from the pillar
|
||||||
|
surrounding him which heats up his body from within. Even if Sebin is a
|
||||||
|
fire dragon who can sustain high degrees of heat he is essentially
|
||||||
|
overheating himself from the inside. Because of this he can't maintain
|
||||||
|
this form for more than a few hours before he does permanent damage to his
|
||||||
|
own body.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Direct body contact with Sebin during overdrive causes 3rd degree burns as
|
||||||
|
he emits an extreme temperature, although less than he keeps inside his
|
||||||
|
body. His immediate surroundings are likely to burn or melt.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Attacks</h3>
|
||||||
|
<table class="overdrive-attacks">
|
||||||
|
<tr>
|
||||||
|
<td><strong>Fire Breath</strong> (improved)</td>
|
||||||
|
<td>
|
||||||
|
The reach of Sebin's Fire Breath increases as well as the frequency at
|
||||||
|
which he can fire shots from his mouth.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Flame Toss</strong> (improved)</td>
|
||||||
|
<td>
|
||||||
|
Overdrive Form eliminates the need for Sebin to spit fire into his
|
||||||
|
palms. It instead enables him to fire the shots directly from the palm
|
||||||
|
of his hands, as the firey veins crossing his arms act as an orifice
|
||||||
|
to do so. The explosion radius of the burning projectiles that explode
|
||||||
|
on impact is greatly increased.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Kindled Fist</strong> (improved)</td>
|
||||||
|
<td>
|
||||||
|
As his arms and legs are infused with fire his punches and kicks exert
|
||||||
|
trails of flames while doing so. Landing a punch or kick sears
|
||||||
|
enemies.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- <tr>
|
||||||
|
<td><strong>Searing Discus</strong></td>
|
||||||
|
<td>
|
||||||
|
Overdrive allows Sebin to form rings of fire by igniting flames from
|
||||||
|
his fingertips and swirling them in a circle motion. He can use them
|
||||||
|
for both close quarters or ranged combat.
|
||||||
|
</td>
|
||||||
|
</tr> -->
|
||||||
|
<tr>
|
||||||
|
<td><strong>Combustion Flare</strong></td>
|
||||||
|
<td>
|
||||||
|
Clinking both of his wrists against each other like flints unleashes a
|
||||||
|
devestating fire blast from both of his fire-infused hands. A secure
|
||||||
|
foothold is needed to prevent Sebin from being thrown back by the
|
||||||
|
recoil of the attack. Using this technique in the air is therefore
|
||||||
|
highly risky.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Blazing Pandemonium</strong></td>
|
||||||
|
<td>
|
||||||
|
A heavy impact into the ground from a great height with both fists,
|
||||||
|
tearing deep cracks in the ground around the impact crater. Combined
|
||||||
|
with <strong><em>Kindled Fist</em></strong>
|
||||||
|
the heat in Sebin's arms are forced through the newly created furrows,
|
||||||
|
transforming the scene into an inferno.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Scorching Edge</strong></td>
|
||||||
|
<td>
|
||||||
|
A fiery blade towering several meters into the air that Sebin sends
|
||||||
|
careening towards his enemies from his fire-infused legs with a
|
||||||
|
backflip kick, leaving a swath of destruction in its wake. Upon impact
|
||||||
|
the force of the attack is distributed sideways.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Circling Fire Shield</strong></td>
|
||||||
|
<td>
|
||||||
|
A rather defensive technique. By spinning around with stretched out
|
||||||
|
arms Sebin creates fire balls, which he usually hurls towards enemies,
|
||||||
|
that circle around his body diagonally. They act as a shield while he
|
||||||
|
can still move his arms relatively freely. Enemies would be well
|
||||||
|
advised to keep their distance to this spinning shield, as the fire
|
||||||
|
balls will still explode on contact.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</prose>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Prose from "@/components/Prose.vue";
|
||||||
|
import RefFigure from "@/components/Figure.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Prose, RefFigure },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.overdrive-attacks {
|
||||||
|
max-width: 55rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,22 +1,8 @@
|
||||||
const path = require("path");
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: "",
|
publicPath: "",
|
||||||
css: {
|
css: {
|
||||||
sourceMap: process.env.NODE_ENV !== "production",
|
sourceMap: process.env.NODE_ENV !== "production",
|
||||||
},
|
},
|
||||||
configureWebpack: {
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
"@fonts": path.resolve(__dirname, "src/assets/fonts/"),
|
|
||||||
"@img": path.resolve(__dirname, "src/assets/img/"),
|
|
||||||
"@scss": path.resolve(__dirname, "src/scss/"),
|
|
||||||
"@data": path.resolve(__dirname, "src/data/"),
|
|
||||||
"@mixins": path.resolve(__dirname, "src/mixins/"),
|
|
||||||
"@components": path.resolve(__dirname, "src/components/"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chainWebpack: (config) => {
|
chainWebpack: (config) => {
|
||||||
config.plugin("html").tap((args) => {
|
config.plugin("html").tap((args) => {
|
||||||
const meta = {
|
const meta = {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue