Compare commits
3 commits
54b3304f2f
...
aa410f916a
| Author | SHA1 | Date | |
|---|---|---|---|
|
aa410f916a | ||
|
|
c0b42b82d0 | ||
|
|
a98028b880 |
31 changed files with 1396 additions and 1417 deletions
|
|
@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
|
||||||
);
|
);
|
||||||
|
|
||||||
eleventyConfig.addPlugin(eleventyPluginWebc, {
|
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(eleventyPluginNavigation);
|
||||||
eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);
|
eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<figure class="ability" webc:for="ability of abilities">
|
<figure webc:for="ability of abilities" webc:root="override">
|
||||||
<eleventy-image
|
<eleventy-image
|
||||||
webc:if="img"
|
webc:if="img"
|
||||||
class="image"
|
class="image"
|
||||||
|
|
@ -8,14 +8,14 @@
|
||||||
sizes="(min-width: 64em) 500px, 250px"
|
sizes="(min-width: 64em) 500px, 250px"
|
||||||
></eleventy-image
|
></eleventy-image
|
||||||
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
|
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
|
||||||
<figcaption class="caption">
|
<figcaption>
|
||||||
<p class="title" @text="ability.name"></p>
|
<p @text="ability.name"></p>
|
||||||
<p class="description" @text="ability.description"></p>
|
<p @text="ability.description"></p>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="ability">
|
||||||
.ability {
|
:host {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template:
|
grid-template:
|
||||||
'image' 15em
|
'image' 15em
|
||||||
|
|
@ -29,42 +29,43 @@
|
||||||
@media (min-width: 45em) {
|
@media (min-width: 45em) {
|
||||||
grid-template: 'image caption' 1fr / 15em 1fr;
|
grid-template: 'image caption' 1fr / 15em 1fr;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& .image,
|
:host :where(.image, .no-image) {
|
||||||
& .no-image {
|
grid-area: image;
|
||||||
grid-area: image;
|
display: grid;
|
||||||
display: grid;
|
place-items: center;
|
||||||
place-items: center;
|
width: 15em;
|
||||||
width: 15em;
|
height: 15em;
|
||||||
height: 15em;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .image {
|
:host .image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .no-image {
|
:host .no-image {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
border: 0.125em dashed var(--clr-box-border);
|
border: 0.125em dashed var(--clr-box-border);
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .caption {
|
:host figcaption {
|
||||||
grid-area: caption;
|
grid-area: caption;
|
||||||
}
|
|
||||||
|
|
||||||
& .title {
|
display: grid;
|
||||||
font-family: var(--font-family-headings);
|
gap: 0.5em;
|
||||||
font-size: 1.5em;
|
}
|
||||||
font-weight: bold;
|
|
||||||
margin-block: 0;
|
|
||||||
|
|
||||||
& + .description {
|
:host figcaption p {
|
||||||
margin-block: 0.5em 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
:host figcaption p:first-child {
|
||||||
|
font-family: var(--font-family-headings);
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<a class="character-card" :href="href" :class="char">
|
<a :href="href" :class="char" webc:root="override">
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<slot name="image"></slot>
|
<slot name="image"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="character-card">
|
||||||
.character-card {
|
:host {
|
||||||
display: grid;
|
display: grid;
|
||||||
align-content: start;
|
align-content: start;
|
||||||
|
|
||||||
|
|
@ -23,61 +23,59 @@
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
:host:hover img {
|
||||||
img {
|
scale: 1.1;
|
||||||
scale: 1.1;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .image {
|
:host .image {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
aspect-ratio: 3/2;
|
aspect-ratio: 3/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
& img {
|
:host img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
scale: 1;
|
scale: 1;
|
||||||
transition: scale 0.2s ease-in-out;
|
transition: scale 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .text {
|
:host .text {
|
||||||
--card-spacing: 1.5rem;
|
--card-spacing: 1.5rem;
|
||||||
padding-block: var(--card-spacing);
|
padding-block: var(--card-spacing);
|
||||||
padding-inline: var(--card-spacing);
|
padding-inline: var(--card-spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
& h2 {
|
:host h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
margin-block: 0 0.5em;
|
margin-block: 0 0.5em;
|
||||||
padding-block: 0 0.5em;
|
padding-block: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
:host h2::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 0.125em;
|
height: 0.125em;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
:host p {
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
|
}
|
||||||
|
|
||||||
& + p {
|
:host p ~ p {
|
||||||
margin-block: 1em 0;
|
margin-block: 1em 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<ul class="character-colors">
|
<ul webc:root="override">
|
||||||
<li class="color" webc:for="color of colors">
|
<li class="color" webc:for="color of colors">
|
||||||
<div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
|
<div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
|
||||||
<p class="heading" @text="color.name"></p>
|
<p class="heading" @text="color.name"></p>
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="character-colors">
|
||||||
.character-colors {
|
:host {
|
||||||
--columns: repeat(auto-fit, minmax(15em, 1fr));
|
--columns: repeat(auto-fit, minmax(15em, 1fr));
|
||||||
--clearance: 0.25rem;
|
--clearance: 0.25rem;
|
||||||
--color-box-size: calc(var(--clearance) * 14);
|
--color-box-size: calc(var(--clearance) * 14);
|
||||||
|
|
@ -23,63 +23,62 @@
|
||||||
--color-box-size: 5em;
|
--color-box-size: 5em;
|
||||||
--columns: repeat(auto-fit, minmax(8em, 1fr));
|
--columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& .color {
|
:host .color {
|
||||||
--areas: 'color heading' 'color value';
|
--areas: 'color heading' 'color value';
|
||||||
--rows: repeat(2, 1fr);
|
--rows: repeat(2, 1fr);
|
||||||
--columns: var(--color-box-size) 1fr;
|
--columns: var(--color-box-size) 1fr;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas: var(--areas);
|
grid-template-areas: var(--areas);
|
||||||
grid-template-rows: var(--rows);
|
grid-template-rows: var(--rows);
|
||||||
grid-template-columns: var(--columns);
|
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: var(--border-thin) solid var(--clr-box-border);
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
|
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
|
||||||
@media (min-width: 35em) {
|
@media (min-width: 35em) {
|
||||||
--areas: 'color' 'heading' 'value';
|
--areas: 'color' 'heading' 'value';
|
||||||
--rows: var(--color-box-size) 1fr auto;
|
--rows: var(--color-box-size) 1fr auto;
|
||||||
--columns: 1fr;
|
--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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
: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>
|
</style>
|
||||||
|
|
|
||||||
29
src/components/head/page-head-base.webc
Normal file
29
src/components/head/page-head-base.webc
Normal 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
130
src/components/head/page-head-colors.webc
Normal 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
504
src/components/head/page-head-fonts.webc
Normal 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
32
src/components/head/page-head-style.webc
Normal 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>
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
<nav class="character-nav" :aria-label="label">
|
<nav :aria-label="label" webc:root="override">
|
||||||
<label for="nav-toggle">
|
<label for="nav-toggle">
|
||||||
<icon icon="bars" webc:nokeep></icon>
|
<icon icon="bars"></icon>
|
||||||
</label>
|
</label>
|
||||||
<input type="checkbox" id="nav-toggle" />
|
<input type="checkbox" id="nav-toggle" />
|
||||||
<template
|
<template
|
||||||
webc:nokeep
|
webc:nokeep
|
||||||
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
|
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
|
||||||
listClass: 'list',
|
listClass: 'list',
|
||||||
listItemClass: 'item',
|
listItemClass: 'item',
|
||||||
listItemHasChildrenClass: 'hasChildren',
|
listItemHasChildrenClass: 'hasChildren',
|
||||||
activeListItemClass: 'item-active',
|
activeListItemClass: 'item-active',
|
||||||
|
|
||||||
anchorClass: 'link',
|
anchorClass: 'link',
|
||||||
activeAnchorClass: 'link-active',
|
activeAnchorClass: 'link-active',
|
||||||
|
|
||||||
activeKey: $data.eleventyNavigation.key,
|
activeKey: $data.eleventyNavigation.key,
|
||||||
|
|
||||||
showExcerpt: false
|
showExcerpt: false
|
||||||
})"
|
})"
|
||||||
></template>
|
></template>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="character-nav">
|
||||||
.character-nav {
|
:host {
|
||||||
--nav-spacing: 1em;
|
--nav-spacing: 1em;
|
||||||
--nav-background-color: var(--clr-nav-background);
|
--nav-background-color: var(--clr-nav-background);
|
||||||
--nav-border: var(--border-thin) solid var(--clr-box-border);
|
--nav-border: var(--border-thin) solid var(--clr-box-border);
|
||||||
|
|
@ -48,99 +48,97 @@
|
||||||
@media (min-width: 64em) {
|
@media (min-width: 64em) {
|
||||||
--nav-spacing: 2em;
|
--nav-spacing: 2em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:has(#nav-toggle:checked) {
|
:host:has(#nav-toggle:checked) .list {
|
||||||
& .list {
|
opacity: 1;
|
||||||
opacity: 1;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .item {
|
:host:has(#nav-toggle:checked) .item {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& label[for='nav-toggle'] {
|
:host label[for='nav-toggle'] {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
margin-block: 0.75em;
|
margin-block: 0.75em;
|
||||||
margin-inline: 1em;
|
margin-inline: 1em;
|
||||||
|
|
||||||
&:hover {
|
@media (min-width: 35em) {
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 35em) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& #nav-toggle {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& .list {
|
:host label[for='nav-toggle']:hover {
|
||||||
--nav-items-position: absolute;
|
cursor: pointer;
|
||||||
--nav-items-orientation: column nowrap;
|
}
|
||||||
|
|
||||||
position: var(--nav-items-position);
|
:host #nav-toggle {
|
||||||
top: 3em;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
display: flex;
|
:host .list {
|
||||||
flex-flow: var(--nav-items-orientation);
|
--nav-items-position: absolute;
|
||||||
|
--nav-items-orientation: column nowrap;
|
||||||
|
|
||||||
text-align: end;
|
position: var(--nav-items-position);
|
||||||
list-style: none;
|
top: 3em;
|
||||||
|
|
||||||
background-color: var(--clr-nav-background);
|
display: flex;
|
||||||
|
flex-flow: var(--nav-items-orientation);
|
||||||
|
|
||||||
margin: 0;
|
text-align: end;
|
||||||
border: var(--border-thin) solid var(--clr-nav-border);
|
list-style: none;
|
||||||
border-block-start: none;
|
|
||||||
border-inline-end: none;
|
|
||||||
border-end-start-radius: 0.75em;
|
|
||||||
padding-inline: var(--nav-spacing);
|
|
||||||
|
|
||||||
z-index: 3;
|
background-color: var(--clr-nav-background);
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.4s ease-in-out;
|
|
||||||
|
|
||||||
@media (min-width: 35em) {
|
margin: 0;
|
||||||
--nav-items-position: static;
|
border: var(--border-thin) solid var(--clr-nav-border);
|
||||||
--nav-items-orientation: row nowrap;
|
border-block-start: none;
|
||||||
align-items: start;
|
border-inline-end: none;
|
||||||
gap: 1em;
|
border-end-start-radius: 0.75em;
|
||||||
opacity: 1;
|
padding-inline: var(--nav-spacing);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .item {
|
z-index: 3;
|
||||||
overflow: hidden;
|
opacity: 0;
|
||||||
height: 0;
|
transition: opacity 0.4s ease-in-out;
|
||||||
transition: height 0.4s ease-in-out;
|
|
||||||
|
|
||||||
@media (min-width: 35em) {
|
@media (min-width: 35em) {
|
||||||
height: 100%;
|
--nav-items-position: static;
|
||||||
}
|
--nav-items-orientation: row nowrap;
|
||||||
}
|
align-items: start;
|
||||||
|
gap: 1em;
|
||||||
& .link {
|
opacity: 1;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
: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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<section class="page-content">
|
<section webc:root="override">
|
||||||
<navigation label="Character" page :collection="char" webc:nokeep></navigation>
|
<navigation label="Character" :collection="char"></navigation>
|
||||||
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="page-content">
|
||||||
.page-content {
|
:host {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background-color: var(--clr-box-background);
|
background-color: var(--clr-box-background);
|
||||||
|
|
@ -13,55 +13,55 @@
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
& :where(h1, h2, h3, h4, h5, h6) {
|
:host :where(h1, h2, h3, h4, h5, h6) {
|
||||||
--heading-spacing: 0.25em;
|
--heading-spacing: 0.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-block: 0 var(--heading-spacing);
|
margin-block: 0 var(--heading-spacing);
|
||||||
padding-block: 0 var(--heading-spacing);
|
padding-block: 0 var(--heading-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
:host :where(h1, h2, h3, h4, h5, h6)::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 0.125em;
|
height: 0.125em;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& h1 {
|
:host h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& h2 {
|
:host h2 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
:host p {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
& article a {
|
:host article a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-underline-offset: 0.1875em;
|
text-underline-offset: 0.1875em;
|
||||||
text-decoration-thickness: 0.125em;
|
text-decoration-thickness: 0.125em;
|
||||||
text-decoration-skip-ink: all;
|
text-decoration-skip-ink: all;
|
||||||
text-decoration-color: var(--clr-link-underline);
|
text-decoration-color: var(--clr-link-underline);
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
:host article a:hover {
|
||||||
color: var(--clr-link);
|
color: var(--clr-link);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<aside class="profile">
|
<aside webc:root="override">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<slot name="avatar"></slot>
|
<slot name="avatar"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -11,8 +11,8 @@
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="profile">
|
||||||
.profile {
|
:host {
|
||||||
--sidebar-position: static;
|
--sidebar-position: static;
|
||||||
--sidebar-padding: 1rem;
|
--sidebar-padding: 1rem;
|
||||||
--sidebar-grid-columns: auto 1fr;
|
--sidebar-grid-columns: auto 1fr;
|
||||||
|
|
@ -45,45 +45,44 @@
|
||||||
--sidebar-top-text-align: center;
|
--sidebar-top-text-align: center;
|
||||||
--sidebar-avatar-size: 10em;
|
--sidebar-avatar-size: 10em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& .avatar {
|
:host .avatar {
|
||||||
grid-area: avatar;
|
grid-area: avatar;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
|
|
||||||
& img {
|
& img {
|
||||||
width: var(--sidebar-avatar-size);
|
width: var(--sidebar-avatar-size);
|
||||||
height: var(--sidebar-avatar-size);
|
height: var(--sidebar-avatar-size);
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
object-fit: cover;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
: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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<div class="quick-info">
|
<div webc:root="override">
|
||||||
<h3 class="title">Key Facts</h3>
|
<h3 class="title">Key Facts</h3>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="quick-info">
|
||||||
.quick-info {
|
:host {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom right,
|
to bottom right,
|
||||||
|
|
@ -19,26 +19,26 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
:host::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: var(--border-thin);
|
inset: var(--border-thin);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom right,
|
to bottom right,
|
||||||
var(--clr-quick-info-bg-start) 0%,
|
var(--clr-quick-info-bg-start) 0%,
|
||||||
var(--clr-quick-info-bg-end) 50%
|
var(--clr-quick-info-bg-end) 50%
|
||||||
);
|
);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .title {
|
:host .title {
|
||||||
margin-block: 0 1em;
|
margin-block: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > :last-child {
|
:host > :last-child {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,20 @@
|
||||||
|
|
||||||
const TOLERANCE = 2;
|
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 isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
|
||||||
const isAtEnd = () => {
|
const isAtEnd = () => {
|
||||||
const { scrollLeft, offsetWidth, scrollWidth } = track;
|
const { scrollLeft, offsetWidth, scrollWidth } = track;
|
||||||
|
|
@ -41,12 +55,7 @@
|
||||||
const prev = () => scrollToIndex(currentIndex - 1);
|
const prev = () => scrollToIndex(currentIndex - 1);
|
||||||
const next = () => scrollToIndex(currentIndex + 1);
|
const next = () => scrollToIndex(currentIndex + 1);
|
||||||
|
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
|
||||||
clearTimeout(resizeTimeout);
|
|
||||||
resizeTimeout = setTimeout(() => {
|
|
||||||
scrollToIndex(currentIndex);
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
resizeObserver.observe(track);
|
resizeObserver.observe(track);
|
||||||
|
|
||||||
const galleryObserver = new IntersectionObserver(
|
const galleryObserver = new IntersectionObserver(
|
||||||
|
|
@ -89,15 +98,16 @@
|
||||||
images.forEach((el) => galleryObserver.observe(el));
|
images.forEach((el) => galleryObserver.observe(el));
|
||||||
prevButton.addEventListener('click', prev);
|
prevButton.addEventListener('click', prev);
|
||||||
nextButton.addEventListener('click', next);
|
nextButton.addEventListener('click', next);
|
||||||
|
track.addEventListener('scroll', () => debounce(updateActiveStates(currentIndex)));
|
||||||
document.addEventListener('DOMContentLoaded', () => initializeGallery());
|
document.addEventListener('DOMContentLoaded', () => initializeGallery());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="gallery" aria-label="Image gallery">
|
<section aria-label="Image gallery" webc:root="override">
|
||||||
<button class="prev" aria-label="Previous Image">
|
<button class="prev" aria-label="Previous Image">
|
||||||
<icon icon="chevron-left" webc:nokeep></icon>
|
<icon icon="chevron-left"></icon>
|
||||||
</button>
|
</button>
|
||||||
<button class="next" aria-label="Next Image">
|
<button class="next" aria-label="Next Image">
|
||||||
<icon icon="chevron-right" webc:nokeep></icon>
|
<icon icon="chevron-right"></icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="track">
|
<div class="track">
|
||||||
|
|
@ -107,8 +117,8 @@
|
||||||
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="gallery">
|
||||||
.gallery {
|
:host {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-columns: auto 1fr auto;
|
grid-auto-columns: auto 1fr auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
|
|
@ -116,152 +126,147 @@
|
||||||
'. progress .';
|
'. progress .';
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
& .prev,
|
:host :where(.prev, .next, .indicator-btn) {
|
||||||
& .next,
|
position: relative;
|
||||||
& .indicator-btn {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
color: var(--clr-text);
|
color: var(--clr-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom right,
|
to bottom right,
|
||||||
var(--clr-box-gradient-start) 0%,
|
var(--clr-box-gradient-start) 0%,
|
||||||
var(--clr-box-gradient-end) 50%
|
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: none;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
padding: 0.875em;
|
padding: 0.875em;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&:active::after {
|
:host :where(.prev, .next, .indicator-btn):active::after {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top left,
|
to top left,
|
||||||
var(--clr-quick-info-bg-start) 0%,
|
var(--clr-quick-info-bg-start) 0%,
|
||||||
var(--clr-quick-info-bg-end) 50%
|
var(--clr-quick-info-bg-end) 50%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
:host :where(.prev, .next, .indicator-btn)::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: var(--border-thin);
|
inset: var(--border-thin);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom right,
|
to bottom right,
|
||||||
var(--clr-quick-info-bg-start) 0%,
|
var(--clr-quick-info-bg-start) 0%,
|
||||||
var(--clr-quick-info-bg-end) 50%
|
var(--clr-quick-info-bg-end) 50%
|
||||||
);
|
);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .prev,
|
:host :where(.prev, .next) {
|
||||||
& .next {
|
grid-row: track;
|
||||||
grid-row: track;
|
}
|
||||||
|
|
||||||
&:disabled {
|
:host :where(.prev, .next):disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
& svg {
|
:host :where(.prev, .next) svg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
padding: 0.375em;
|
padding: 0.375em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .prev {
|
:host .prev {
|
||||||
grid-column: prev;
|
grid-column: prev;
|
||||||
left: 0.5em;
|
left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .next {
|
:host .next {
|
||||||
grid-column: next;
|
grid-column: next;
|
||||||
right: 0.5em;
|
right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .track {
|
:host .track {
|
||||||
grid-row: track;
|
grid-row: track;
|
||||||
grid-column: prev / next;
|
grid-column: prev / next;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-auto-columns: 100%;
|
grid-auto-columns: 100%;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
|
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scroll-snap-type: x mandatory;
|
scroll-snap-type: x mandatory;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
& > * {
|
:host .track > * {
|
||||||
scroll-snap-align: center;
|
scroll-snap-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
:host .track::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .ref-image {
|
:host .ref-image :first-child {
|
||||||
& :first-child {
|
grid-row: image / caption;
|
||||||
grid-row: image / caption;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& img {
|
:host .ref-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80vw;
|
height: 80vw;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .caption {
|
:host .ref-image .caption {
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
text-wrap: balance;
|
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-block: 0.5em;
|
||||||
padding-inline: 1em;
|
padding-inline: 1em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .gallery-nav {
|
:host .gallery-nav {
|
||||||
--indicator-size: 2.5em;
|
--indicator-size: 2.5em;
|
||||||
|
|
||||||
grid-row: progress;
|
grid-row: progress;
|
||||||
grid-column: prev / next;
|
grid-column: prev / next;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .indicator-btn {
|
:host .indicator-btn {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
width: var(--indicator-size);
|
width: var(--indicator-size);
|
||||||
height: var(--indicator-size);
|
height: var(--indicator-size);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .indicator-btn[aria-current='true']::after {
|
:host .indicator-btn[aria-current='true']::after {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top left,
|
to top left,
|
||||||
var(--clr-quick-info-bg-start) 0%,
|
var(--clr-quick-info-bg-start) 0%,
|
||||||
var(--clr-quick-info-bg-end) 50%
|
var(--clr-quick-info-bg-end) 50%
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<figure class="ref-image">
|
<figure webc:root="override">
|
||||||
<eleventy-image
|
<eleventy-image
|
||||||
class="image"
|
class="image"
|
||||||
:class="(dropshadow ? 'dropshadow' : '')"
|
:class="(dropshadow ? 'dropshadow' : '')"
|
||||||
|
|
@ -14,8 +14,8 @@
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="ref-image">
|
||||||
.ref-image {
|
:host {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
||||||
place-content: center;
|
place-content: center;
|
||||||
|
|
@ -24,26 +24,27 @@
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
||||||
& :first-child {
|
}
|
||||||
grid-area: image;
|
|
||||||
}
|
|
||||||
|
|
||||||
& img {
|
:host :first-child {
|
||||||
display: block;
|
grid-area: image;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
max-height: 35rem;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .dropshadow {
|
:host img {
|
||||||
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
display: block;
|
||||||
}
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 35rem;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
& .caption {
|
:host .dropshadow {
|
||||||
grid-area: caption;
|
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
||||||
text-align: center;
|
}
|
||||||
}
|
|
||||||
|
:host .caption {
|
||||||
|
grid-area: caption;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<ul class="timeline">
|
<ul webc:root="override">
|
||||||
<li class="job" webc:for="job of jobs">
|
<li class="job" webc:for="job of jobs">
|
||||||
<icon class="icon" :icon="job.icon"></icon>
|
<icon class="icon" :icon="job.icon"></icon>
|
||||||
<p class="title" @text="job.title"></p>
|
<p class="title" @text="job.title"></p>
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="timeline">
|
||||||
.timeline {
|
:host {
|
||||||
--timeline-circle-size: 3rem;
|
--timeline-circle-size: 3rem;
|
||||||
--timeline-circle-background: var(--clr-box-background);
|
--timeline-circle-background: var(--clr-box-background);
|
||||||
--timeline-stroke-color: var(--clr-timeline-stroke);
|
--timeline-stroke-color: var(--clr-timeline-stroke);
|
||||||
|
|
@ -20,70 +20,72 @@
|
||||||
--timeline-circle-size: 4rem;
|
--timeline-circle-size: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .job {
|
}
|
||||||
display: grid;
|
|
||||||
grid-template-areas:
|
|
||||||
'icon title'
|
|
||||||
'line text';
|
|
||||||
column-gap: 1em;
|
|
||||||
|
|
||||||
&::before {
|
:host .job {
|
||||||
content: '';
|
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);
|
:host .job::before {
|
||||||
height: 100%;
|
content: '';
|
||||||
|
|
||||||
background-color: var(--timeline-stroke-color);
|
grid-row: icon / line;
|
||||||
}
|
grid-column: line;
|
||||||
|
justify-self: center;
|
||||||
|
|
||||||
&:first-child::before {
|
width: var(--timeline-stroke-thickness);
|
||||||
align-self: end;
|
height: 100%;
|
||||||
height: calc(100% - var(--timeline-circle-size));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child::before {
|
background-color: var(--timeline-stroke-color);
|
||||||
grid-row: icon;
|
}
|
||||||
align-self: start;
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .icon {
|
:host .job:first-child::before {
|
||||||
grid-area: icon;
|
align-self: end;
|
||||||
align-self: center;
|
height: calc(100% - var(--timeline-circle-size));
|
||||||
|
}
|
||||||
|
|
||||||
width: var(--timeline-circle-size);
|
:host .job:last-child::before {
|
||||||
height: var(--timeline-circle-size);
|
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);
|
width: var(--timeline-circle-size);
|
||||||
border-radius: 100%;
|
height: var(--timeline-circle-size);
|
||||||
padding: calc(var(--timeline-circle-size) * 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .title {
|
background-color: var(--timeline-circle-background);
|
||||||
grid-area: title;
|
|
||||||
align-self: center;
|
|
||||||
|
|
||||||
font-family: var(--font-family-headings);
|
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
|
||||||
font-size: calc(var(--timeline-circle-size) / 2);
|
border-radius: 100%;
|
||||||
font-weight: bold;
|
padding: calc(var(--timeline-circle-size) * 0.2);
|
||||||
text-align: start;
|
}
|
||||||
margin-block: calc(var(--timeline-circle-size) / 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .text {
|
:host .title {
|
||||||
grid-area: text;
|
grid-area: title;
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
margin-inline: 0;
|
font-family: var(--font-family-headings);
|
||||||
margin-block: 0;
|
font-size: calc(var(--timeline-circle-size) / 2);
|
||||||
line-height: 1.5;
|
font-weight: bold;
|
||||||
text-align: justify;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<ul class="trait-list">
|
<ul webc:root="override">
|
||||||
<li class="trait" webc:for="trait of traits">
|
<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="type" @text="trait.type"></p>
|
||||||
<p class="text" @text="trait.text"></p>
|
<p class="text" @text="trait.text"></p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<style>
|
<style webc:scoped="trait-list">
|
||||||
.trait-list {
|
:host {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
|
||||||
gap: 0.75em;
|
gap: 0.75em;
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trait {
|
:host .trait {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'icon type'
|
'icon type'
|
||||||
|
|
@ -25,57 +25,59 @@
|
||||||
column-gap: 0.75em;
|
column-gap: 0.75em;
|
||||||
justify-items: start;
|
justify-items: start;
|
||||||
|
|
||||||
& .icon-box {
|
}
|
||||||
position: relative;
|
|
||||||
grid-area: icon;
|
|
||||||
|
|
||||||
width: 2em;
|
:host .icon-box {
|
||||||
height: 2em;
|
position: relative;
|
||||||
|
grid-area: icon;
|
||||||
|
|
||||||
background: linear-gradient(
|
width: 2em;
|
||||||
to bottom right,
|
height: 2em;
|
||||||
var(--clr-box-gradient-start) 0%,
|
|
||||||
var(--clr-box-gradient-end) 50%
|
|
||||||
);
|
|
||||||
|
|
||||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
background: linear-gradient(
|
||||||
border-radius: 0.5em;
|
to bottom right,
|
||||||
overflow: hidden;
|
var(--clr-box-gradient-start) 0%,
|
||||||
z-index: 1;
|
var(--clr-box-gradient-end) 50%
|
||||||
|
);
|
||||||
|
|
||||||
&::before {
|
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||||
content: '';
|
border-radius: 0.5em;
|
||||||
position: absolute;
|
overflow: hidden;
|
||||||
inset: var(--border-thin);
|
z-index: 1;
|
||||||
background-color: var(--clr-box-background);
|
|
||||||
border-radius: inherit;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& svg {
|
}
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
:host .icon-box::before {
|
||||||
margin-block: 0;
|
content: '';
|
||||||
}
|
position: absolute;
|
||||||
|
inset: var(--border-thin);
|
||||||
|
background-color: var(--clr-box-background);
|
||||||
|
border-radius: inherit;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
& .type {
|
:host svg {
|
||||||
font-size: 0.625em;
|
padding: 0.5em;
|
||||||
color: var(--clr-heading-data);
|
}
|
||||||
text-align: left;
|
|
||||||
text-transform: uppercase;
|
|
||||||
grid-area: type;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .text {
|
:host p {
|
||||||
font-size: 0.75em;
|
margin-block: 0;
|
||||||
text-align: left;
|
}
|
||||||
margin-block: 0;
|
|
||||||
margin-inline: 0;
|
:host .type {
|
||||||
color: var(--clr-text);
|
font-size: 0.625em;
|
||||||
grid-area: data;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="characters">
|
<div class="characters">
|
||||||
<card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
|
<card webc:for="char of characters" :href="`/${char}/`">
|
||||||
<eleventy-image
|
<eleventy-image
|
||||||
slot="image"
|
slot="image"
|
||||||
:src="getAvatar(char)"
|
:src="getAvatar(char)"
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,4 @@ eleventyNavigation:
|
||||||
|
|
||||||
Jarek's color palette:
|
Jarek's color palette:
|
||||||
|
|
||||||
<colors :colors="getColors()" webc:nokeep></colors>
|
<colors :@colors="$data.getColors()"></colors>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,12 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Character Ref</title>
|
<title>Character Ref</title>
|
||||||
<link rel="stylesheet" href="../css/base.css" />
|
|
||||||
<link rel="stylesheet" href="../css/fonts.css" />
|
<template webc:is="page-head-base" webc:nokeep></template>
|
||||||
<link rel="stylesheet" href="../css/colors.css" />
|
<template webc:is="page-head-fonts" webc:nokeep></template>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<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 />
|
<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
|
||||||
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
|
<script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ layout: base.webc
|
||||||
---
|
---
|
||||||
|
|
||||||
<main :class="firstName.toLowerCase()">
|
<main :class="firstName.toLowerCase()">
|
||||||
<profile webc:nokeep>
|
<profile>
|
||||||
<eleventy-image
|
<eleventy-image
|
||||||
slot="avatar"
|
slot="avatar"
|
||||||
:src="`src/img/${firstName.toLowerCase()}/avatar.png`"
|
:src="`src/img/${firstName.toLowerCase()}/avatar.png`"
|
||||||
|
|
@ -12,10 +12,10 @@ layout: base.webc
|
||||||
></eleventy-image>
|
></eleventy-image>
|
||||||
<template webc:nokeep slot="name" @text="getFullName()"></template>
|
<template webc:nokeep slot="name" @text="getFullName()"></template>
|
||||||
<template webc:nokeep slot="species" @text="species"></template>
|
<template webc:nokeep slot="species" @text="species"></template>
|
||||||
<traits :traits="getTraits()" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits()"></traits>
|
||||||
</profile>
|
</profile>
|
||||||
|
|
||||||
<page-content :char="firstName.toLowerCase()" webc:nokeep>
|
<page-content :@char="$data.firstName.toLowerCase()">
|
||||||
<h1 @text="$data.eleventyNavigation.key"></h1>
|
<h1 @text="$data.eleventyNavigation.key"></h1>
|
||||||
<article @raw="content"></article>
|
<article @raw="content"></article>
|
||||||
</page-content>
|
</page-content>
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,8 @@ Since Sebin is a fire dragon there's a myriad of abilities he has at his disposa
|
||||||
|
|
||||||
## Attacks
|
## Attacks
|
||||||
|
|
||||||
<abilities :abilities="attacks" :img="true" :char="firstName.toLowerCase()" webc:nokeep></abilities>
|
<abilities
|
||||||
|
:@abilities="attacks"
|
||||||
|
:@img="true"
|
||||||
|
:@char="$data.firstName.toLowerCase()"
|
||||||
|
></abilities>
|
||||||
|
|
|
||||||
|
|
@ -2,27 +2,6 @@
|
||||||
eleventyNavigation:
|
eleventyNavigation:
|
||||||
key: Anatomy
|
key: Anatomy
|
||||||
order: 2
|
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: [
|
gallery: [
|
||||||
{
|
{
|
||||||
alt: Sebin looking aloof (but chill),
|
alt: Sebin looking aloof (but chill),
|
||||||
|
|
@ -73,20 +52,19 @@ gallery: [
|
||||||
---
|
---
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-front.png"
|
||||||
:src="refs.sebinFront.src"
|
alt="Sebin Ref"
|
||||||
:alt="refs.sebinFront.alt"
|
artist="draftgon"
|
||||||
:width="[1000]"
|
href="https://bsky.app/profile/draftgon.bsky.social"
|
||||||
:artist="refs.sebinFront.artist"
|
:width="[1000]"
|
||||||
:href="refs.sebinFront.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
<colors :colors="getColors()" webc:nokeep></colors>
|
<colors :@colors="$data.getColors()"></colors>
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('general')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('general')"></traits>
|
||||||
</quick-info>
|
</quick-info>
|
||||||
|
|
||||||
Sebin is the offspring of a human and a dragon. Like a human, he is a bipedal plantigrade. Most of his body is covered with red scales. Yellow scales run from the underside of his jaw over his chest and legs to the underside of the tip of his tail. These scales are particularly hard and function like plate armor to better protect vital organs.
|
Sebin 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
|
## Wings
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-back.png"
|
||||||
:src="refs.sebinBack.src"
|
alt="Sebin Ref"
|
||||||
:alt="refs.sebinBack.alt"
|
artist="draftgon"
|
||||||
:width="[1000]"
|
href="https://bsky.app/profile/draftgon.bsky.social"
|
||||||
:artist="refs.sebinBack.artist"
|
:width="[1000]"
|
||||||
:href="refs.sebinBack.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('wings')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('wings')"></traits>
|
||||||
</quick-info>
|
</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.
|
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
|
## Head
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-expressions.png"
|
||||||
:src="refs.sebinExpressions.src"
|
alt="Sebin's expressions"
|
||||||
:alt="refs.sebinExpressions.alt"
|
artist="draftgon"
|
||||||
:width="[1000]"
|
href="https://bsky.app/profile/draftgon.bsky.social"
|
||||||
:artist="refs.sebinExpressions.artist"
|
:width="[1000]"
|
||||||
:href="refs.sebinExpressions.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('head')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('head')"></traits>
|
||||||
</quick-info>
|
</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).
|
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
|
## Upper body
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-upper-body.png"
|
||||||
:src="refs.sebinUpperBody.src"
|
alt="Sebin's upper body closeup"
|
||||||
:alt="refs.sebinUpperBody.alt"
|
artist="Nidhogg"
|
||||||
:width="[1000]"
|
href="https://bsky.app/profile/nidthedragon.bsky.social"
|
||||||
:artist="refs.sebinUpperBody.artist"
|
:width="[1000]"
|
||||||
:href="refs.sebinUpperBody.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('muscle')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('muscle')"></traits>
|
||||||
</quick-info>
|
</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.
|
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.
|
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()]"
|
<ref-img webc:for="ref of [...Array(9).keys()]"
|
||||||
:char="firstName.toLowerCase()"
|
|
||||||
:src="`ref-muscle-${ref + 1}.png`"
|
:src="`ref-muscle-${ref + 1}.png`"
|
||||||
:alt="gallery[ref].alt"
|
:alt="$data.gallery[ref].alt"
|
||||||
:artist="gallery[ref].artist"
|
|
||||||
:href="gallery[ref].href"
|
|
||||||
:width="[500, 1000]"
|
:width="[500, 1000]"
|
||||||
:dropshadow="false"
|
:href="$data.gallery[ref].href"
|
||||||
webc:nokeep
|
:@artist="$data.gallery[ref].artist"
|
||||||
|
:@char="$data.firstName.toLowerCase()"
|
||||||
|
:@dropshadow="false"
|
||||||
></ref-img>
|
></ref-img>
|
||||||
</ref-gallery>
|
</ref-gallery>
|
||||||
|
|
||||||
## Penis
|
## Penis
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-penis.png"
|
||||||
src="ref-penis.png"
|
alt="Sebin's manly parts"
|
||||||
alt="Sebin's manly parts"
|
artist="draftgon"
|
||||||
artist="draftgon"
|
href="https://bsky.app/profile/draftgon.bsky.social"
|
||||||
href="https://bsky.app/profile/draftgon.bsky.social"
|
:width="[500, 1000]"
|
||||||
:width="[500, 1000]"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('naughty')"></traits>
|
||||||
</quick-info>
|
</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.
|
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.
|
||||||
|
|
|
||||||
|
|
@ -28,15 +28,14 @@ gallery: [
|
||||||
|
|
||||||
Sebin knows how to dress!
|
Sebin knows how to dress!
|
||||||
|
|
||||||
<ref-gallery webc:nokeep>
|
<ref-gallery>
|
||||||
<ref-img webc:for="ref of Array(4).keys()"
|
<ref-img webc:for="ref of Array(4).keys()"
|
||||||
:char="firstName.toLowerCase()"
|
|
||||||
:src="`ref-clothes-${ref + 1}.png`"
|
:src="`ref-clothes-${ref + 1}.png`"
|
||||||
:alt="gallery[ref].alt"
|
:alt="$data.gallery[ref].alt"
|
||||||
:artist="gallery[ref].artist"
|
:href="$data.gallery[ref].href"
|
||||||
:href="gallery[ref].href"
|
|
||||||
:width="[500, 1000]"
|
:width="[500, 1000]"
|
||||||
:dropshadow="false"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
webc:nokeep
|
:@artist="$data.gallery[ref].artist"
|
||||||
|
:@dropshadow="false"
|
||||||
></ref-img>
|
></ref-img>
|
||||||
</ref-gallery>
|
</ref-gallery>
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,16 @@
|
||||||
eleventyNavigation:
|
eleventyNavigation:
|
||||||
key: Overdrive
|
key: Overdrive
|
||||||
order: 4
|
order: 4
|
||||||
refs:
|
|
||||||
overdrive:
|
|
||||||
src: ref-overdrive.jpg
|
|
||||||
alt: Sebin Overdrive Ref
|
|
||||||
artist: CVictorrosso
|
|
||||||
href: https://bsky.app/profile/cvictorrosso.bsky.social
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<ref-img
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-overdrive.jpg"
|
||||||
:src="refs.overdrive.src"
|
alt="Sebin Overdrive Ref"
|
||||||
:alt="refs.overdrive.alt"
|
artist="CVictorrosso"
|
||||||
:width="[1000]"
|
href="https://bsky.app/profile/cvictorrosso.bsky.social"
|
||||||
:artist="refs.overdrive.artist"
|
:width="[1000]"
|
||||||
:href="refs.overdrive.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="false"
|
:@dropshadow="false"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></ref-img>
|
||||||
|
|
||||||
Sebin can enter an Overdrive Form which greatly increases his strength and abilities but it comes at a cost.
|
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
|
## Attacks
|
||||||
|
|
||||||
<abilities :abilities="overdriveAttacks" :img="false" :char="firstName.toLowerCase()" webc:nokeep></abilities>
|
<abilities
|
||||||
|
:@abilities="overdriveAttacks"
|
||||||
|
:@img="false"
|
||||||
|
:@char="$data.firstName.toLowerCase()"
|
||||||
|
></abilities>
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,18 @@
|
||||||
eleventyNavigation:
|
eleventyNavigation:
|
||||||
key: Anatomy
|
key: Anatomy
|
||||||
order: 2
|
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
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="ref-SFW.png"
|
||||||
:src="refs.viktorRef.src"
|
alt="Viktor Ref"
|
||||||
:alt="refs.viktorRef.alt"
|
artist="sabertoofs"
|
||||||
:artist="refs.viktorRef.artist"
|
href="https://bsky.app/profile/sabertoofs.bsky.social"
|
||||||
:href="refs.viktorRef.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></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.
|
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.
|
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
|
<ref-img
|
||||||
:char="firstName.toLowerCase()"
|
src="pinup-SFW.png"
|
||||||
:src="refs.viktorPinup.src"
|
alt="Viktor Ref"
|
||||||
:alt="refs.viktorPinup.alt"
|
artist="sabertoofs"
|
||||||
:artist="refs.viktorPinup.artist"
|
href="https://bsky.app/profile/sabertoofs.bsky.social"
|
||||||
:href="refs.viktorPinup.href"
|
:@char="$data.firstName.toLowerCase()"
|
||||||
:dropshadow="true"
|
:@dropshadow="true"
|
||||||
webc:nokeep
|
|
||||||
></ref-img>
|
></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.
|
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.
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,4 @@ eleventyNavigation:
|
||||||
Viktor's had many different jobs in the past, some of which where very formative, other's just
|
Viktor's had many different jobs in the past, some of which where very formative, other's just
|
||||||
paid the bills.
|
paid the bills.
|
||||||
|
|
||||||
<timeline :@jobs="jobs" webc:nokeep></timeline>
|
<timeline :@jobs="jobs"></timeline>
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@ Viktor prefers to keep it simple. He's not particularly fond of the dependence o
|
||||||
|
|
||||||
## Sexuality
|
## Sexuality
|
||||||
|
|
||||||
<quick-info webc:nokeep>
|
<quick-info>
|
||||||
<traits :traits="getTraits('naughty')" webc:nokeep></traits>
|
<traits :@traits="$data.getTraits('naughty')"></traits>
|
||||||
</quick-info>
|
</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.
|
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.
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue