feat: make sections collapsable for better navigation
This commit is contained in:
Sebin Nyshkim
parent
816bca922d
commit
7981d94d0a
1 changed files with 287 additions and 245 deletions
224
src/App.vue
224
src/App.vue
|
|
@ -19,23 +19,37 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Quick info</h2>
|
<h2>Quick info</h2>
|
||||||
|
</summary>
|
||||||
<data-table :dataset="getSebinData.generic"></data-table>
|
<data-table :dataset="getSebinData.generic"></data-table>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Colors</h2>
|
<h2>Colors</h2>
|
||||||
|
</summary>
|
||||||
<data-table :dataset="getSebinData.colors"></data-table>
|
<data-table :dataset="getSebinData.colors"></data-table>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section v-if="nsfw">
|
<section v-if="nsfw">
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Penis</h2>
|
<h2>Penis</h2>
|
||||||
|
</summary>
|
||||||
<data-table :dataset="getSebinData.penis"></data-table>
|
<data-table :dataset="getSebinData.penis"></data-table>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="prose">
|
<section class="prose">
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Anatomy</h2>
|
<h2>Anatomy</h2>
|
||||||
|
</summary>
|
||||||
<rich-figure
|
<rich-figure
|
||||||
imgSrc="/img/fullbody-ref.jpg"
|
imgSrc="/img/fullbody-ref.jpg"
|
||||||
caption="Sebin Full Body reference"
|
caption="Sebin Full Body reference"
|
||||||
|
|
@ -43,12 +57,12 @@
|
||||||
></rich-figure>
|
></rich-figure>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Sebin is a bipedal plantigrade. His body is mostly covered by red scales
|
Sebin is a bipedal plantigrade. His body is mostly covered by red
|
||||||
with yellow chest plates running from below his chin over his torso all
|
scales with yellow chest plates running from below his chin over his
|
||||||
the way down between his legs and underside of his tail. His physique is
|
torso all the way down between his legs and underside of his tail. His
|
||||||
athletic to muscular. His fingers and toes are equipped sharp black
|
physique is athletic to muscular. His fingers and toes are equipped
|
||||||
claws. Brown spikes run along his spine down to the tip of his tail. His
|
sharp black claws. Brown spikes run along his spine down to the tip of
|
||||||
tail is about one meter in length.
|
his tail. His tail is about one meter in length.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<rich-figure
|
<rich-figure
|
||||||
|
|
@ -59,11 +73,12 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
His wing span is around 3-4 meters. He has them closed when on the
|
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
|
ground. His wings function like a second pair of arms, at which ends
|
||||||
hand-like limbs with a black talon on top and finger-like extensions, in
|
are hand-like limbs with a black talon on top and finger-like
|
||||||
between which are the membranes of his wings. He can use his wings to
|
extensions, in between which are the membranes of his wings. He can
|
||||||
fly short distances. Longer distances become difficult due to fatigue of
|
use his wings to fly short distances. Longer distances become
|
||||||
having to carry his own weight with his wings alone.
|
difficult due to fatigue of having to carry his own weight with his
|
||||||
|
wings alone.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<rich-figure
|
<rich-figure
|
||||||
|
|
@ -73,15 +88,15 @@
|
||||||
></rich-figure>
|
></rich-figure>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
He has round pupils instead of the slit ones typical for reptilians. He
|
He has round pupils instead of the slit ones typical for reptilians.
|
||||||
has short yellow spikes above his eyes that resemble eyebrows, as well
|
He has short yellow spikes above his eyes that resemble eyebrows, as
|
||||||
as spikes along the jawline of his cheeks. He has black horns growing
|
well as spikes along the jawline of his cheeks. He has black horns
|
||||||
out of his head which are mostly straight but slightly curve downwards.
|
growing out of his head which are mostly straight but slightly curve
|
||||||
His hair is blue and he wears it in varying styles. He has long pointy
|
downwards. His hair is blue and he wears it in varying styles. He has
|
||||||
ears which he can move to determine the origin of sounds around him. He
|
long pointy ears which he can move to determine the origin of sounds
|
||||||
also uses them to express emotion. His teeth are very sharp. In his
|
around him. He also uses them to express emotion. His teeth are very
|
||||||
throat are glands that produce a mixture that allows him to breathe
|
sharp. In his throat are glands that produce a mixture that allows him
|
||||||
fire. His tongue has a pointy tip.
|
to breathe fire. His tongue has a pointy tip.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<rich-figure
|
<rich-figure
|
||||||
|
|
@ -94,23 +109,28 @@
|
||||||
<p v-if="nsfw">
|
<p v-if="nsfw">
|
||||||
Despite his majorly reptilian appearance he has nipples, a feature of
|
Despite his majorly reptilian appearance he has nipples, a feature of
|
||||||
the human side of his family, which also shows with his external
|
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
|
testicles. Rather than a slit which houses his penis he has a
|
||||||
sheath, with the tip slightly peeking out of it when not aroused. His
|
pouch-like sheath, with the tip slightly peeking out of it when not
|
||||||
penis is mainly humanoid in shape but is surrounded by several ridges.
|
aroused. His penis is mainly humanoid in shape but is surrounded by
|
||||||
He can take it out of its pouch while it's still soft (e.g. for passing
|
several ridges. He can take it out of its pouch while it's still soft
|
||||||
water). When aroused his charcoal black shaft pushes out from the
|
(e.g. for passing water). When aroused his charcoal black shaft pushes
|
||||||
sheath, its base girded by the sheath like a ring.
|
out from the sheath, its base girded by the sheath like a ring.
|
||||||
</p>
|
</p>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="prose">
|
<section class="prose">
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Muscle Reference</h2>
|
<h2>Muscle Reference</h2>
|
||||||
|
</summary>
|
||||||
<p>
|
<p>
|
||||||
Sebin started working out at the age of 17. Being in top shape is very
|
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
|
important to him. His favorite workouts are weight-lifting (dumbbells
|
||||||
well as barbells), lat pulldown, leg press, straight arm pulldown and
|
as well as barbells), lat pulldown, leg press, straight arm pulldown
|
||||||
cable pull. He works out three times a week with one day in between
|
and cable pull. He works out three times a week with one day in
|
||||||
workout days for rest, switching body regions each workout day.
|
between workout days for rest, switching body regions each workout
|
||||||
|
day.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<rich-figure
|
<rich-figure
|
||||||
|
|
@ -120,44 +140,48 @@
|
||||||
></rich-figure>
|
></rich-figure>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Sebin is very focused on evenly distributed muscle mass but pays special
|
Sebin is very focused on evenly distributed muscle mass but pays
|
||||||
attention to his back, chest and arms. This is so his fire breath
|
special attention to his back, chest and arms. This is so his fire
|
||||||
doesn't get weak and he can throw fire projectiles farther. A strong
|
breath doesn't get weak and he can throw fire projectiles farther. A
|
||||||
back ensures his wings continue to carry him so he can stay airbourne
|
strong back ensures his wings continue to carry him so he can stay
|
||||||
for extended periods of time.
|
airbourne for extended periods of time.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Additional References</h3>
|
<h3>Additional References</h3>
|
||||||
<gallery :images="muscleRefs"></gallery>
|
<gallery :images="muscleRefs"></gallery>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="prose">
|
<section class="prose">
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Personality</h2>
|
<h2>Personality</h2>
|
||||||
|
</summary>
|
||||||
<p>
|
<p>
|
||||||
Sebin is a warmhearted guy who cares a lot about his loved ones. He has
|
Sebin is a warmhearted guy who cares a lot about his loved ones. He
|
||||||
a keen sense for bad vibes and is always willing to do something about
|
has a keen sense for bad vibes and is always willing to do something
|
||||||
it, either by listening to the problems of others or with well-meant
|
about it, either by listening to the problems of others or with
|
||||||
advice. Not being able to help a friend in need is the same for him as
|
well-meant advice. Not being able to help a friend in need is the same
|
||||||
abandoning them.
|
for him as abandoning them.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
He is open and honest with his feelings and does not mince his words.
|
He is open and honest with his feelings and does not mince his words.
|
||||||
However, some people may find this brazen or tactless.
|
However, some people may find this brazen or tactless.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Sebin likes to laugh and is therefore easy to amuse, often up to a point
|
Sebin likes to laugh and is therefore easy to amuse, often up to a
|
||||||
where he becomes utterly childish and immature. He also doesn't take
|
point where he becomes utterly childish and immature. He also doesn't
|
||||||
himself too seriously and can laugh at himself -- even if only after a
|
take himself too seriously and can laugh at himself -- even if only
|
||||||
while. His vocabulary is rather vulgar and he rarely shies away from
|
after a while. His vocabulary is rather vulgar and he rarely shies
|
||||||
cursing. But he knows when a more diplomatic choice of words is
|
away from cursing. But he knows when a more diplomatic choice of words
|
||||||
appropriate.
|
is appropriate.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
However, if he feels that his points of view are right, his ambition may
|
However, if he feels that his points of view are right, his ambition
|
||||||
well run away with him. If he gets the feeling during ongoing
|
may well run away with him. If he gets the feeling during ongoing
|
||||||
discussions that the other side is not paying any attention to his point
|
discussions that the other side is not paying any attention to his
|
||||||
of view, he can go from persistent to stubborn to hot-headed and even
|
point of view, he can go from persistent to stubborn to hot-headed and
|
||||||
become downright rude.
|
even become downright rude.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Sebin is very enthusiastic about his hobbies. If he notices even the
|
Sebin is very enthusiastic about his hobbies. If he notices even the
|
||||||
|
|
@ -171,13 +195,17 @@
|
||||||
tenderness. However, that doesn't mean that he doesn't let others have
|
tenderness. However, that doesn't mean that he doesn't let others have
|
||||||
their fun with him too from time to time. It always depends on his
|
their fun with him too from time to time. It always depends on his
|
||||||
playmates. He loves to wear bottomless jockstraps and boxer briefs to
|
playmates. He loves to wear bottomless jockstraps and boxer briefs to
|
||||||
direct the attention of the viewer exactly where he wants it. After all
|
direct the attention of the viewer exactly where he wants it. After
|
||||||
he is well endowed enough to peddle it around.
|
all he is well endowed enough to peddle it around.
|
||||||
</p>
|
</p>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Clothing Styles</h2>
|
<h2>Clothing Styles</h2>
|
||||||
|
</summary>
|
||||||
<template v-for="(style, index) in clothingStyles">
|
<template v-for="(style, index) in clothingStyles">
|
||||||
<h3 :key="style.name">{{ style.name }}</h3>
|
<h3 :key="style.name">{{ style.name }}</h3>
|
||||||
|
|
||||||
|
|
@ -189,13 +217,17 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="prose">
|
<section class="prose">
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
<h2>Abilities</h2>
|
<h2>Abilities</h2>
|
||||||
|
</summary>
|
||||||
<p>
|
<p>
|
||||||
Since Sebin is a fire dragon there’s a myriad of abilities he has at his
|
Since Sebin is a fire dragon there’s a myriad of abilities he has at
|
||||||
disposal to defend himself.
|
his disposal to defend himself.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Overdrive Form</h3>
|
<h3>Overdrive Form</h3>
|
||||||
|
|
@ -212,24 +244,25 @@
|
||||||
<a href="https://www.furaffinity.net/view/31065788/"
|
<a href="https://www.furaffinity.net/view/31065788/"
|
||||||
>3/4 carbon black and are crossed by several glowing veins which
|
>3/4 carbon black and are crossed by several glowing veins which
|
||||||
pulsate like flowing lava</a
|
pulsate like flowing lava</a
|
||||||
>. Fire in this form burns several degrees hotter than usual because his
|
>. Fire in this form burns several degrees hotter than usual because
|
||||||
body becomes a living blast furnace, which is why his limbs have to be
|
his body becomes a living blast furnace, which is why his limbs have
|
||||||
of more fire-proof material to withstand the increased heat.
|
to be of more fire-proof material to withstand the increased heat.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To complete the transformation he inhales the flames from the pillar
|
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
|
surrounding him which heats up his body from within. Even if Sebin is
|
||||||
fire dragon who can sustain high degrees of heat he is essentially
|
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
|
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
|
this form for more than a few hours before he does permanent damage to
|
||||||
his own body.
|
his own body.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Direct body contact with Sebin during overdrive causes 3rd degree burns
|
Direct body contact with Sebin during overdrive causes 3rd degree
|
||||||
as he emits an extreme temperature, although less than he keeps inside
|
burns as he emits an extreme temperature, although less than he keeps
|
||||||
his body. His immediate surroundings are likely to burn or melt.
|
inside his body. His immediate surroundings are likely to burn or
|
||||||
|
melt.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Attacks</h2>
|
<h2>Attacks</h2>
|
||||||
|
|
@ -241,50 +274,53 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
|
<strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
|
||||||
throw them at his opponents. His scales are fireproof and can withstand
|
throw them at his opponents. His scales are fireproof and can
|
||||||
the high temperatures. On impact these fireballs explode into a bigger
|
withstand the high temperatures. On impact these fireballs explode
|
||||||
fire bursts with a diameter of 1-2 meters. He can also combine two
|
into a bigger fire bursts with a diameter of 1-2 meters. He can also
|
||||||
fireballs into a bigger one for bigger impact.
|
combine two fireballs into a bigger one for bigger impact.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can also
|
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
|
||||||
greatly increase the speed of the projectiles by a strong punch or kick.
|
also greatly increase the speed of the projectiles by a strong punch
|
||||||
|
or kick.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin can
|
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin
|
||||||
use his fire breath to engulf his body in flames while spinning to
|
can use his fire breath to engulf his body in flames while spinning to
|
||||||
become a fire tornado that singes opponents.
|
become a fire tornado that singes opponents.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Attacks in Overdrive Form</h3>
|
<h3>Attacks in Overdrive Form</h3>
|
||||||
<p>
|
<p>
|
||||||
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath increases
|
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
|
||||||
as well as the frequency at which he can fire shots from his mouth.
|
increases as well as the frequency at which he can fire shots from his
|
||||||
|
mouth.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Flame Toss:</strong> Overdrive Form eliminates the need for
|
<strong>Flame Toss:</strong> Overdrive Form eliminates the need for
|
||||||
Sebin to spit fire into his palms. It instead enables him to fire the
|
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
|
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
|
his arms act as an orifice to do so. The explosion radius of the
|
||||||
projectiles that explode on impact is greatly increased.
|
burning projectiles that explode on impact is greatly increased.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Searing Discus:</strong> Overdrive allows Sebin to form rings of
|
<strong>Searing Discus:</strong> Overdrive allows Sebin to form rings
|
||||||
fire by igniting flames from his fingertips and swirling them in a
|
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.
|
circle motion. He can use them for both close quarters or ranged
|
||||||
|
combat.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Combustion Flare:</strong> A devastating firestorm by combining
|
<strong>Combustion Flare:</strong> A devastating firestorm by
|
||||||
the power of both hands from his fire-infused arms. The impact of the
|
combining the power of both hands from his fire-infused arms. The
|
||||||
two carbon-like palms against each other is like the clash of two
|
impact of the two carbon-like palms against each other is like the
|
||||||
flints, used to ignite the attack. A secure foothold is needed to
|
clash of two flints, used to ignite the attack. A secure foothold is
|
||||||
prevent Sebin from being thrown back by the recoil of the attack. Using
|
needed to prevent Sebin from being thrown back by the recoil of the
|
||||||
this technique in the air is therefore highly risky.
|
attack. Using this technique in the air is therefore highly risky.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -304,14 +340,15 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Circling Fire Shield:</strong> A rather defensive technique. By
|
<strong>Circling Fire Shield:</strong> A rather defensive technique.
|
||||||
spinning around with stretched out arms Sebin creates fire balls, which
|
By spinning around with stretched out arms Sebin creates fire balls,
|
||||||
he usually hurls towards enemies, that circle around his body
|
which he usually hurls towards enemies, that circle around his body
|
||||||
diagonally. They act as a shield while he can still move his arms
|
diagonally. They act as a shield while he can still move his arms
|
||||||
relatively freely. Enemies would be well advised to keep their distance
|
relatively freely. Enemies would be well advised to keep their
|
||||||
to this spinning shield, as the fire balls will still explode on
|
distance to this spinning shield, as the fire balls will still explode
|
||||||
contact.
|
on contact.
|
||||||
</p>
|
</p>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -558,6 +595,11 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary h2 {
|
||||||
|
display: inline;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue