SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: make sections collapsable for better navigation

Browse source
This commit is contained in:
Sebin Nyshkim 2020-04-24 12:38:25 +02:00
parent 816bca922d
commit 7981d94d0a
1 changed files with 287 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

532
src/App.vue
View file

@ -19,299 +19,336 @@
</header> </header>
<section> <section>
<h2>Quick info</h2> <details>
<data-table :dataset="getSebinData.generic"></data-table> <summary>
<h2>Quick info</h2>
</summary>
<data-table :dataset="getSebinData.generic"></data-table>
</details>
</section> </section>
<section> <section>
<h2>Colors</h2> <details>
<data-table :dataset="getSebinData.colors"></data-table> <summary>
<h2>Colors</h2>
</summary>
<data-table :dataset="getSebinData.colors"></data-table>
</details>
</section> </section>
<section v-if="nsfw"> <section v-if="nsfw">
<h2>Penis</h2> <details>
<data-table :dataset="getSebinData.penis"></data-table> <summary>
<h2>Penis</h2>
</summary>
<data-table :dataset="getSebinData.penis"></data-table>
</details>
</section> </section>
<section class="prose"> <section class="prose">
<h2>Anatomy</h2> <details>
<summary>
<h2>Anatomy</h2>
</summary>
<rich-figure
imgSrc="/img/fullbody-ref.jpg"
caption="Sebin Full Body reference"
copyright="FA:SirBoburto"
></rich-figure>
<rich-figure <p>
imgSrc="/img/fullbody-ref.jpg" Sebin is a bipedal plantigrade. His body is mostly covered by red
caption="Sebin Full Body reference" scales with yellow chest plates running from below his chin over his
copyright="FA:SirBoburto" torso all the way down between his legs and underside of his tail. His
></rich-figure> 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>
<p> <rich-figure
Sebin is a bipedal plantigrade. His body is mostly covered by red scales imgSrc="/img/head-ref.jpg"
with yellow chest plates running from below his chin over his torso all caption="Sebin's Expressions"
the way down between his legs and underside of his tail. His physique is copyright="FA:SirBoburto"
athletic to muscular. His fingers and toes are equipped sharp black ></rich-figure>
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 <p>
imgSrc="/img/head-ref.jpg" His wing span is around 3-4 meters. He has them closed when on the
caption="Sebin's Expressions" ground. His wings function like a second pair of arms, at which ends
copyright="FA:SirBoburto" are hand-like limbs with a black talon on top and finger-like
></rich-figure> 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>
<p> <rich-figure
His wing span is around 3-4 meters. He has them closed when on the imgSrc="/img/sebin-hairstyle-short.jpg"
ground. His wings function like a second pair of arms, at which ends are caption="Sebin with short hair"
hand-like limbs with a black talon on top and finger-like extensions, in copyright="@LeoboArt"
between which are the membranes of his wings. He can use his wings to ></rich-figure>
fly short distances. Longer distances become difficult due to fatigue of
having to carry his own weight with his wings alone.
</p>
<rich-figure <p>
imgSrc="/img/sebin-hairstyle-short.jpg" He has round pupils instead of the slit ones typical for reptilians.
caption="Sebin with short hair" He has short yellow spikes above his eyes that resemble eyebrows, as
copyright="@LeoboArt" well as spikes along the jawline of his cheeks. He has black horns
></rich-figure> 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>
<p> <rich-figure
He has round pupils instead of the slit ones typical for reptilians. He v-if="nsfw"
has short yellow spikes above his eyes that resemble eyebrows, as well imgSrc="/img/penis-ref.jpg"
as spikes along the jawline of his cheeks. He has black horns growing caption="Sebin's manly parts"
out of his head which are mostly straight but slightly curve downwards. copyright="@Zodim87"
His hair is blue and he wears it in varying styles. He has long pointy ></rich-figure>
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 <p v-if="nsfw">
v-if="nsfw" Despite his majorly reptilian appearance he has nipples, a feature of
imgSrc="/img/penis-ref.jpg" the human side of his family, which also shows with his external
caption="Sebin's manly parts" testicles. Rather than a slit which houses his penis he has a
copyright="@Zodim87" pouch-like sheath, with the tip slightly peeking out of it when not
></rich-figure> 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
<p v-if="nsfw"> (e.g. for passing water). When aroused his charcoal black shaft pushes
Despite his majorly reptilian appearance he has nipples, a feature of out from the sheath, its base girded by the sheath like a ring.
the human side of his family, which also shows with his external </p>
testicles. Rather than a slit which houses his penis he has a pouch-like </details>
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>
</section> </section>
<section class="prose"> <section class="prose">
<h2>Muscle Reference</h2> <details>
<p> <summary>
Sebin started working out at the age of 17. Being in top shape is very <h2>Muscle Reference</h2>
important to him. His favorite workouts are weight-lifting (dumbbells as </summary>
well as barbells), lat pulldown, leg press, straight arm pulldown and <p>
cable pull. He works out three times a week with one day in between Sebin started working out at the age of 17. Being in top shape is very
workout days for rest, switching body regions each workout day. important to him. His favorite workouts are weight-lifting (dumbbells
</p> 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 <rich-figure
imgSrc="/img/upper-body-ref.png" imgSrc="/img/upper-body-ref.png"
caption="Sebin's upper body closeup" caption="Sebin's upper body closeup"
copyright="@NidtheDragon" copyright="@NidtheDragon"
></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">
<h2>Personality</h2> <details>
<p> <summary>
Sebin is a warmhearted guy who cares a lot about his loved ones. He has <h2>Personality</h2>
a keen sense for bad vibes and is always willing to do something about </summary>
it, either by listening to the problems of others or with well-meant <p>
advice. Not being able to help a friend in need is the same for him as Sebin is a warmhearted guy who cares a lot about his loved ones. He
abandoning them. has a keen sense for bad vibes and is always willing to do something
</p> about it, either by listening to the problems of others or with
<p> well-meant advice. Not being able to help a friend in need is the same
He is open and honest with his feelings and does not mince his words. for him as abandoning them.
However, some people may find this brazen or tactless. </p>
</p> <p>
<p> He is open and honest with his feelings and does not mince his words.
Sebin likes to laugh and is therefore easy to amuse, often up to a point However, some people may find this brazen or tactless.
where he becomes utterly childish and immature. He also doesn't take </p>
himself too seriously and can laugh at himself -- even if only after a <p>
while. His vocabulary is rather vulgar and he rarely shies away from Sebin likes to laugh and is therefore easy to amuse, often up to a
cursing. But he knows when a more diplomatic choice of words is point where he becomes utterly childish and immature. He also doesn't
appropriate. take himself too seriously and can laugh at himself -- even if only
</p> after a while. His vocabulary is rather vulgar and he rarely shies
<p> away from cursing. But he knows when a more diplomatic choice of words
However, if he feels that his points of view are right, his ambition may is appropriate.
well run away with him. If he gets the feeling during ongoing </p>
discussions that the other side is not paying any attention to his point <p>
of view, he can go from persistent to stubborn to hot-headed and even However, if he feels that his points of view are right, his ambition
become downright rude. may well run away with him. If he gets the feeling during ongoing
</p> discussions that the other side is not paying any attention to his
<p> point of view, he can go from persistent to stubborn to hot-headed and
Sebin is very enthusiastic about his hobbies. If he notices even the even become downright rude.
slightest overlap of interests, he may chew your ear off. Sometimes he </p>
is also very impatient. <p>
</p> Sebin is very enthusiastic about his hobbies. If he notices even the
<p> slightest overlap of interests, he may chew your ear off. Sometimes he
But above all Sebin is a very naughty hornball. He knows what he’s got is also very impatient.
and enjoys the reactions when he shows it off. He is a generally </p>
dominant lover who likes to have it rough. But he is not lacking in <p>
tenderness. However, that doesn't mean that he doesn't let others have But above all Sebin is a very naughty hornball. He knows what he’s got
their fun with him too from time to time. It always depends on his and enjoys the reactions when he shows it off. He is a generally
playmates. He loves to wear bottomless jockstraps and boxer briefs to dominant lover who likes to have it rough. But he is not lacking in
direct the attention of the viewer exactly where he wants it. After all tenderness. However, that doesn't mean that he doesn't let others have
he is well endowed enough to peddle it around. their fun with him too from time to time. It always depends on his
</p> 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.
</p>
</details>
</section> </section>
<section> <section>
<h2>Clothing Styles</h2> <details>
<template v-for="(style, index) in clothingStyles"> <summary>
<h3 :key="style.name">{{ style.name }}</h3> <h2>Clothing Styles</h2>
</summary>
<template v-for="(style, index) in clothingStyles">
<h3 :key="style.name">{{ style.name }}</h3>
<gallery :key="style.name + index" :images="clothes[index]"></gallery> <gallery :key="style.name + index" :images="clothes[index]"></gallery>
<ul :key="index"> <ul :key="index">
<li v-for="(part, index) in style.clothes" :key="index"> <li v-for="(part, index) in style.clothes" :key="index">
{{ part }} {{ part }}
</li> </li>
</ul> </ul>
</template> </template>
</details>
</section> </section>
<section class="prose"> <section class="prose">
<h2>Abilities</h2> <details>
<p> <summary>
Since Sebin is a fire dragon there’s a myriad of abilities he has at his <h2>Abilities</h2>
disposal to defend himself. </summary>
</p> <p>
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> <h3>Overdrive Form</h3>
<p> <p>
Sebin can enter an Overdrive Form which greatly increases his strength Sebin can enter an Overdrive Form which greatly increases his strength
and abilities but it comes at a cost. and abilities but it comes at a cost.
</p> </p>
<p> <p>
He enters Overdrive by engulfing himself in a pillar of flames which He enters Overdrive by engulfing himself in a pillar of flames which
transforms his exterior physique. During Overdrive transformation his transforms his exterior physique. During Overdrive transformation his
hair ignites and flickers with blue flames. The corners of his eyes hair ignites and flickers with blue flames. The corners of his eyes
flicker with with long green flames. His arms and legs become flicker with with long green flames. His arms and legs become
<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
</p> melt.
</p>
<h2>Attacks</h2> <h2>Attacks</h2>
<h3>Normal Form</h3> <h3>Normal Form</h3>
<p> <p>
<strong>Fire Breath:</strong> Either a long breath of fire or short <strong>Fire Breath:</strong> Either a long breath of fire or short
bursts fired directly from Sebin's mouth. bursts fired directly from Sebin's mouth.
</p> </p>
<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
</p> or kick.
</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
</p> mouth.
</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
</p> combat.
</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>
<strong>Blazing Pandemonium:</strong> A heavy impact into the ground <strong>Blazing Pandemonium:</strong> A heavy impact into the ground
from a great height with both fists, tearing deep cracks in the ground from a great height with both fists, tearing deep cracks in the ground
around the impact crater. Combined with <em>Burning Twister</em>, the around the impact crater. Combined with <em>Burning Twister</em>, the
flames that previously surrounded Sebin's body are forced through the flames that previously surrounded Sebin's body are forced through the
newly created furrows, transforming the scene into an inferno. newly created furrows, transforming the scene into an inferno.
</p> </p>
<p> <p>
<strong>Scorching Edge:</strong> A fiery blade towering several meters <strong>Scorching Edge:</strong> A fiery blade towering several meters
into the air that Sebin sends careening towards his enemies from his into the air that Sebin sends careening towards his enemies from his
fire-infused legs with a backflip kick, leaving a swath of destruction fire-infused legs with a backflip kick, leaving a swath of destruction
in its wake. Upon impact the force of the attack is distributed in its wake. Upon impact the force of the attack is distributed
sideways. sideways.
</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;