feat: make sections collapsable for better navigation
This commit is contained in:
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>
|
||||
|
||||
<section>
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Quick info</h2>
|
||||
</summary>
|
||||
<data-table :dataset="getSebinData.generic"></data-table>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Colors</h2>
|
||||
</summary>
|
||||
<data-table :dataset="getSebinData.colors"></data-table>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section v-if="nsfw">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Penis</h2>
|
||||
</summary>
|
||||
<data-table :dataset="getSebinData.penis"></data-table>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="prose">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Anatomy</h2>
|
||||
|
||||
</summary>
|
||||
<rich-figure
|
||||
imgSrc="/img/fullbody-ref.jpg"
|
||||
caption="Sebin Full Body reference"
|
||||
|
@ -43,12 +57,12 @@
|
|||
></rich-figure>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
||||
<rich-figure
|
||||
|
@ -59,11 +73,12 @@
|
|||
|
||||
<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.
|
||||
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>
|
||||
|
||||
<rich-figure
|
||||
|
@ -73,15 +88,15 @@
|
|||
></rich-figure>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
||||
<rich-figure
|
||||
|
@ -94,23 +109,28 @@
|
|||
<p v-if="nsfw">
|
||||
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.
|
||||
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>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="prose">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Muscle Reference</h2>
|
||||
</summary>
|
||||
<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.
|
||||
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>
|
||||
|
||||
<rich-figure
|
||||
|
@ -120,44 +140,48 @@
|
|||
></rich-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.
|
||||
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 References</h3>
|
||||
<gallery :images="muscleRefs"></gallery>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="prose">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Personality</h2>
|
||||
</summary>
|
||||
<p>
|
||||
Sebin is a warmhearted guy who cares a lot about his loved ones. He has
|
||||
a keen sense for bad vibes and is always willing to do something about
|
||||
it, either by listening to the problems of others or with well-meant
|
||||
advice. Not being able to help a friend in need is the same for him as
|
||||
abandoning them.
|
||||
Sebin is a warmhearted guy who cares a lot about his loved ones. He
|
||||
has a keen sense for bad vibes and is always willing to do something
|
||||
about it, either by listening to the problems of others or with
|
||||
well-meant advice. Not being able to help a friend in need is the same
|
||||
for him as abandoning them.
|
||||
</p>
|
||||
<p>
|
||||
He is open and honest with his feelings and does not mince his words.
|
||||
However, some people may find this brazen or tactless.
|
||||
</p>
|
||||
<p>
|
||||
Sebin likes to laugh and is therefore easy to amuse, often up to a point
|
||||
where he becomes utterly childish and immature. He also doesn't take
|
||||
himself too seriously and can laugh at himself -- even if only after a
|
||||
while. His vocabulary is rather vulgar and he rarely shies away from
|
||||
cursing. But he knows when a more diplomatic choice of words is
|
||||
appropriate.
|
||||
Sebin likes to laugh and is therefore easy to amuse, often up to a
|
||||
point where he becomes utterly childish and immature. He also doesn't
|
||||
take himself too seriously and can laugh at himself -- even if only
|
||||
after a while. His vocabulary is rather vulgar and he rarely shies
|
||||
away from cursing. But he knows when a more diplomatic choice of words
|
||||
is appropriate.
|
||||
</p>
|
||||
<p>
|
||||
However, if he feels that his points of view are right, his ambition 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
|
||||
of view, he can go from persistent to stubborn to hot-headed and even
|
||||
become downright rude.
|
||||
However, if he feels that his points of view are right, his ambition
|
||||
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 of view, he can go from persistent to stubborn to hot-headed and
|
||||
even become downright rude.
|
||||
</p>
|
||||
<p>
|
||||
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
|
||||
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
|
||||
direct the attention of the viewer exactly where he wants it. After all
|
||||
he is well endowed enough to peddle it around.
|
||||
direct the attention of the viewer exactly where he wants it. After
|
||||
all he is well endowed enough to peddle it around.
|
||||
</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Clothing Styles</h2>
|
||||
</summary>
|
||||
<template v-for="(style, index) in clothingStyles">
|
||||
<h3 :key="style.name">{{ style.name }}</h3>
|
||||
|
||||
|
@ -189,13 +217,17 @@
|
|||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="prose">
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Abilities</h2>
|
||||
</summary>
|
||||
<p>
|
||||
Since Sebin is a fire dragon there’s a myriad of abilities he has at his
|
||||
disposal to defend himself.
|
||||
Since Sebin is a fire dragon there’s a myriad of abilities he has at
|
||||
his disposal to defend himself.
|
||||
</p>
|
||||
|
||||
<h3>Overdrive Form</h3>
|
||||
|
@ -212,24 +244,25 @@
|
|||
<a href="https://www.furaffinity.net/view/31065788/"
|
||||
>3/4 carbon black and are crossed by several glowing veins which
|
||||
pulsate like flowing lava</a
|
||||
>. 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.
|
||||
>. 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
|
||||
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.
|
||||
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>
|
||||
|
||||
<h2>Attacks</h2>
|
||||
|
@ -241,50 +274,53 @@
|
|||
|
||||
<p>
|
||||
<strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
|
||||
throw them at his opponents. His scales are fireproof and can withstand
|
||||
the high temperatures. On impact these fireballs explode into a bigger
|
||||
fire bursts with a diameter of 1-2 meters. He can also combine two
|
||||
fireballs into a bigger one for bigger impact.
|
||||
throw them at his opponents. His scales are fireproof and can
|
||||
withstand the high temperatures. On impact these fireballs explode
|
||||
into a bigger fire bursts with a diameter of 1-2 meters. He can also
|
||||
combine two fireballs into a bigger one for bigger impact.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can also
|
||||
greatly increase the speed of the projectiles by a strong punch or kick.
|
||||
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
|
||||
also greatly increase the speed of the projectiles by a strong punch
|
||||
or kick.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin can
|
||||
use his fire breath to engulf his body in flames while spinning to
|
||||
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin
|
||||
can use his fire breath to engulf his body in flames while spinning to
|
||||
become a fire tornado that singes opponents.
|
||||
</p>
|
||||
|
||||
<h3>Attacks in Overdrive Form</h3>
|
||||
<p>
|
||||
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath increases
|
||||
as well as the frequency at which he can fire shots from his mouth.
|
||||
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
|
||||
increases as well as the frequency at which he can fire shots from his
|
||||
mouth.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Flame Toss:</strong> 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.
|
||||
his arms act as an orifice to do so. The explosion radius of the
|
||||
burning projectiles that explode on impact is greatly increased.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Searing Discus:</strong> 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.
|
||||
<strong>Searing Discus:</strong> 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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Combustion Flare:</strong> A devastating firestorm by combining
|
||||
the power of both hands from his fire-infused arms. The impact of the
|
||||
two carbon-like palms against each other is like the clash of two
|
||||
flints, used to ignite the attack. 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.
|
||||
<strong>Combustion Flare:</strong> A devastating firestorm by
|
||||
combining the power of both hands from his fire-infused arms. The
|
||||
impact of the two carbon-like palms against each other is like the
|
||||
clash of two flints, used to ignite the attack. 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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
@ -304,14 +340,15 @@
|
|||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Circling Fire Shield:</strong> 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
|
||||
<strong>Circling Fire Shield:</strong> 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.
|
||||
relatively freely. Enemies would be well advised to keep their
|
||||
distance to this spinning shield, as the fire balls will still explode
|
||||
on contact.
|
||||
</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
|
@ -558,6 +595,11 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
summary h2 {
|
||||
display: inline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue