Compare commits

...

10 commits

Author SHA1 Message Date
d75d8c79b5
feat: 🚧 add work in progress banner 2025-07-12 01:36:35 +02:00
17b30cc283
fix: 💄 only include progress grid row when slider has navigation 2025-07-12 01:16:32 +02:00
5d2ad3b0e5
fix: 💄 remove block margins from slider items 2025-07-12 01:12:53 +02:00
b29c9354d5
fix: 💄 missing block margin on ref image component 2025-07-12 01:09:00 +02:00
a72c55ab15
feat: 🍱 add jarek's ref sheet 2025-07-12 01:04:15 +02:00
f2ad437dbc
feat: 💬 add jarek's backstory 2025-07-12 01:02:55 +02:00
3d812fdacc
feat: 💄 change to radial gradient, keep the same across all viewport sizes 2025-07-11 21:09:43 +02:00
6db344f524
fix: accessibility improvements 2025-07-11 21:08:07 +02:00
3aa5634a73
feat: 💄 change navigation to floating bar
Since clipping overflow on the main page content container would break its gradient box shadow, navigation needed a different approach to styling
2025-07-11 17:49:19 +02:00
9f6ddc0e54
feat: 💄 add gradient box shadow to main elements 2025-07-11 17:47:05 +02:00
14 changed files with 102 additions and 13 deletions

View file

@ -69,6 +69,7 @@
align-self: start;
font-size: 0.625em;
font-weight: bold;
line-height: 1.2;
text-align: start;
color: var(--clr-heading-data);

View file

@ -84,6 +84,7 @@
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
--clr-gradient-box-shadow: var(--clr-accent-1);
}
.viktor {
@ -106,6 +107,7 @@
--clr-link-underline: var(--clr-accent-8);
--clr-timeline-stroke: var(--clr-accent-8);
--clr-gallery-indicator: var(--clr-accent-8);
--clr-gradient-box-shadow: var(--clr-accent-8);
@media (prefers-color-scheme: light) {
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
@ -129,5 +131,7 @@
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
--clr-gradient-box-shadow: var(--clr-accent-1);
}
</style>

View file

@ -1,4 +1,4 @@
<svg webc:root="override">
<svg aria-hidden="true" webc:root="override">
<use :href="`#${icon}`"></use>
</svg>

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 216 B

Before After
Before After

View file

@ -28,13 +28,16 @@
--nav-border: var(--border-thin) solid var(--clr-box-border);
position: sticky;
top: 0;
inset: 0.5em;
display: grid;
justify-items: end;
background-color: var(--nav-background-color);
margin-block: 0.5em 0;
margin-inline: 0.5em;
border-radius: inherit;
border-block-end: var(--nav-border);
z-index: 2;
@ -46,7 +49,7 @@
}
@media (min-width: 64em) {
--nav-spacing: 2em;
--nav-spacing: 1.5em;
}
}
@ -82,7 +85,7 @@
--nav-items-orientation: column nowrap;
position: var(--nav-items-position);
top: 3em;
top: 3.5em;
display: flex;
flex-flow: var(--nav-items-orientation);
@ -93,10 +96,9 @@
background-color: var(--clr-nav-background);
margin: 0;
border: var(--border-thin) solid var(--clr-nav-border);
border-block-start: none;
border-inline-end: none;
border-end-start-radius: 0.75em;
border-radius: inherit;
padding-inline: var(--nav-spacing);
z-index: 3;

View file

