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

Compare commits

base: SebinNyshkim:54b3304f2f61131a9cea0abb81101ae06ba2472d
Branches Tags
SebinNyshkim:main
...
compare: SebinNyshkim:aa410f916a15e897be9531652f61cfff644005f0
Branches Tags
SebinNyshkim:main

3 commits
54b3304f2f ... aa410f916a

Author SHA1 Message Date
Sebin Nyshkim
aa410f916a refactor: ♻️ use more of the webc feature set proper 2025-04-25 00:15:50 +02:00
Sebin Nyshkim
c0b42b82d0 fix: 🐛 make end detection more robust 
Smooth scrolling messes with the detection of isAtEnd. Introduce a debounce to delay updateActiveStates until scroll has actually finished.
 2025-04-24 23:40:45 +02:00
Sebin Nyshkim
a98028b880 refactor: 🚚 move css into pluggable components 2025-04-24 22:15:10 +02:00
31 changed files with 1396 additions and 1417 deletions
Download patch file Download diff file Expand all files Collapse all files

2
eleventy.config.js
View file

@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
);
eleventyConfig.addPlugin(eleventyPluginWebc, {
components: ['src/components/*.webc', 'npm:@11ty/eleventy-img/*.webc']
components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc']
});
eleventyConfig.addPlugin(eleventyPluginNavigation);
eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);

73
src/components/abilities.webc
View file

@ -1,4 +1,4 @@
<figure class="ability" webc:for="ability of abilities">
<figure webc:for="ability of abilities" webc:root="override">
<eleventy-image
webc:if="img"
class="image"
@ -8,14 +8,14 @@
sizes="(min-width: 64em) 500px, 250px"
></eleventy-image
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
<figcaption class="caption">
<p class="title" @text="ability.name"></p>
<p class="description" @text="ability.description"></p>
<figcaption>
<p @text="ability.name"></p>
<p @text="ability.description"></p>
</figcaption>
</figure>
<style>
.ability {
<style webc:scoped="ability">
:host {
display: grid;
grid-template:
'image' 15em
@ -29,42 +29,43 @@
@media (min-width: 45em) {
grid-template: 'image caption' 1fr / 15em 1fr;
}
}
& .image,
& .no-image {
grid-area: image;
display: grid;
place-items: center;
width: 15em;
height: 15em;
}
:host :where(.image, .no-image) {
grid-area: image;
display: grid;
place-items: center;
width: 15em;
height: 15em;
}
& .image {
width: 100%;
height: 100%;
object-fit: contain;
}
:host .image {
width: 100%;
height: 100%;
object-fit: contain;
}
& .no-image {
text-align: center;
:host .no-image {
text-align: center;
border: 0.125em dashed var(--clr-box-border);
padding: 1em;
}
border: 0.125em dashed var(--clr-box-border);
padding: 1em;
}
& .caption {
grid-area: caption;
}
:host figcaption {
grid-area: caption;
& .title {
font-family: var(--font-family-headings);
font-size: 1.5em;
font-weight: bold;
margin-block: 0;
display: grid;
gap: 0.5em;
}
& + .description {
margin-block: 0.5em 0;
}
}
:host figcaption p {
margin: 0;
}
:host figcaption p:first-child {
font-family: var(--font-family-headings);
font-size: 1.5em;
font-weight: bold;
}
</style>

100
src/components/card.webc
View file

@ -1,4 +1,4 @@
<a class="character-card" :href="href" :class="char">
<a :href="href" :class="char" webc:root="override">
<div class="image">
<slot name="image"></slot>
</div>
@ -8,8 +8,8 @@
</div>
</a>
<style>
.character-card {
<style webc:scoped="character-card">
:host {
display: grid;
align-content: start;
@ -23,61 +23,59 @@
border-radius: 1em;
overflow: hidden;
}
&:hover {
img {
scale: 1.1;
}
}
:host:hover img {
scale: 1.1;
}
& .image {
overflow: hidden;
aspect-ratio: 3/2;
}
:host .image {
overflow: hidden;
aspect-ratio: 3/2;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
scale: 1;
transition: scale 0.2s ease-in-out;
}
:host img {
width: 100%;
height: 100%;
object-fit: cover;
scale: 1;
transition: scale 0.2s ease-in-out;
}
& .text {
--card-spacing: 1.5rem;
padding-block: var(--card-spacing);
padding-inline: var(--card-spacing);
}
:host .text {
--card-spacing: 1.5rem;
padding-block: var(--card-spacing);
padding-inline: var(--card-spacing);
}
& h2 {
position: relative;
font-size: 1.375rem;
margin-block: 0 0.5em;
padding-block: 0 0.5em;
:host h2 {
position: relative;
font-size: 1.375rem;
margin-block: 0 0.5em;
padding-block: 0 0.5em;
}
&::after {
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
height: 0.125em;
width: 2em;
border-radius: 1em;
background: linear-gradient(
to right,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
}
}
:host h2::after {
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
height: 0.125em;
width: 2em;
border-radius: 1em;
background: linear-gradient(
to right,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
}
& p {
margin-block: 0;
:host p {
margin-block: 0;
}
& + p {
margin-block: 1em 0;
}
}
:host p ~ p {
margin-block: 1em 0;
}
</style>

107
src/components/colors.webc
View file

@ -1,4 +1,4 @@
<ul class="character-colors">
<ul webc:root="override">
<li class="color" webc:for="color of colors">
<div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
<p class="heading" @text="color.name"></p>
@ -6,8 +6,8 @@
</li>
</ul>
<style>
.character-colors {
<style webc:scoped="character-colors">
:host {
--columns: repeat(auto-fit, minmax(15em, 1fr));
--clearance: 0.25rem;
--color-box-size: calc(var(--clearance) * 14);
@ -23,63 +23,62 @@
--color-box-size: 5em;
--columns: repeat(auto-fit, minmax(8em, 1fr));
}
}
& .color {
--areas: 'color heading' 'color value';
--rows: repeat(2, 1fr);
--columns: var(--color-box-size) 1fr;
:host .color {
--areas: 'color heading' 'color value';
--rows: repeat(2, 1fr);
--columns: var(--color-box-size) 1fr;
display: grid;
grid-template-areas: var(--areas);
grid-template-rows: var(--rows);
grid-template-columns: var(--columns);
display: grid;
grid-template-areas: var(--areas);
grid-template-rows: var(--rows);
grid-template-columns: var(--columns);
background-color: var(--clr-color-box-background);
background-color: var(--clr-color-box-background);
border: var(--border-thin) solid var(--clr-box-border);
border-radius: 0.5em;
border: var(--border-thin) solid var(--clr-box-border);
border-radius: 0.5em;
overflow: clip;
overflow: clip;
@media (min-width: 35em) {
--areas: 'color' 'heading' 'value';
--rows: var(--color-box-size) 1fr auto;
--columns: 1fr;
}
}
& .color-box {
grid-area: color;
width: 100%;
height: 100%;
}
& .heading,
& .value {
text-align: left;
margin: 0;
padding-block: calc(var(--clearance) * 2);
padding-inline: calc(var(--clearance) * 2);
}
& .heading {
grid-area: heading;
align-self: start;
font-size: 0.625em;
line-height: 1.2;
color: var(--clr-heading-data);
text-transform: uppercase;
}
& .value {
grid-area: value;
align-self: end;
font-size: 0.75em;
padding-block: 0 calc(var(--clearance) * 2);
@media (min-width: 35em) {
--areas: 'color' 'heading' 'value';
--rows: var(--color-box-size) 1fr auto;
--columns: 1fr;
}
}
:host .color-box {
grid-area: color;
width: 100%;
height: 100%;
}
:host :where(.heading, .value) {
text-align: left;
margin: 0;
padding-block: calc(var(--clearance) * 2);
padding-inline: calc(var(--clearance) * 2);
}
:host .heading {
grid-area: heading;
align-self: start;
font-size: 0.625em;
line-height: 1.2;
text-align: start;
color: var(--clr-heading-data);
text-transform: uppercase;
}
:host .value {
grid-area: value;
align-self: end;
font-size: 0.75em;
padding-block: 0 calc(var(--clearance) * 2);
}
</style>

29
src/components/head/page-head-base.webc Normal file
View file

@ -0,0 +1,29 @@
<style>
:root {
--font-size: 18px;
--font-family-headings: 'Sour Gummy', sans-serif;
--font-family-copy: 'Poppins', serif;
--page-spacing: 1em;
--container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
--container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
--border-thin: 0.0625em;
--border-radius: 0.75em;
@media (min-height: 64em) {
--page-spacing: 3em;
}
@media (min-width: 80em) {
--font-size: 20px;
}
@media (min-width: 120em) {
--font-size: 24px;
}
}
</style>

130
src/components/head/page-head-colors.webc Normal file
View file

@ -0,0 +1,130 @@
<style>
/* theme colors */
:root {
--base-luminance: 20%;
--base-chroma: 0.01;
--base-hue: 275deg;
--theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
--theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
--theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
--theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
--theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
--theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
--theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
--theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
--theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
--theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
--theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
--theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
--theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
--theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
--theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
--theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
--theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
--theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
--theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
--theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
}
/* semantic color variables for this project */
:root {
--clr-page-background: var(--theme-c-primary-100);
--clr-text: var(--theme-c-primary-900);
--clr-nav-background: var(--theme-c-primary-200);
--clr-nav-border: var(--theme-c-primary-250);
--clr-nav-link-hover: var(--theme-c-primary-400);
--clr-box-background: var(--theme-c-primary-150);
--clr-box-border: var(--theme-c-primary-250);
--clr-box-shadow: var(--theme-c-primary-200);
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
--clr-color-box-background: var(--theme-c-primary-200);
--clr-quick-info-bg-start: var(--theme-c-primary-100);
--clr-quick-info-bg-end: var(--theme-c-primary-150);
@media (prefers-color-scheme: dark) {
--clr-page-background: var(--theme-c-primary-850);
--clr-text: var(--theme-c-primary-100);
--clr-nav-background: var(--theme-c-primary-700);
--clr-nav-border: var(--theme-c-primary-650);
--clr-nav-link-hover: var(--theme-c-primary-500);
--clr-box-background: var(--theme-c-primary-750);
--clr-box-border: var(--theme-c-primary-700);
--clr-box-shadow: var(--theme-c-primary-800);
--clr-color-box-background: var(--theme-c-primary-700);
--clr-quick-info-bg-start: var(--theme-c-primary-700);
--clr-quick-info-bg-end: var(--theme-c-primary-750);
}
}
.sebin {
--clr-accent-1: oklch(58% 0.16 33deg); /* scales */
--clr-accent-2: oklch(78% 0.13 68deg); /* chest */
--clr-accent-3: oklch(49% 0.08 265deg); /* hair */
--clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
--clr-accent-5: oklch(36% 0.01 17deg); /* horns */
--clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
--clr-selection: var(--clr-accent-1);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-1);
--clr-heading-underline: var(--clr-accent-1);
--clr-heading-data: var(--clr-accent-1);
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
}
.viktor {
--clr-accent-1: oklch(85% 0.04 56deg); /* front */
--clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
--clr-accent-3: oklch(30% 0.04 22deg); /* back main */
--clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
--clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
--clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
--clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
--clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
--clr-selection: var(--clr-accent-8);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-8);
--clr-heading-underline: var(--clr-accent-8);
--clr-heading-data: var(--clr-accent-8);
--clr-link: var(--clr-accent-8);
--clr-link-underline: var(--clr-accent-8);
--clr-timeline-stroke: var(--clr-accent-8);
--clr-gallery-indicator: var(--clr-accent-8);
@media (prefers-color-scheme: light) {
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
}
}
.jarek {
--clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
--clr-accent-2: oklch(56% 0.1 98deg); /* mane */
--clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
--clr-accent-4: oklch(81% 0.07 74deg); /* horn */
--clr-accent-5: oklch(84% 0.07 111deg); /* trii */
--clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
--clr-selection: var(--clr-accent-1);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-1);
--clr-heading-underline: var(--clr-accent-1);
--clr-heading-data: var(--clr-accent-1);
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
}
</style>

504
src/components/head/page-head-fonts.webc Normal file
View file

@ -0,0 +1,504 @@
<style>
/* poppins-thin-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin'), local('Poppins-Thin'),
url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-thin-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin'), local('Poppins-Thin'),
url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-light-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light'), local('Poppins-Light'),
url(../fonts/poppins/poppins-light-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-light-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light'), local('Poppins-Light'),
url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-medium-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium'), local('Poppins-Medium'),
url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-medium-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium'), local('Poppins-Medium'),
url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Regular'), local('Poppins-Regular'),
url(../fonts/poppins/poppins-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Regular'), local('Poppins-Regular'),
url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extralight-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extralight-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-black-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black'), local('Poppins-Black'),
url(../fonts/poppins/poppins-black-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-black-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black'), local('Poppins-Black'),
url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-semibold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-semibold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-bold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold'), local('Poppins-Bold'),
url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-bold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold'), local('Poppins-Bold'),
url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extrabold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extrabold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-thin-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-thin-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extralight-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extralight-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-light-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-light-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-medium-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-medium-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-semibold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-semibold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-bold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-bold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extrabold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extrabold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Italic'), local('Poppins-Italic'),
url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Italic'), local('Poppins-Italic'),
url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-black-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-black-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* latin-ext */
@font-face {
font-family: 'Sour Gummy';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2)
format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Sour Gummy';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Sour Gummy';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2)
format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Sour Gummy';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

32
src/components/head/page-head-style.webc Normal file
View file

@ -0,0 +1,32 @@
<style>
:root {
font-family: var(--font-family-copy);
font-size: var(--font-size);
}
* {
box-sizing: border-box;
}
body {
background-color: var(--clr-page-background);
color: var(--clr-text);
margin: 0;
min-height: 100dvh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-headings);
}
::selection {
color: var(--clr-selection-text);
background-color: var(--clr-selection);
}
</style>

178
src/components/navigation.webc
View file

@ -1,28 +1,28 @@
<nav class="character-nav" :aria-label="label">
<nav :aria-label="label" webc:root="override">
<label for="nav-toggle">
<icon icon="bars" webc:nokeep></icon>
<icon icon="bars"></icon>
</label>
<input type="checkbox" id="nav-toggle" />
<template
webc:nokeep
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
listClass: 'list',
listItemClass: 'item',
listItemHasChildrenClass: 'hasChildren',
activeListItemClass: 'item-active',
listClass: 'list',
listItemClass: 'item',
listItemHasChildrenClass: 'hasChildren',
activeListItemClass: 'item-active',
anchorClass: 'link',
activeAnchorClass: 'link-active',
anchorClass: 'link',
activeAnchorClass: 'link-active',
activeKey: $data.eleventyNavigation.key,
activeKey: $data.eleventyNavigation.key,
showExcerpt: false
})"
showExcerpt: false
})"
></template>
</nav>
<style>
.character-nav {
<style webc:scoped="character-nav">
:host {
--nav-spacing: 1em;
--nav-background-color: var(--clr-nav-background);
--nav-border: var(--border-thin) solid var(--clr-box-border);
@ -48,99 +48,97 @@
@media (min-width: 64em) {
--nav-spacing: 2em;
}
}
&:has(#nav-toggle:checked) {
& .list {
opacity: 1;
}
:host:has(#nav-toggle:checked) .list {
opacity: 1;
}
& .item {
height: 100%;
}
}
:host:has(#nav-toggle:checked) .item {
height: 100%;
}
& label[for='nav-toggle'] {
width: 1.5em;
height: 1.5em;
margin-block: 0.75em;
margin-inline: 1em;
:host label[for='nav-toggle'] {
width: 1.5em;
height: 1.5em;
margin-block: 0.75em;
margin-inline: 1em;
&:hover {
cursor: pointer;
}
@media (min-width: 35em) {
display: none;
}
}
& #nav-toggle {
@media (min-width: 35em) {
display: none;
}
}
& .list {
--nav-items-position: absolute;
--nav-items-orientation: column nowrap;
:host label[for='nav-toggle']:hover {
cursor: pointer;
}
position: var(--nav-items-position);
top: 3em;
:host #nav-toggle {
display: none;
}
display: flex;
flex-flow: var(--nav-items-orientation);
:host .list {
--nav-items-position: absolute;
--nav-items-orientation: column nowrap;
text-align: end;
list-style: none;
position: var(--nav-items-position);
top: 3em;
background-color: var(--clr-nav-background);
display: flex;
flex-flow: var(--nav-items-orientation);
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;
padding-inline: var(--nav-spacing);
text-align: end;
list-style: none;
z-index: 3;
opacity: 0;
transition: opacity 0.4s ease-in-out;
background-color: var(--clr-nav-background);
@media (min-width: 35em) {
--nav-items-position: static;
--nav-items-orientation: row nowrap;
align-items: start;
gap: 1em;
opacity: 1;
}
}
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;
padding-inline: var(--nav-spacing);
& .item {
overflow: hidden;
height: 0;
transition: height 0.4s ease-in-out;
z-index: 3;
opacity: 0;
transition: opacity 0.4s ease-in-out;
@media (min-width: 35em) {
height: 100%;
}
}
& .link {
display: block;
font-weight: 500;
text-decoration: none;
color: var(--clr-nav-link, inherit);
padding-block: calc(var(--nav-spacing) / 2);
transition: color 0.4s ease;
&:hover {
color: var(--clr-nav-link-hover);
}
}
& .link-active {
color: var(--clr-nav-link-active);
@media (min-width: 35em) {
--nav-items-position: static;
--nav-items-orientation: row nowrap;
align-items: start;
gap: 1em;
opacity: 1;
}
}
:host .item {
overflow: hidden;
height: 0;
transition: height 0.4s ease-in-out;
@media (min-width: 35em) {
height: 100%;
}
}
:host .link {
display: block;
font-weight: 500;
text-decoration: none;
color: var(--clr-nav-link, inherit);
padding-block: calc(var(--nav-spacing) / 2);
transition: color 0.4s ease;
}
:host .link:hover {
color: var(--clr-nav-link-hover);
}
:host .link-active {
color: var(--clr-nav-link-active);
}
</style>

94
src/components/page-content.webc
View file

@ -1,11 +1,11 @@
<section class="page-content">
<navigation label="Character" page :collection="char" webc:nokeep></navigation>
<section webc:root="override">
<navigation label="Character" :collection="char"></navigation>
<slot></slot>
</section>
<style>
.page-content {
<style webc:scoped="page-content">
:host {
width: 100%;
background-color: var(--clr-box-background);
@ -13,55 +13,55 @@
border-radius: var(--border-radius);
overflow: clip;
}
& :where(h1, h2, h3, h4, h5, h6) {
--heading-spacing: 0.25em;
position: relative;
font-weight: bold;
margin-block: 0 var(--heading-spacing);
padding-block: 0 var(--heading-spacing);
:host :where(h1, h2, h3, h4, h5, h6) {
--heading-spacing: 0.25em;
position: relative;
font-weight: bold;
margin-block: 0 var(--heading-spacing);
padding-block: 0 var(--heading-spacing);
}
&::after {
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
height: 0.125em;
width: 2em;
border-radius: 1em;
background: linear-gradient(
to right,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
}
}
:host :where(h1, h2, h3, h4, h5, h6)::after {
content: '';
position: absolute;
display: block;
left: 0;
bottom: 0;
height: 0.125em;
width: 2em;
border-radius: 1em;
background: linear-gradient(
to right,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
}
& h1 {
font-size: 3em;
}
:host h1 {
font-size: 3em;
}
& h2 {
font-size: 2em;
}
:host h2 {
font-size: 2em;
}
& p {
text-align: justify;
}
:host p {
text-align: justify;
}
& article a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.1875em;
text-decoration-thickness: 0.125em;
text-decoration-skip-ink: all;
text-decoration-color: var(--clr-link-underline);
transition: color 0.2s ease;
:host article a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.1875em;
text-decoration-thickness: 0.125em;
text-decoration-skip-ink: all;
text-decoration-color: var(--clr-link-underline);
transition: color 0.2s ease;
}
&:hover {
color: var(--clr-link);
}
}
:host article a:hover {
color: var(--clr-link);
}
</style>

79
src/components/profile.webc
View file

@ -1,4 +1,4 @@
<aside class="profile">
<aside webc:root="override">
<div class="avatar">
<slot name="avatar"></slot>
</div>
@ -11,8 +11,8 @@
<slot></slot>
</aside>
<style>
.profile {
<style webc:scoped="profile">
:host {
--sidebar-position: static;
--sidebar-padding: 1rem;
--sidebar-grid-columns: auto 1fr;
@ -45,45 +45,44 @@
--sidebar-top-text-align: center;
--sidebar-avatar-size: 10em;
}
}
& .avatar {
grid-area: avatar;
justify-self: center;
:host .avatar {
grid-area: avatar;
justify-self: center;
& img {
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
aspect-ratio: 1/1;
border-radius: 1em;
object-fit: cover;
}
}
& .name,
& .species {
font-family: var(--font-family-headings);
text-align: var(--sidebar-top-text-align);
}
& .name {
grid-area: name;
align-self: end;
font-size: 1.375em;
font-weight: bold;
margin: 0;
}
& .species {
grid-area: species;
align-self: start;
font-size: 0.75em;
margin: 0;
}
& > :last-child {
grid-area: traits;
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
& img {
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
aspect-ratio: 1/1;
border-radius: 1em;
object-fit: cover;
}
}
:host :where(.name, .species) {
font-family: var(--font-family-headings);
text-align: var(--sidebar-top-text-align);
}
:host .name {
grid-area: name;
align-self: end;
font-size: 1.375em;
font-weight: bold;
margin: 0;
}
:host .species {
grid-area: species;
align-self: start;
font-size: 0.75em;
margin: 0;
}
:host > :last-child {
grid-area: traits;
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
}
</style>

42
src/components/quick-info.webc
View file

@ -1,10 +1,10 @@
<div class="quick-info">
<div webc:root="override">
<h3 class="title">Key Facts</h3>
<slot></slot>
</div>
<style>
.quick-info {
<style webc:scoped="quick-info">
:host {
position: relative;
background: linear-gradient(
to bottom right,
@ -19,26 +19,26 @@
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;
}
:host::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;
}
:host .title {
margin-block: 0 1em;
}
& > :last-child {
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
:host > :last-child {
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
</style>

265
src/components/ref-gallery.webc
View file

@ -8,6 +8,20 @@
const TOLERANCE = 2;
const debounce = (fn, delay = 300) => {
let timer = 0;
const debounced = (...args) => {
if (!args) args = [];
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(fn, args);
}, delay);
};
return debounced;
};
const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
const isAtEnd = () => {
const { scrollLeft, offsetWidth, scrollWidth } = track;
@ -41,12 +55,7 @@
const prev = () => scrollToIndex(currentIndex - 1);
const next = () => scrollToIndex(currentIndex + 1);
const resizeObserver = new ResizeObserver(() => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
scrollToIndex(currentIndex);
}, 100);
});
const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
resizeObserver.observe(track);
const galleryObserver = new IntersectionObserver(
@ -89,15 +98,16 @@
images.forEach((el) => galleryObserver.observe(el));
prevButton.addEventListener('click', prev);
nextButton.addEventListener('click', next);
track.addEventListener('scroll', () => debounce(updateActiveStates(currentIndex)));
document.addEventListener('DOMContentLoaded', () => initializeGallery());
</script>
<section class="gallery" aria-label="Image gallery">
<section aria-label="Image gallery" webc:root="override">
<button class="prev" aria-label="Previous Image">
<icon icon="chevron-left" webc:nokeep></icon>
<icon icon="chevron-left"></icon>
</button>
<button class="next" aria-label="Next Image">
<icon icon="chevron-right" webc:nokeep></icon>
<icon icon="chevron-right"></icon>
</button>
<div class="track">
@ -107,8 +117,8 @@
<nav class="gallery-nav" aria-label="Gallery"></nav>
</section>
<style>
.gallery {
<style webc:scoped="gallery">
:host {
display: grid;
grid-auto-columns: auto 1fr auto;
grid-template-areas:
@ -116,152 +126,147 @@
'. progress .';
align-items: center;
gap: 1em;
}
& .prev,
& .next,
& .indicator-btn {
position: relative;
:host :where(.prev, .next, .indicator-btn) {
position: relative;
font-size: 1.25em;
color: var(--clr-text);
cursor: pointer;
font-size: 1.25em;
color: var(--clr-text);
cursor: pointer;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border: none;
border-radius: 100%;
padding: 0.875em;
border: none;
border-radius: 100%;
padding: 0.875em;
z-index: 1;
z-index: 1;
}
&:active::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
}
:host :where(.prev, .next, .indicator-btn):active::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
}
&::after {
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;
}
}
:host :where(.prev, .next, .indicator-btn)::after {
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;
}
& .prev,
& .next {
grid-row: track;
:host :where(.prev, .next) {
grid-row: track;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
:host :where(.prev, .next):disabled {
cursor: not-allowed;
opacity: 0.5;
}
& svg {
position: absolute;
inset: 0;
padding: 0.375em;
}
}
:host :where(.prev, .next) svg {
position: absolute;
inset: 0;
padding: 0.375em;
}
& .prev {
grid-column: prev;
left: 0.5em;
}
:host .prev {
grid-column: prev;
left: 0.5em;
}
& .next {
grid-column: next;
right: 0.5em;
}
:host .next {
grid-column: next;
right: 0.5em;
}
& .track {
grid-row: track;
grid-column: prev / next;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 2em;
:host .track {
grid-row: track;
grid-column: prev / next;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 2em;
border-radius: 1em;
border-radius: 1em;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
& > * {
scroll-snap-align: center;
}
:host .track > * {
scroll-snap-align: center;
}
&::-webkit-scrollbar {
display: none;
}
}
:host .track::-webkit-scrollbar {
display: none;
}
& .ref-image {
& :first-child {
grid-row: image / caption;
}
:host .ref-image :first-child {
grid-row: image / caption;
}
& img {
width: 100%;
height: 80vw;
object-fit: cover;
}
:host .ref-image img {
width: 100%;
height: 80vw;
object-fit: cover;
}
& .caption {
font-size: 0.875em;
text-wrap: balance;
:host .ref-image .caption {
font-size: 0.875em;
text-wrap: balance;
background: oklch(from var(--clr-box-background) l c h / 0.75);
background: oklch(from var(--clr-box-background) l c h / 0.75);
padding-block: 0.5em;
padding-inline: 1em;
}
}
padding-block: 0.5em;
padding-inline: 1em;
}
& .gallery-nav {
--indicator-size: 2.5em;
:host .gallery-nav {
--indicator-size: 2.5em;
grid-row: progress;
grid-column: prev / next;
grid-row: progress;
grid-column: prev / next;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
gap: 0.5em;
place-content: center;
place-items: center;
font-size: 0.875em;
}
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
gap: 0.5em;
place-content: center;
place-items: center;
font-size: 0.875em;
}
& .indicator-btn {
font-size: 1em;
width: var(--indicator-size);
height: var(--indicator-size);
padding: 0;
aspect-ratio: 1 / 1;
}
:host .indicator-btn {
font-size: 1em;
width: var(--indicator-size);
height: var(--indicator-size);
padding: 0;
aspect-ratio: 1 / 1;
}
& .indicator-btn[aria-current='true']::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
}
:host .indicator-btn[aria-current='true']::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
}
</style>

43
src/components/ref-img.webc
View file

@ -1,4 +1,4 @@
<figure class="ref-image">
<figure webc:root="override">
<eleventy-image
class="image"
:class="(dropshadow ? 'dropshadow' : '')"
@ -14,8 +14,8 @@
</figcaption>
</figure>
<style>
.ref-image {
<style webc:scoped="ref-image">
:host {
display: grid;
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
place-content: center;
@ -24,26 +24,27 @@
margin-block: 0;
margin-inline: auto;
& :first-child {
grid-area: image;
}
}
& img {
display: block;
width: 100%;
height: 100%;
max-height: 35rem;
object-fit: contain;
border-radius: 1em;
}
:host :first-child {
grid-area: image;
}
& .dropshadow {
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
}
:host img {
display: block;
width: 100%;
height: 100%;
max-height: 35rem;
object-fit: contain;
border-radius: 1em;
}
& .caption {
grid-area: caption;
text-align: center;
}
:host .dropshadow {
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
}
:host .caption {
grid-area: caption;
text-align: center;
}
</style>

110
src/components/timeline.webc
View file

@ -1,4 +1,4 @@
<ul class="timeline">
<ul webc:root="override">
<li class="job" webc:for="job of jobs">
<icon class="icon" :icon="job.icon"></icon>
<p class="title" @text="job.title"></p>
@ -6,8 +6,8 @@
</li>
</ul>
<style>
.timeline {
<style webc:scoped="timeline">
:host {
--timeline-circle-size: 3rem;
--timeline-circle-background: var(--clr-box-background);
--timeline-stroke-color: var(--clr-timeline-stroke);
@ -20,70 +20,72 @@
--timeline-circle-size: 4rem;
}
& .job {
display: grid;
grid-template-areas:
'icon title'
'line text';
column-gap: 1em;
}
&::before {
content: '';
:host .job {
display: grid;
grid-template-areas:
'icon title'
'line text';
column-gap: 1em;
grid-row: icon / line;
grid-column: line;
justify-self: center;
}
width: var(--timeline-stroke-thickness);
height: 100%;
:host .job::before {
content: '';
background-color: var(--timeline-stroke-color);
}
grid-row: icon / line;
grid-column: line;
justify-self: center;
&:first-child::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
}
width: var(--timeline-stroke-thickness);
height: 100%;
&:last-child::before {
grid-row: icon;
align-self: start;
height: 50%;
}
}
background-color: var(--timeline-stroke-color);
}
& .icon {
grid-area: icon;
align-self: center;
:host .job:first-child::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
}
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
:host .job:last-child::before {
grid-row: icon;
align-self: start;
height: 50%;
}
background-color: var(--timeline-circle-background);
:host .icon {
grid-area: icon;
align-self: center;
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2);
}
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
& .title {
grid-area: title;
align-self: center;
background-color: var(--timeline-circle-background);
font-family: var(--font-family-headings);
font-size: calc(var(--timeline-circle-size) / 2);
font-weight: bold;
text-align: start;
margin-block: calc(var(--timeline-circle-size) / 4);
}
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2);
}
& .text {
grid-area: text;
:host .title {
grid-area: title;
align-self: center;
margin-inline: 0;
margin-block: 0;
line-height: 1.5;
text-align: justify;
}
font-family: var(--font-family-headings);
font-size: calc(var(--timeline-circle-size) / 2);
font-weight: bold;
text-align: start;
margin-block: calc(var(--timeline-circle-size) / 4);
}
:host .text {
grid-area: text;
margin-inline: 0;
margin-block: 0;
line-height: 1.5;
text-align: justify;
}
</style>

