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: {
|
||||
node: true,
|
||||
},
|
||||
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
|
||||
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
||||
parserOptions: {
|
||||
parser: "babel-eslint",
|
||||
},
|
||||
|
|
|
|||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -2,6 +2,7 @@
|
|||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
|
@ -10,9 +11,11 @@ node_modules
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
# sebin-reference
|
||||
# vue3-test
|
||||
|
||||
## Project setup
|
||||
```
|
||||
|
|
|
|||
1912
package-lock.json
generated
1912
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",
|
||||
"version": "0.6.4",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
@ -8,25 +8,25 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.11.0",
|
||||
"core-js": "^3.6.5",
|
||||
"normalize.css": "^8.0.1",
|
||||
"vue": "^2.6.12",
|
||||
"vue-scrollto": "^2.20.0"
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"image-webpack-loader": "^6.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"image-webpack-loader": "^8.0.1",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<div class="bubbles"></div>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
847
src/App.vue
847
src/App.vue
|
|
@ -1,711 +1,43 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<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>
|
||||
<header>
|
||||
<img
|
||||
v-if="nsfw"
|
||||
src="@img/sebin-ref-body-NSFW.png"
|
||||
alt="Sebin Full Body Ref"
|
||||
class="nav-logo"
|
||||
src="@/assets/sebin-smug-icon.png"
|
||||
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">
|
||||
<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>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QuickFacts from "@components/QuickFacts.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";
|
||||
import Navigation from "@/components/Navigation.vue";
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
QuickFacts,
|
||||
DataTable,
|
||||
RefGallery,
|
||||
RefFigure,
|
||||
RefHeader,
|
||||
RefFooter,
|
||||
NsfwSwitch,
|
||||
NsfwWarning,
|
||||
},
|
||||
components: { Navigation },
|
||||
data() {
|
||||
return {
|
||||
nsfw: false,
|
||||
isWarn: false,
|
||||
isConfirmedHorny: false,
|
||||
version: require("../package.json").version,
|
||||
routes: [
|
||||
{ path: "/", name: "Home" },
|
||||
{ path: "/general", name: "General" },
|
||||
{ path: "/anatomy", name: "Anatomy" },
|
||||
{ path: "/clothing", name: "Clothing" },
|
||||
{ path: "/abilities", name: "Abilities" },
|
||||
{ path: "/overdrive", name: "Overdrive" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mixins: [Sebin, Helper],
|
||||
methods: {
|
||||
showWarning() {
|
||||
if (!this.isConfirmedHorny) {
|
||||
this.isWarn = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.nsfw = false;
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@scss/base.scss";
|
||||
@import "@/scss/base.scss";
|
||||
@import "~normalize.css";
|
||||
|
||||
#app {
|
||||
margin: 6em 0 2em 0;
|
||||
color: $copy-color;
|
||||
font-size: 1.125em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -721,127 +53,38 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
main {
|
||||
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 {
|
||||
header {
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
.col {
|
||||
&:first-child {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
z-index: 1;
|
||||
|
||||
max-width: 70em;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
|
||||
background-color: darken($bg-color-dark, 5%);
|
||||
|
||||
@media (min-width: 90em) {
|
||||
margin: 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-logo {
|
||||
display: block;
|
||||
margin: 0 0 0 0.25em;
|
||||
height: 2em;
|
||||
border: 0.125em solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
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>
|
||||
|
||||
<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>
|
||||
12
src/main.js
12
src/main.js
|
|
@ -1,11 +1,5 @@
|
|||
import Vue from "vue";
|
||||
import VueScrollTo from "vue-scrollto";
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(VueScrollTo, { offset: -55 });
|
||||
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
createApp(App).use(router).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 = {
|
||||
publicPath: "",
|
||||
css: {
|
||||
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) => {
|
||||
config.plugin("html").tap((args) => {
|
||||
const meta = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue