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

feat: ✨ add quick info component

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-10 02:31:09 +02:00
parent 36392c675b
commit a4416c1811
4 changed files with 90 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/quick-info.webc Normal file
View file

@ -0,0 +1,44 @@
<div class="quick-info">
<h3 class="title">Key Facts</h3>
<slot></slot>
</div>
<style>
.quick-info {
position: relative;
background: linear-gradient(
to bottom right,
oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
oklch(from var(--clr-box-background) l c h) 50%
);
box-shadow: 0em 1em 1.875em var(--clr-box-shadow);
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
margin-block: 1em;
border-radius: 1em;
padding: 1em;
z-index: 1;
&::before {
content: '';
position: absolute;
inset: var(--border-thin);
background: linear-gradient(
to bottom right,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
border-radius: inherit;
z-index: -1;
}
& .title {
margin-block: 0 1em;
}
& > :last-child {
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
}
</style>

6
src/css/colors.css
View file

@ -23,6 +23,9 @@
--clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
--clr-quick-info-bg-start: oklch(from var(--theme-c-raisin-black) calc(l * 3.35) c h);
--clr-quick-info-bg-end: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
@media (prefers-color-scheme: dark) {
--clr-page-background: var(--theme-c-night);
--clr-text: var(--theme-c-text-dark);
@ -34,6 +37,9 @@
--clr-box-shadow: var(--theme-c-night);
--clr-color-box-background: var(--theme-c-gunmetal);
--clr-quick-info-bg-start: var(--theme-c-raisin-black);
--clr-quick-info-bg-end: var(--theme-c-eerie-black);
}
}

39
src/sebin/anatomy.md
View file

@ -85,6 +85,10 @@ gallery: [
<colors :colors="getColors()" webc:nokeep></colors>
<quick-info webc:nokeep>
<traits :traits="getTraits('general')" webc:nokeep></traits>
</quick-info>
Sebin is the offspring of a human and a dragon. Like a human, he is a bipedal plantigrade. Most of his body is covered with red scales. Yellow scales run from the underside of his jaw over his chest and legs to the underside of the tip of his tail. These scales are particularly hard and function like plate armor to better protect vital organs.
Sebin's finger and toe tips are equipped with sharp black claws. He equally uses them as tools and weapons.
@ -106,6 +110,10 @@ Sebin has a muscular build that he keeps in shape with regular exercise.
webc:nokeep
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('wings')" webc:nokeep></traits>
</quick-info>
Sebin's wings have a span of about 4.17 meters (13'8"). They function very much like a second pair of arms: two interconnected limbs that form a bendable arm, at the end of which sits a hand-like structure, adorned with a talon in exchange for a thumb, with a sturdy membrane stretched between its long fingers. On solid ground, he keeps his wings closed so as not to accidentally bump into anything with them. Sebin also pays a lot of attention to his wings when working out, so that they can keep carrying him reliably through the air. Though, he only travels short to medium distances through the air before he has to take a rest - as long as the airspace in the area has been declared open for wing bearers.
## Head
@ -121,12 +129,14 @@ Sebin's wings have a span of about 4.17 meters (13'8"). They function very much
webc:nokeep
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('head')" webc:nokeep></traits>
</quick-info>
Despite what one might expect with reptilians, Sebin's pupils are rounded instead of slit-shaped. Yellow spikes running above his eyelids serve as eyebrows. These spikes are also found along his jaw bone. Two pointed, slightly curved, black horns protrude from his head. He usually wears his medium-length, blue hair loose. His long, pointed ears are very flexible, allowing him to hear sounds around him without having to turn his head. They are also used for non-verbal communication, to express emotions through body language. His hearing perceives a wider range of frequencies, making it superior to that of a human. His jaws are equipped with razor-sharp teeth that effortlessly sink into anything he manages to bite, be it nourishment or adversaries. Embedded between them lies his tongue, which is typically pointed for reptilians. Glands in his throat produce a mixture which he uses to spit fire, which can reach up to around 100 °C (212 °F).
## Upper body
At the age of 17, Sebin gradually began to keep his body in shape on a regular basis. His favorite exercises include weightlifting (with both dumbbells and barbells), lat pulldown, leg press and cable curls. He works out three days a week with one day off between training days, rotating the body regions he trains each day.
<ref-img
:char="firstName.toLowerCase()"
:src="refs.sebinUpperBody.src"
@ -138,6 +148,12 @@ At the age of 17, Sebin gradually began to keep his body in shape on a regular b
webc:nokeep
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('muscle')" webc:nokeep></traits>
</quick-info>
At the age of 17, Sebin gradually began to keep his body in shape on a regular basis. His favorite exercises include weightlifting (with both dumbbells and barbells), lat pulldown, leg press and cable curls. He works out three days a week with one day off between training days, rotating the body regions he trains each day.
Sebin is very concerned with an even distribution of muscle mass, but pays particular attention to his back, chest and arms. A strong chest with strong arms helps to throw fire projectiles as far as possible. A strong back guarantees a longer stay in the air.
## Additional Muscle References
@ -156,3 +172,22 @@ An assortment of additional references how Sebin can be drawn.
webc:nokeep
></ref-img>
</ref-gallery>
## Penis
<ref-img
:char="firstName.toLowerCase()"
src="ref-penis.png"
alt="Sebin's manly parts"
artist="draftgon"
href="https://bsky.app/profile/draftgon.bsky.social"
:width="[500, 1000]"
:dropshadow="true"
webc:nokeep
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
</quick-info>
Despite his reptilian appearance, Sebin has nipples, a feature of the human side of his family. Furthermore, his external testicles represent another humanized feature. Where relatives of his ilk possess a slit in which the penis lies protectively, Sebin possesses a pouch-like sheath from which the tip of the penis protrudes slightly. The shape of his shaft is predominantly humanoid, but it is surrounded by ridges and has no equivalent of a foreskin. When aroused, the coal-black shaft swells and pushes out of the sheath until fully erect, the sheath wrapping around the root of the shaft like a ring. However, he can also push it out in a flaccid state, e.g. when needing to pass water.

4
src/viktor/index.md
View file

@ -14,7 +14,9 @@ Viktor prefers to keep it simple. He's not particularly fond of the dependence o
## Sexuality
<traits :traits="getSexTraits()" webc:nokeep></traits>
<quick-info webc:nokeep>
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
</quick-info>
As a teenager, Viktor noticed that he felt a bit differently about the boys in his class. Especially in gym class, his eyes tended to linger longer on his classmates as they rough-housed in the locker room, as pubescent boys do. However, he could never quite come to terms with the idea that he might be a little different from his friends, who were all beginning to take an interest in girls, unlike him, who was more interested in his buddies.