100
src/components/traits.webc
View file

@ -1,13 +1,13 @@
<ul class="trait-list">
<ul webc:root="override">
<li class="trait" webc:for="trait of traits">
<div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
<div class="icon-box"><icon :@icon="trait.icon"></icon></div>
<p class="type" @text="trait.type"></p>
<p class="text" @text="trait.text"></p>
</li>
</ul>
<style>
.trait-list {
<style webc:scoped="trait-list">
:host {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 0.75em;
@ -16,7 +16,7 @@
padding: 0;
}
.trait {
:host .trait {
display: grid;
grid-template-areas:
'icon type'
@ -25,57 +25,59 @@
column-gap: 0.75em;
justify-items: start;
& .icon-box {
position: relative;
grid-area: icon;
}
width: 2em;
height: 2em;
:host .icon-box {
position: relative;
grid-area: icon;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
width: 2em;
height: 2em;
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.5em;
overflow: hidden;
z-index: 1;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
&::before {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
}
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.5em;
overflow: hidden;
z-index: 1;
& svg {
padding: 0.5em;
}
}
& p {
margin-block: 0;
}
:host .icon-box::before {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
& .type {
font-size: 0.625em;
color: var(--clr-heading-data);
text-align: left;
text-transform: uppercase;
grid-area: type;
}
:host svg {
padding: 0.5em;
}
& .text {
font-size: 0.75em;
text-align: left;
margin-block: 0;
margin-inline: 0;
color: var(--clr-text);
grid-area: data;
}
:host p {
margin-block: 0;
}
:host .type {
font-size: 0.625em;
color: var(--clr-heading-data);
text-align: left;
text-transform: uppercase;
grid-area: type;
}
:host .text {
font-size: 0.75em;
text-align: left;
margin-block: 0;
margin-inline: 0;
color: var(--clr-text);
grid-area: data;
}
</style>

28
src/css/base.css
View file

@ -1,28 +0,0 @@
:root {
--font-size: 18px;
--font-family-headings: 'Sour Gummy', sans-serif;
--font-family-copy: 'Poppins', serif;
--page-spacing: 1em;
--container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
--container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
--container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
--container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
--border-thin: 0.0625em;
--border-radius: 0.75em;
@media (min-height: 64em) {
--page-spacing: 3em;
}
@media (min-width: 80em) {
--font-size: 20px;
}
@media (min-width: 120em) {
--font-size: 24px;
}
}

128
src/css/colors.css
View file

@ -1,128 +0,0 @@
/* theme colors */
:root {
--base-luminance: 20%;
--base-chroma: 0.01;
--base-hue: 275deg;
--theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
--theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
--theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
--theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
--theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
--theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
--theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
--theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
--theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
--theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
--theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
--theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
--theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
--theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
--theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
--theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
--theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
--theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
--theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
--theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
}
/* semantic color variables for this project */
:root {
--clr-page-background: var(--theme-c-primary-100);
--clr-text: var(--theme-c-primary-900);
--clr-nav-background: var(--theme-c-primary-200);
--clr-nav-border: var(--theme-c-primary-250);
--clr-nav-link-hover: var(--theme-c-primary-400);
--clr-box-background: var(--theme-c-primary-150);
--clr-box-border: var(--theme-c-primary-250);
--clr-box-shadow: var(--theme-c-primary-200);
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
--clr-color-box-background: var(--theme-c-primary-200);
--clr-quick-info-bg-start: var(--theme-c-primary-100);
--clr-quick-info-bg-end: var(--theme-c-primary-150);
@media (prefers-color-scheme: dark) {
--clr-page-background: var(--theme-c-primary-850);
--clr-text: var(--theme-c-primary-100);
--clr-nav-background: var(--theme-c-primary-700);
--clr-nav-border: var(--theme-c-primary-650);
--clr-nav-link-hover: var(--theme-c-primary-500);
--clr-box-background: var(--theme-c-primary-750);
--clr-box-border: var(--theme-c-primary-700);
--clr-box-shadow: var(--theme-c-primary-800);
--clr-color-box-background: var(--theme-c-primary-700);
--clr-quick-info-bg-start: var(--theme-c-primary-700);
--clr-quick-info-bg-end: var(--theme-c-primary-750);
}
}
.sebin {
--clr-accent-1: oklch(58% 0.16 33deg); /* scales */
--clr-accent-2: oklch(78% 0.13 68deg); /* chest */
--clr-accent-3: oklch(49% 0.08 265deg); /* hair */
--clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
--clr-accent-5: oklch(36% 0.01 17deg); /* horns */
--clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
--clr-selection: var(--clr-accent-1);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-1);
--clr-heading-underline: var(--clr-accent-1);
--clr-heading-data: var(--clr-accent-1);
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
}
.viktor {
--clr-accent-1: oklch(85% 0.04 56deg); /* front */
--clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
--clr-accent-3: oklch(30% 0.04 22deg); /* back main */
--clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
--clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
--clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
--clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
--clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
--clr-selection: var(--clr-accent-8);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-8);
--clr-heading-underline: var(--clr-accent-8);
--clr-heading-data: var(--clr-accent-8);
--clr-link: var(--clr-accent-8);
--clr-link-underline: var(--clr-accent-8);
--clr-timeline-stroke: var(--clr-accent-8);
--clr-gallery-indicator: var(--clr-accent-8);
@media (prefers-color-scheme: light) {
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
}
}
.jarek {
--clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
--clr-accent-2: oklch(56% 0.1 98deg); /* mane */
--clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
--clr-accent-4: oklch(81% 0.07 74deg); /* horn */
--clr-accent-5: oklch(84% 0.07 111deg); /* trii */
--clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
--clr-selection: var(--clr-accent-1);
--clr-selection-text: var(--theme-c-primary-100);
--clr-nav-link-active: var(--clr-accent-1);
--clr-heading-underline: var(--clr-accent-1);
--clr-heading-data: var(--clr-accent-1);
--clr-link: var(--clr-accent-1);
--clr-link-underline: var(--clr-accent-1);
--clr-gallery-indicator: var(--clr-accent-1);
}

497
src/css/fonts.css
View file

@ -1,497 +0,0 @@
/* poppins-thin-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin'), local('Poppins-Thin'), url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-thin-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin'), local('Poppins-Thin'),
url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-light-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light'), local('Poppins-Light'),
url(../fonts/poppins/poppins-light-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-light-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light'), local('Poppins-Light'),
url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-medium-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium'), local('Poppins-Medium'),
url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-medium-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium'), local('Poppins-Medium'),
url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/poppins/poppins-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Regular'), local('Poppins-Regular'),
url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extralight-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extralight-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-black-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black'), local('Poppins-Black'),
url(../fonts/poppins/poppins-black-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-black-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black'), local('Poppins-Black'),
url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-semibold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-semibold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-bold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-bold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold'), local('Poppins-Bold'),
url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extrabold-latin */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extrabold-latin-ext */
@font-face {
font-family: Poppins;
font-style: normal;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-thin-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-thin-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 100;
font-stretch: 100%;
src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extralight-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extralight-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 200;
font-stretch: 100%;
src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-light-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-light-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 300;
font-stretch: 100%;
src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-medium-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-medium-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 500;
font-stretch: 100%;
src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-semibold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-semibold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 600;
font-stretch: 100%;
src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-bold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-bold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 700;
font-stretch: 100%;
src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-extrabold-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-extrabold-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 800;
font-stretch: 100%;
src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Italic'), local('Poppins-Italic'),
url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 400;
font-stretch: 100%;
src: local('Poppins Italic'), local('Poppins-Italic'),
url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* poppins-black-italic-latin */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2212, U+2215;
font-display: swap;
}
/* poppins-black-italic-latin-ext */
@font-face {
font-family: Poppins;
font-style: italic;
font-weight: 900;
font-stretch: 100%;
src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
/* latin-ext */
@font-face {
font-family: 'Sour Gummy';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2)
format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Sour Gummy';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Sour Gummy';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Sour Gummy';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

30
src/css/style.css
View file

@ -1,30 +0,0 @@
:root {
font-family: var(--font-family-copy);
font-size: var(--font-size);
}
* {
box-sizing: border-box;
}
body {
background-color: var(--clr-page-background);
color: var(--clr-text);
margin: 0;
min-height: 100dvh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-headings);
}
::selection {
color: var(--clr-selection-text);
background-color: var(--clr-selection);
}

2
src/index.webc
View file

@ -14,7 +14,7 @@
</header>
<div class="characters">
<card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
<card webc:for="char of characters" :href="`/${char}/`">
<eleventy-image
slot="image"
:src="getAvatar(char)"

2
src/jarek/anatomy.md
View file

@ -6,4 +6,4 @@ eleventyNavigation:
Jarek's color palette:
<colors :colors="getColors()" webc:nokeep></colors>
<colors :@colors="$data.getColors()"></colors>

10
src/layouts/base.webc
View file

@ -4,10 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character Ref</title>
<link rel="stylesheet" href="../css/base.css" />
<link rel="stylesheet" href="../css/fonts.css" />
<link rel="stylesheet" href="../css/colors.css" />
<link rel="stylesheet" href="../css/style.css" />
<template webc:is="page-head-base" webc:nokeep></template>
<template webc:is="page-head-fonts" webc:nokeep></template>
<template webc:is="page-head-colors" webc:nokeep></template>
<template webc:is="page-head-style" webc:nokeep></template>
<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
</head>

6
src/layouts/character.webc
View file

@ -3,7 +3,7 @@ layout: base.webc
---
<main :class="firstName.toLowerCase()">
<profile webc:nokeep>
<profile>
<eleventy-image
slot="avatar"
:src="`src/img/${firstName.toLowerCase()}/avatar.png`"
@ -12,10 +12,10 @@ layout: base.webc
></eleventy-image>
<template webc:nokeep slot="name" @text="getFullName()"></template>
<template webc:nokeep slot="species" @text="species"></template>
<traits :traits="getTraits()" webc:nokeep></traits>
<traits :@traits="$data.getTraits()"></traits>
</profile>
<page-content :char="firstName.toLowerCase()" webc:nokeep>
<page-content :@char="$data.firstName.toLowerCase()">
<h1 @text="$data.eleventyNavigation.key"></h1>
<article @raw="content"></article>
</page-content>

6
src/sebin/abilities.md
View file

@ -8,4 +8,8 @@ Since Sebin is a fire dragon there's a myriad of abilities he has at his disposa
## Attacks
<abilities :abilities="attacks" :img="true" :char="firstName.toLowerCase()" webc:nokeep></abilities>
<abilities
:@abilities="attacks"
:@img="true"
:@char="$data.firstName.toLowerCase()"
></abilities>

131
src/sebin/anatomy.md
View file

@ -2,27 +2,6 @@
eleventyNavigation:
key: Anatomy
order: 2
refs:
sebinFront:
src: ref-front.png
alt: Sebin Ref
artist: draftgon
href: https://bsky.app/profile/draftgon.bsky.social
sebinBack:
src: ref-back.png
alt: Sebin Ref
artist: draftgon
href: https://bsky.app/profile/draftgon.bsky.social
sebinExpressions:
src: ref-expressions.png
alt: Sebin's expressions
artist: draftgon
href: https://bsky.app/profile/draftgon.bsky.social
sebinUpperBody:
src: ref-upper-body.png
alt: Sebin's upper body closeup
artist: Nidhogg
href: https://bsky.app/profile/nidthedragon.bsky.social
gallery: [
{
alt: Sebin looking aloof (but chill),
@ -73,20 +52,19 @@ gallery: [
---
<ref-img
:char="firstName.toLowerCase()"
:src="refs.sebinFront.src"
:alt="refs.sebinFront.alt"
:width="[1000]"
:artist="refs.sebinFront.artist"
:href="refs.sebinFront.href"
:dropshadow="true"
webc:nokeep
src="ref-front.png"
alt="Sebin Ref"
artist="draftgon"
href="https://bsky.app/profile/draftgon.bsky.social"
:width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<colors :colors="getColors()" webc:nokeep></colors>
<colors :@colors="$data.getColors()"></colors>
<quick-info webc:nokeep>
<traits :traits="getTraits('general')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('general')"></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.
@ -100,18 +78,17 @@ Sebin has a muscular build that he keeps in shape with regular exercise.
## Wings
<ref-img
:char="firstName.toLowerCase()"
:src="refs.sebinBack.src"
:alt="refs.sebinBack.alt"
:width="[1000]"
:artist="refs.sebinBack.artist"
:href="refs.sebinBack.href"
:dropshadow="true"
webc:nokeep
src="ref-back.png"
alt="Sebin Ref"
artist="draftgon"
href="https://bsky.app/profile/draftgon.bsky.social"
:width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('wings')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('wings')"></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.
@ -119,18 +96,17 @@ Sebin's wings have a span of about 4.17 meters (13'8"). They function very much
## Head
<ref-img
:char="firstName.toLowerCase()"
:src="refs.sebinExpressions.src"
:alt="refs.sebinExpressions.alt"
:width="[1000]"
:artist="refs.sebinExpressions.artist"
:href="refs.sebinExpressions.href"
:dropshadow="true"
webc:nokeep
src="ref-expressions.png"
alt="Sebin's expressions"
artist="draftgon"
href="https://bsky.app/profile/draftgon.bsky.social"
:width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('head')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('head')"></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).
@ -138,18 +114,17 @@ Despite what one might expect with reptilians, Sebin's pupils are rounded instea
## Upper body
<ref-img
:char="firstName.toLowerCase()"
:src="refs.sebinUpperBody.src"
:alt="refs.sebinUpperBody.alt"
:width="[1000]"
:artist="refs.sebinUpperBody.artist"
:href="refs.sebinUpperBody.href"
:dropshadow="true"
webc:nokeep
src="ref-upper-body.png"
alt="Sebin's upper body closeup"
artist="Nidhogg"
href="https://bsky.app/profile/nidthedragon.bsky.social"
:width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('muscle')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('muscle')"></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.
@ -160,34 +135,32 @@ Sebin is very concerned with an even distribution of muscle mass, but pays parti
An assortment of additional references how Sebin can be drawn.
<ref-gallery webc:nokeep>
<ref-gallery>
<ref-img webc:for="ref of [...Array(9).keys()]"
:char="firstName.toLowerCase()"
:src="`ref-muscle-${ref + 1}.png`"
:alt="gallery[ref].alt"
:artist="gallery[ref].artist"
:href="gallery[ref].href"
:alt="$data.gallery[ref].alt"
:width="[500, 1000]"
:dropshadow="false"
webc:nokeep
:href="$data.gallery[ref].href"
:@artist="$data.gallery[ref].artist"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="false"
></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
src="ref-penis.png"
alt="Sebin's manly parts"
artist="draftgon"
href="https://bsky.app/profile/draftgon.bsky.social"
:width="[500, 1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<quick-info webc:nokeep>
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('naughty')"></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.

13
src/sebin/clothing.md
View file

@ -28,15 +28,14 @@ gallery: [
Sebin knows how to dress!
<ref-gallery webc:nokeep>
<ref-gallery>
<ref-img webc:for="ref of Array(4).keys()"
:char="firstName.toLowerCase()"
:src="`ref-clothes-${ref + 1}.png`"
:alt="gallery[ref].alt"
:artist="gallery[ref].artist"
:href="gallery[ref].href"
:alt="$data.gallery[ref].alt"
:href="$data.gallery[ref].href"
:width="[500, 1000]"
:dropshadow="false"
webc:nokeep
:@char="$data.firstName.toLowerCase()"
:@artist="$data.gallery[ref].artist"
:@dropshadow="false"
></ref-img>
</ref-gallery>

27
src/sebin/overdrive.md
View file

@ -2,23 +2,16 @@
eleventyNavigation:
key: Overdrive
order: 4
refs:
overdrive:
src: ref-overdrive.jpg
alt: Sebin Overdrive Ref
artist: CVictorrosso
href: https://bsky.app/profile/cvictorrosso.bsky.social
---
<ref-img
:char="firstName.toLowerCase()"
:src="refs.overdrive.src"
:alt="refs.overdrive.alt"
:width="[1000]"
:artist="refs.overdrive.artist"
:href="refs.overdrive.href"
:dropshadow="false"
webc:nokeep
src="ref-overdrive.jpg"
alt="Sebin Overdrive Ref"
artist="CVictorrosso"
href="https://bsky.app/profile/cvictorrosso.bsky.social"
:width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="false"
></ref-img>
Sebin can enter an Overdrive Form which greatly increases his strength and abilities but it comes at a cost.
@ -31,4 +24,8 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
## Attacks
<abilities :abilities="overdriveAttacks" :img="false" :char="firstName.toLowerCase()" webc:nokeep></abilities>
<abilities
:@abilities="overdriveAttacks"
:@img="false"
:@char="$data.firstName.toLowerCase()"
></abilities>

39
src/viktor/anatomy.md
View file

@ -2,30 +2,18 @@
eleventyNavigation:
key: Anatomy
order: 2
refs:
viktorRef:
src: ref-SFW.png
alt: Viktor Ref
artist: sabertoofs
href: https://bsky.app/profile/sabertoofs.bsky.social
viktorPinup:
src: pinup-SFW.png
alt: Viktor Ref
artist: sabertoofs
href: https://bsky.app/profile/sabertoofs.bsky.social
---
<ref-img
:char="firstName.toLowerCase()"
:src="refs.viktorRef.src"
:alt="refs.viktorRef.alt"
:artist="refs.viktorRef.artist"
:href="refs.viktorRef.href"
:dropshadow="true"
webc:nokeep
src="ref-SFW.png"
alt="Viktor Ref"
artist="sabertoofs"
href="https://bsky.app/profile/sabertoofs.bsky.social"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
<colors :colors="getColors()" webc:nokeep></colors>
<colors :@colors="$data.getColors()"></colors>
Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly bicolored, with several shades of brown.
@ -34,13 +22,12 @@ His forehead, nose, chest, belly and crotch are of light desert sand colors that
His cheeks, shoulders, back and thighs, in contrast, stand out with a rich walnut brown, which is also found on the sides of his tail. From the back of his head, down his spine and across the top of his tail is a continuous strip of deep dark cedar brown. Arms and legs are distinguished by a light earthy brown.
<ref-img
:char="firstName.toLowerCase()"
:src="refs.viktorPinup.src"
:alt="refs.viktorPinup.alt"
:artist="refs.viktorPinup.artist"
:href="refs.viktorPinup.href"
:dropshadow="true"
webc:nokeep
src="pinup-SFW.png"
alt="Viktor Ref"
artist="sabertoofs"
href="https://bsky.app/profile/sabertoofs.bsky.social"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
></ref-img>
His entire body is speckled with scattered aquamarine spots, which come in pairs of one large and one small spot. The only exceptions are the spots on his cheeks and behind his lower cheek horns, which come in threes and his the top side of his snout, which sports a big single spot. Mouth, tongue, nostrils and any other tissue of his body also feature this color.

2
src/viktor/career.md
View file

@ -7,4 +7,4 @@ eleventyNavigation:
Viktor's had many different jobs in the past, some of which where very formative, other's just
paid the bills.
<timeline :@jobs="jobs" webc:nokeep></timeline>
<timeline :@jobs="jobs"></timeline>

4
src/viktor/index.md
View file

@ -14,8 +14,8 @@ Viktor prefers to keep it simple. He's not particularly fond of the dependence o
## Sexuality
<quick-info webc:nokeep>
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
<quick-info>
<traits :@traits="$data.getTraits('naughty')"></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.