@ -17,7 +17,24 @@
border: var(--border-thin) solid var(--clr-box-border);
border-radius: var(--border-radius);
overflow: clip;
transform: translate(0);
transform-style: preserve-3d;
}
:host::before {
content: '';
position: absolute;
inset: 0.5em -0.5em -0.5em 0.5em;
background: radial-gradient(
ellipse at top left,
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%,
oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
);
border-radius: inherit;
transform: translate3d(0, 0, -1px);
}
:host > :not(.character-nav, .slider) {

View file

@ -40,6 +40,9 @@
padding-block: var(--sidebar-padding);
padding-inline: var(--sidebar-padding);
transform: translate(0);
transform-style: preserve-3d;
@media (min-width: 64em) {
--sidebar-position: sticky;
--sidebar-padding: 1.5rem;
@ -50,6 +53,22 @@
}
}
:host::before {
content: '';
position: absolute;
inset: -0.5em 0.5em 0.5em -0.5em;
background: radial-gradient(
ellipse at bottom right,
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) 60%,
oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
);
border-radius: inherit;
transform: translate3d(0, 0, -1px);
}
:host .avatar {
grid-area: avatar;
justify-self: center;

View file

@ -32,7 +32,7 @@
place-content: center;
row-gap: 1rem;
margin-block: 0;
margin-block: 2em;
margin-inline: auto;
.nsfw &:has(.image.nsfw) {

View file

@ -113,14 +113,18 @@
:host {
display: grid;
grid-auto-columns: auto 1fr auto;
grid-template-areas:
'prev track next'
'. progress .';
grid-template-areas: 'prev track next';
align-items: center;
gap: 1em;
margin-block: var(--inbox-spacing);
}
:host:has(.slider-nav) {
grid-template-areas:
'prev track next'
'. progress .';
}
:host :where(.prev, .next, .indicator-btn) {
--gradient-dir: to bottom right;
--gradient-start: var(--clr-box-gradient-start);
@ -217,6 +221,7 @@
:host .track > * {
scroll-snap-align: center;
padding-inline: var(--inbox-spacing);
margin-block: 0;
}
:host .track::-webkit-scrollbar {

View file

@ -65,6 +65,7 @@
:host .type {
font-size: 0.625em;
font-weight: bold;
color: var(--clr-heading-data);
text-align: left;
text-transform: uppercase;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/img/jarek/ref-full.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View file

@ -25,6 +25,11 @@
<p @text="getDescription(char)"></p>
</card>
</div>
<section class="beta-note">
<p class="head">🏗️ Work in progress! 🚧</p>
<p>Please note that this site is still being worked on and contents are subject to change.</p>
</section>
</main>
<style>
@ -53,4 +58,20 @@
grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
gap: 1.5em;
}
.beta-note {
max-width: 60ch;
margin: auto;
margin-block: 2em;
border: 0.125em solid white;
border-radius: 0.75em;
padding-inline: 1em;
}
.beta-note .head {
font-family: var(--font-family-headings);
font-size: 1.5em;
font-weight: bold;
}
</style>

View file

@ -4,6 +4,15 @@ eleventyNavigation:
order: 2
---
Jarek's color palette:
<ref-img
:@src="'ref-full.png'"
:@alt="'Jarek Ref'"
:@artist="'Alpha Moonlight'"
:@href="'https://bsky.app/profile/alphamoonlight.bsky.social'"
:@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
:@nsfw="true"
></ref-img>
<colors :@colors="$data.colors"></colors>

View file

@ -4,4 +4,14 @@ eleventyNavigation:
order: 1
---
Jarek is a proud Krondir. He lives for the hunt.
The jungle of Nakiridaani whispers secrets to those who listen, of a creature so ferocious and powerful that its very presence seems to shape the landscape itself. Deep within the underbrush, where the canopy overhead is a vibrant tapestry of greens and the air is thick with the sounds of exotic life, Jarek, the mighty Krondir, stalks his domain. And those who know of him tremble with awe and respect, acknowledging him as a force to be reckoned with.
The jungle's ancient heart beats within the walls of Jarek's lair, known to many simply as the old "Former Building". This forsaken place was once home to the magic guild of the eponymous Formers, known for their magical prowess to create buildings entirely from living plants. Myths tell of the place's demise, after one of their own destroyed it in a mad outburst of power, turning it into a place that is now shunned by all. Some say that the madman has imposed his spirit on the place, while others tell of it as a cursed place of no return.
Krondir exist in solitude, and so, the superstition surrounding his chosen lair provides Jarek with a secure retreat that hardly anyone in their right mind would ever set foot in. Yet, the allure of his Trii, a precious gemstone encrusted in the horn that adorns his snout, draws out the unwary, those foolish enough to venture into Jarek's domain. Healers often pay hunters exorbitant sums, because the coveted Trii of a Krondir has special healing properties. As a result, Jarek finds himself perpetually on guard, ever vigilant against those who seek his life for the promise of coin.
When night falls over Nakiridaani, Jarek begins his nightly hunt, stalking his prey through the shadows with a stealth that is almost supernatural. His imposing physique, honed from years of hunting and survival, is a finely tuned instrument of death. The slightest sound—a snapped twig, a rustling leaf—betrays the presence of his quarry, drawing them inexorably into Jarek's deadly path. And then, in a flash of fury and power, he strikes, his claws tearing flesh and bone with merciless efficiency, as his thunderous roar shatters the night's silence and sends tremors through the jungle.
After the thrill of the hunt subsides, Jarek returns to the sanctuary of his lair, nesting deep within the shadows of the Former guild's forsaken place of study. There, surrounded by the vibrant greenery of its adnate walls, he allows himself a fleeting moment of respite.
And so, Jarek waits, an unyielding sentinel guarding his domain against all comers. His legend grows, a testament to the indomitable nature of the Krondir, whose unwavering dedication to survival inspires both terror and reverence in those who know of his existence. Those who dare set foot in Jarek's domain do so at their own peril, for in this unforgiving world of the wilderness, only the strongest shall live to see another day.