refactor: ♻️ use more of the webc feature set proper
This commit is contained in:
Sebin Nyshkim
parent
c0b42b82d0
commit
aa410f916a
21 changed files with 678 additions and 723 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<figure class="ability" webc:for="ability of abilities">
|
||||
<figure webc:for="ability of abilities" webc:root="override">
|
||||
<eleventy-image
|
||||
webc:if="img"
|
||||
class="image"
|
||||
|
|
@ -8,14 +8,14 @@
|
|||
sizes="(min-width: 64em) 500px, 250px"
|
||||
></eleventy-image
|
||||
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
|
||||
<figcaption class="caption">
|
||||
<p class="title" @text="ability.name"></p>
|
||||
<p class="description" @text="ability.description"></p>
|
||||
<figcaption>
|
||||
<p @text="ability.name"></p>
|
||||
<p @text="ability.description"></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.ability {
|
||||
<style webc:scoped="ability">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template:
|
||||
'image' 15em
|
||||
|
|
@ -29,42 +29,43 @@
|
|||
@media (min-width: 45em) {
|
||||
grid-template: 'image caption' 1fr / 15em 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
& .image,
|
||||
& .no-image {
|
||||
grid-area: image;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
}
|
||||
:host :where(.image, .no-image) {
|
||||
grid-area: image;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
}
|
||||
|
||||
& .image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
:host .image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& .no-image {
|
||||
text-align: center;
|
||||
:host .no-image {
|
||||
text-align: center;
|
||||
|
||||
border: 0.125em dashed var(--clr-box-border);
|
||||
padding: 1em;
|
||||
}
|
||||
border: 0.125em dashed var(--clr-box-border);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
& .caption {
|
||||
grid-area: caption;
|
||||
}
|
||||
:host figcaption {
|
||||
grid-area: caption;
|
||||
|
||||
& .title {
|
||||
font-family: var(--font-family-headings);
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-block: 0;
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
& + .description {
|
||||
margin-block: 0.5em 0;
|
||||
}
|
||||
}
|
||||
:host figcaption p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host figcaption p:first-child {
|
||||
font-family: var(--font-family-headings);
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<a class="character-card" :href="href" :class="char">
|
||||
<a :href="href" :class="char" webc:root="override">
|
||||
<div class="image">
|
||||
<slot name="image"></slot>
|
||||
</div>
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.character-card {
|
||||
<style webc:scoped="character-card">
|
||||
:host {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
|
||||
|
|
@ -23,61 +23,59 @@
|
|||
border-radius: 1em;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
:host:hover img {
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
& .image {
|
||||
overflow: hidden;
|
||||
aspect-ratio: 3/2;
|
||||
}
|
||||
:host .image {
|
||||
overflow: hidden;
|
||||
aspect-ratio: 3/2;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
scale: 1;
|
||||
transition: scale 0.2s ease-in-out;
|
||||
}
|
||||
:host img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
scale: 1;
|
||||
transition: scale 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
& .text {
|
||||
--card-spacing: 1.5rem;
|
||||
padding-block: var(--card-spacing);
|
||||
padding-inline: var(--card-spacing);
|
||||
}
|
||||
:host .text {
|
||||
--card-spacing: 1.5rem;
|
||||
padding-block: var(--card-spacing);
|
||||
padding-inline: var(--card-spacing);
|
||||
}
|
||||
|
||||
& h2 {
|
||||
position: relative;
|
||||
font-size: 1.375rem;
|
||||
margin-block: 0 0.5em;
|
||||
padding-block: 0 0.5em;
|
||||
:host h2 {
|
||||
position: relative;
|
||||
font-size: 1.375rem;
|
||||
margin-block: 0 0.5em;
|
||||
padding-block: 0 0.5em;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0.125em;
|
||||
width: 2em;
|
||||
border-radius: 1em;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||
);
|
||||
}
|
||||
}
|
||||
:host h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0.125em;
|
||||
width: 2em;
|
||||
border-radius: 1em;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||
);
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-block: 0;
|
||||
:host p {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
& + p {
|
||||
margin-block: 1em 0;
|
||||
}
|
||||
}
|
||||
:host p ~ p {
|
||||
margin-block: 1em 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<ul class="character-colors">
|
||||
<ul webc:root="override">
|
||||
<li class="color" webc:for="color of colors">
|
||||
<div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
|
||||
<p class="heading" @text="color.name"></p>
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.character-colors {
|
||||
<style webc:scoped="character-colors">
|
||||
:host {
|
||||
--columns: repeat(auto-fit, minmax(15em, 1fr));
|
||||
--clearance: 0.25rem;
|
||||
--color-box-size: calc(var(--clearance) * 14);
|
||||
|
|
@ -23,63 +23,62 @@
|
|||
--color-box-size: 5em;
|
||||
--columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& .color {
|
||||
--areas: 'color heading' 'color value';
|
||||
--rows: repeat(2, 1fr);
|
||||
--columns: var(--color-box-size) 1fr;
|
||||
:host .color {
|
||||
--areas: 'color heading' 'color value';
|
||||
--rows: repeat(2, 1fr);
|
||||
--columns: var(--color-box-size) 1fr;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: var(--areas);
|
||||
grid-template-rows: var(--rows);
|
||||
grid-template-columns: var(--columns);
|
||||
display: grid;
|
||||
grid-template-areas: var(--areas);
|
||||
grid-template-rows: var(--rows);
|
||||
grid-template-columns: var(--columns);
|
||||
|
||||
background-color: var(--clr-color-box-background);
|
||||
background-color: var(--clr-color-box-background);
|
||||
|
||||
border: var(--border-thin) solid var(--clr-box-border);
|
||||
border-radius: 0.5em;
|
||||
border: var(--border-thin) solid var(--clr-box-border);
|
||||
border-radius: 0.5em;
|
||||
|
||||
overflow: clip;
|
||||
overflow: clip;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
--areas: 'color' 'heading' 'value';
|
||||
--rows: var(--color-box-size) 1fr auto;
|
||||
--columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
& .color-box {
|
||||
grid-area: color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .heading,
|
||||
& .value {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding-block: calc(var(--clearance) * 2);
|
||||
padding-inline: calc(var(--clearance) * 2);
|
||||
}
|
||||
|
||||
& .heading {
|
||||
grid-area: heading;
|
||||
align-self: start;
|
||||
|
||||
font-size: 0.625em;
|
||||
line-height: 1.2;
|
||||
color: var(--clr-heading-data);
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
& .value {
|
||||
grid-area: value;
|
||||
align-self: end;
|
||||
|
||||
font-size: 0.75em;
|
||||
|
||||
padding-block: 0 calc(var(--clearance) * 2);
|
||||
@media (min-width: 35em) {
|
||||
--areas: 'color' 'heading' 'value';
|
||||
--rows: var(--color-box-size) 1fr auto;
|
||||
--columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:host .color-box {
|
||||
grid-area: color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host :where(.heading, .value) {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding-block: calc(var(--clearance) * 2);
|
||||
padding-inline: calc(var(--clearance) * 2);
|
||||
}
|
||||
|
||||
:host .heading {
|
||||
grid-area: heading;
|
||||
align-self: start;
|
||||
|
||||
font-size: 0.625em;
|
||||
line-height: 1.2;
|
||||
text-align: start;
|
||||
color: var(--clr-heading-data);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
:host .value {
|
||||
grid-area: value;
|
||||
align-self: end;
|
||||
|
||||
font-size: 0.75em;
|
||||
|
||||
padding-block: 0 calc(var(--clearance) * 2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
<nav class="character-nav" :aria-label="label">
|
||||
<nav :aria-label="label" webc:root="override">
|
||||
<label for="nav-toggle">
|
||||
<icon icon="bars" webc:nokeep></icon>
|
||||
<icon icon="bars"></icon>
|
||||
</label>
|
||||
<input type="checkbox" id="nav-toggle" />
|
||||
<template
|
||||
webc:nokeep
|
||||
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
|
||||
listClass: 'list',
|
||||
listItemClass: 'item',
|
||||
listItemHasChildrenClass: 'hasChildren',
|
||||
activeListItemClass: 'item-active',
|
||||
listClass: 'list',
|
||||
listItemClass: 'item',
|
||||
listItemHasChildrenClass: 'hasChildren',
|
||||
activeListItemClass: 'item-active',
|
||||
|
||||
anchorClass: 'link',
|
||||
activeAnchorClass: 'link-active',
|
||||
anchorClass: 'link',
|
||||
activeAnchorClass: 'link-active',
|
||||
|
||||
activeKey: $data.eleventyNavigation.key,
|
||||
activeKey: $data.eleventyNavigation.key,
|
||||
|
||||
showExcerpt: false
|
||||
})"
|
||||
showExcerpt: false
|
||||
})"
|
||||
></template>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.character-nav {
|
||||
<style webc:scoped="character-nav">
|
||||
:host {
|
||||
--nav-spacing: 1em;
|
||||
--nav-background-color: var(--clr-nav-background);
|
||||
--nav-border: var(--border-thin) solid var(--clr-box-border);
|
||||
|
|
@ -48,99 +48,97 @@
|
|||
@media (min-width: 64em) {
|
||||
--nav-spacing: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(#nav-toggle:checked) {
|
||||
& .list {
|
||||
opacity: 1;
|
||||
}
|
||||
:host:has(#nav-toggle:checked) .list {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& .item {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
:host:has(#nav-toggle:checked) .item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& label[for='nav-toggle'] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-block: 0.75em;
|
||||
margin-inline: 1em;
|
||||
:host label[for='nav-toggle'] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-block: 0.75em;
|
||||
margin-inline: 1em;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 35em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& #nav-toggle {
|
||||
@media (min-width: 35em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .list {
|
||||
--nav-items-position: absolute;
|
||||
--nav-items-orientation: column nowrap;
|
||||
:host label[for='nav-toggle']:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
position: var(--nav-items-position);
|
||||
top: 3em;
|
||||
:host #nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-flow: var(--nav-items-orientation);
|
||||
:host .list {
|
||||
--nav-items-position: absolute;
|
||||
--nav-items-orientation: column nowrap;
|
||||
|
||||
text-align: end;
|
||||
list-style: none;
|
||||
position: var(--nav-items-position);
|
||||
top: 3em;
|
||||
|
||||
background-color: var(--clr-nav-background);
|
||||
display: flex;
|
||||
flex-flow: var(--nav-items-orientation);
|
||||
|
||||
margin: 0;
|
||||
border: var(--border-thin) solid var(--clr-nav-border);
|
||||
border-block-start: none;
|
||||
border-inline-end: none;
|
||||
border-end-start-radius: 0.75em;
|
||||
padding-inline: var(--nav-spacing);
|
||||
text-align: end;
|
||||
list-style: none;
|
||||
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
background-color: var(--clr-nav-background);
|
||||
|
||||
@media (min-width: 35em) {
|
||||
--nav-items-position: static;
|
||||
--nav-items-orientation: row nowrap;
|
||||
align-items: start;
|
||||
gap: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
margin: 0;
|
||||
border: var(--border-thin) solid var(--clr-nav-border);
|
||||
border-block-start: none;
|
||||
border-inline-end: none;
|
||||
border-end-start-radius: 0.75em;
|
||||
padding-inline: var(--nav-spacing);
|
||||
|
||||
& .item {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .link {
|
||||
display: block;
|
||||
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--clr-nav-link, inherit);
|
||||
|
||||
padding-block: calc(var(--nav-spacing) / 2);
|
||||
|
||||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-nav-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& .link-active {
|
||||
color: var(--clr-nav-link-active);
|
||||
@media (min-width: 35em) {
|
||||
--nav-items-position: static;
|
||||
--nav-items-orientation: row nowrap;
|
||||
align-items: start;
|
||||
gap: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host .item {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height 0.4s ease-in-out;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:host .link {
|
||||
display: block;
|
||||
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--clr-nav-link, inherit);
|
||||
|
||||
padding-block: calc(var(--nav-spacing) / 2);
|
||||
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
:host .link:hover {
|
||||
color: var(--clr-nav-link-hover);
|
||||
}
|
||||
|
||||
:host .link-active {
|
||||
color: var(--clr-nav-link-active);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<section class="page-content">
|
||||
<navigation label="Character" page :collection="char" webc:nokeep></navigation>
|
||||
<section webc:root="override">
|
||||
<navigation label="Character" :collection="char"></navigation>
|
||||
|
||||
<slot></slot>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-content {
|
||||
<style webc:scoped="page-content">
|
||||
:host {
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--clr-box-background);
|
||||
|
|
@ -13,55 +13,55 @@
|
|||
border-radius: var(--border-radius);
|
||||
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
& :where(h1, h2, h3, h4, h5, h6) {
|
||||
--heading-spacing: 0.25em;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-block: 0 var(--heading-spacing);
|
||||
padding-block: 0 var(--heading-spacing);
|
||||
:host :where(h1, h2, h3, h4, h5, h6) {
|
||||
--heading-spacing: 0.25em;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-block: 0 var(--heading-spacing);
|
||||
padding-block: 0 var(--heading-spacing);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0.125em;
|
||||
width: 2em;
|
||||
border-radius: 1em;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||
);
|
||||
}
|
||||
}
|
||||
:host :where(h1, h2, h3, h4, h5, h6)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0.125em;
|
||||
width: 2em;
|
||||
border-radius: 1em;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
|
||||
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
|
||||
);
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
:host h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
:host h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
& p {
|
||||
text-align: justify;
|
||||
}
|
||||
:host p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
& article a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.1875em;
|
||||
text-decoration-thickness: 0.125em;
|
||||
text-decoration-skip-ink: all;
|
||||
text-decoration-color: var(--clr-link-underline);
|
||||
transition: color 0.2s ease;
|
||||
:host article a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.1875em;
|
||||
text-decoration-thickness: 0.125em;
|
||||
text-decoration-skip-ink: all;
|
||||
text-decoration-color: var(--clr-link-underline);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-link);
|
||||
}
|
||||
}
|
||||
:host article a:hover {
|
||||
color: var(--clr-link);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<aside class="profile">
|
||||
<aside webc:root="override">
|
||||
<div class="avatar">
|
||||
<slot name="avatar"></slot>
|
||||
</div>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
<slot></slot>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.profile {
|
||||
<style webc:scoped="profile">
|
||||
:host {
|
||||
--sidebar-position: static;
|
||||
--sidebar-padding: 1rem;
|
||||
--sidebar-grid-columns: auto 1fr;
|
||||
|
|
@ -45,45 +45,44 @@
|
|||
--sidebar-top-text-align: center;
|
||||
--sidebar-avatar-size: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
& .avatar {
|
||||
grid-area: avatar;
|
||||
justify-self: center;
|
||||
:host .avatar {
|
||||
grid-area: avatar;
|
||||
justify-self: center;
|
||||
|
||||
& img {
|
||||
width: var(--sidebar-avatar-size);
|
||||
height: var(--sidebar-avatar-size);
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 1em;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
& .name,
|
||||
& .species {
|
||||
font-family: var(--font-family-headings);
|
||||
text-align: var(--sidebar-top-text-align);
|
||||
}
|
||||
|
||||
& .name {
|
||||
grid-area: name;
|
||||
align-self: end;
|
||||
font-size: 1.375em;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .species {
|
||||
grid-area: species;
|
||||
align-self: start;
|
||||
font-size: 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
grid-area: traits;
|
||||
border-block-start: var(--border-thin) solid var(--clr-box-border);
|
||||
padding-block: 0.75em 0;
|
||||
& img {
|
||||
width: var(--sidebar-avatar-size);
|
||||
height: var(--sidebar-avatar-size);
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 1em;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
:host :where(.name, .species) {
|
||||
font-family: var(--font-family-headings);
|
||||
text-align: var(--sidebar-top-text-align);
|
||||
}
|
||||
|
||||
:host .name {
|
||||
grid-area: name;
|
||||
align-self: end;
|
||||
font-size: 1.375em;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host .species {
|
||||
grid-area: species;
|
||||
align-self: start;
|
||||
font-size: 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host > :last-child {
|
||||
grid-area: traits;
|
||||
border-block-start: var(--border-thin) solid var(--clr-box-border);
|
||||
padding-block: 0.75em 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="quick-info">
|
||||
<div webc:root="override">
|
||||
<h3 class="title">Key Facts</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.quick-info {
|
||||
<style webc:scoped="quick-info">
|
||||
:host {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
|
|
@ -19,26 +19,26 @@
|
|||
padding: 1em;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
:host::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
& .title {
|
||||
margin-block: 0 1em;
|
||||
}
|
||||
:host .title {
|
||||
margin-block: 0 1em;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||
}
|
||||
:host > :last-child {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,12 +102,12 @@
|
|||
document.addEventListener('DOMContentLoaded', () => initializeGallery());
|
||||
</script>
|
||||
|
||||
<section class="gallery" aria-label="Image gallery">
|
||||
<section aria-label="Image gallery" webc:root="override">
|
||||
<button class="prev" aria-label="Previous Image">
|
||||
<icon icon="chevron-left" webc:nokeep></icon>
|
||||
<icon icon="chevron-left"></icon>
|
||||
</button>
|
||||
<button class="next" aria-label="Next Image">
|
||||
<icon icon="chevron-right" webc:nokeep></icon>
|
||||
<icon icon="chevron-right"></icon>
|
||||
</button>
|
||||
|
||||
<div class="track">
|
||||
|
|
@ -117,8 +117,8 @@
|
|||
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
<style webc:scoped="gallery">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-auto-columns: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
|
|
@ -126,152 +126,147 @@
|
|||
'. progress .';
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& .prev,
|
||||
& .next,
|
||||
& .indicator-btn {
|
||||
position: relative;
|
||||
:host :where(.prev, .next, .indicator-btn) {
|
||||
position: relative;
|
||||
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
cursor: pointer;
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
cursor: pointer;
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.875em;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.875em;
|
||||
|
||||
z-index: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
:host :where(.prev, .next, .indicator-btn):active::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
:host :where(.prev, .next, .indicator-btn)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
& .prev,
|
||||
& .next {
|
||||
grid-row: track;
|
||||
:host :where(.prev, .next) {
|
||||
grid-row: track;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
:host :where(.prev, .next):disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
}
|
||||
:host :where(.prev, .next) svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
|
||||
& .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
}
|
||||
:host .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
& .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
}
|
||||
:host .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
& .track {
|
||||
grid-row: track;
|
||||
grid-column: prev / next;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
:host .track {
|
||||
grid-row: track;
|
||||
grid-column: prev / next;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
|
||||
border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host .track > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:host .track::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .ref-image {
|
||||
& :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
:host .ref-image :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
:host .ref-image img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& .caption {
|
||||
font-size: 0.875em;
|
||||
text-wrap: balance;
|
||||
:host .ref-image .caption {
|
||||
font-size: 0.875em;
|
||||
text-wrap: balance;
|
||||
|
||||
background: oklch(from var(--clr-box-background) l c h / 0.75);
|
||||
background: oklch(from var(--clr-box-background) l c h / 0.75);
|
||||
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
|
||||
& .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
:host .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||
gap: 0.5em;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||
gap: 0.5em;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
& .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
:host .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
& .indicator-btn[aria-current='true']::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
:host .indicator-btn[aria-current='true']::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<figure class="ref-image">
|
||||
<figure webc:root="override">
|
||||
<eleventy-image
|
||||
class="image"
|
||||
:class="(dropshadow ? 'dropshadow' : '')"
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.ref-image {
|
||||
<style webc:scoped="ref-image">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
||||
place-content: center;
|
||||
|
|
@ -24,26 +24,27 @@
|
|||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
|
||||
& :first-child {
|
||||
grid-area: image;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 35rem;
|
||||
object-fit: contain;
|
||||
border-radius: 1em;
|
||||
}
|
||||
:host :first-child {
|
||||
grid-area: image;
|
||||
}
|
||||
|
||||
& .dropshadow {
|
||||
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
||||
}
|
||||
:host img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 35rem;
|
||||
object-fit: contain;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
& .caption {
|
||||
grid-area: caption;
|
||||
text-align: center;
|
||||
}
|
||||
:host .dropshadow {
|
||||
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
||||
}
|
||||
|
||||
:host .caption {
|
||||
grid-area: caption;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<ul class="timeline">
|
||||
<ul webc:root="override">
|
||||
<li class="job" webc:for="job of jobs">
|
||||
<icon class="icon" :icon="job.icon"></icon>
|
||||
<p class="title" @text="job.title"></p>
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.timeline {
|
||||
<style webc:scoped="timeline">
|
||||
:host {
|
||||
--timeline-circle-size: 3rem;
|
||||
--timeline-circle-background: var(--clr-box-background);
|
||||
--timeline-stroke-color: var(--clr-timeline-stroke);
|
||||
|
|
@ -20,70 +20,72 @@
|
|||
--timeline-circle-size: 4rem;
|
||||
}
|
||||
|
||||
& .job {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'icon title'
|
||||
'line text';
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
:host .job {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'icon title'
|
||||
'line text';
|
||||
column-gap: 1em;
|
||||
|
||||
grid-row: icon / line;
|
||||
grid-column: line;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
width: var(--timeline-stroke-thickness);
|
||||
height: 100%;
|
||||
:host .job::before {
|
||||
content: '';
|
||||
|
||||
background-color: var(--timeline-stroke-color);
|
||||
}
|
||||
grid-row: icon / line;
|
||||
grid-column: line;
|
||||
justify-self: center;
|
||||
|
||||
&:first-child::before {
|
||||
align-self: end;
|
||||
height: calc(100% - var(--timeline-circle-size));
|
||||
}
|
||||
width: var(--timeline-stroke-thickness);
|
||||
height: 100%;
|
||||
|
||||
&:last-child::before {
|
||||
grid-row: icon;
|
||||
align-self: start;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
background-color: var(--timeline-stroke-color);
|
||||
}
|
||||
|
||||
& .icon {
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
:host .job:first-child::before {
|
||||
align-self: end;
|
||||
height: calc(100% - var(--timeline-circle-size));
|
||||
}
|
||||
|
||||
width: var(--timeline-circle-size);
|
||||
height: var(--timeline-circle-size);
|
||||
:host .job:last-child::before {
|
||||
grid-row: icon;
|
||||
align-self: start;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
background-color: var(--timeline-circle-background);
|
||||
:host .icon {
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
|
||||
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
|
||||
border-radius: 100%;
|
||||
padding: calc(var(--timeline-circle-size) * 0.2);
|
||||
}
|
||||
width: var(--timeline-circle-size);
|
||||
height: var(--timeline-circle-size);
|
||||
|
||||
& .title {
|
||||
grid-area: title;
|
||||
align-self: center;
|
||||
background-color: var(--timeline-circle-background);
|
||||
|
||||
font-family: var(--font-family-headings);
|
||||
font-size: calc(var(--timeline-circle-size) / 2);
|
||||
font-weight: bold;
|
||||
text-align: start;
|
||||
margin-block: calc(var(--timeline-circle-size) / 4);
|
||||
}
|
||||
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
|
||||
border-radius: 100%;
|
||||
padding: calc(var(--timeline-circle-size) * 0.2);
|
||||
}
|
||||
|
||||
& .text {
|
||||
grid-area: text;
|
||||
:host .title {
|
||||
grid-area: title;
|
||||
align-self: center;
|
||||
|
||||
margin-inline: 0;
|
||||
margin-block: 0;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
}
|
||||
font-family: var(--font-family-headings);
|
||||
font-size: calc(var(--timeline-circle-size) / 2);
|
||||
font-weight: bold;
|
||||
text-align: start;
|
||||
margin-block: calc(var(--timeline-circle-size) / 4);
|
||||
}
|
||||
|
||||
:host .text {
|
||||
grid-area: text;
|
||||
|
||||
margin-inline: 0;
|
||||
margin-block: 0;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<ul class="trait-list">
|
||||
<ul webc:root="override">
|
||||
<li class="trait" webc:for="trait of traits">
|
||||
<div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
|
||||
<div class="icon-box"><icon :@icon="trait.icon"></icon></div>
|
||||
<p class="type" @text="trait.type"></p>
|
||||
<p class="text" @text="trait.text"></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.trait-list {
|
||||
<style webc:scoped="trait-list">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
|
||||
gap: 0.75em;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.trait {
|
||||
:host .trait {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'icon type'
|
||||
|
|
@ -25,57 +25,59 @@
|
|||
column-gap: 0.75em;
|
||||
justify-items: start;
|
||||
|
||||
& .icon-box {
|
||||
position: relative;
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
:host .icon-box {
|
||||
position: relative;
|
||||
grid-area: icon;
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
border-radius: 0.5em;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background-color: var(--clr-box-background);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
border-radius: 0.5em;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
& svg {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-block: 0;
|
||||
}
|
||||
:host .icon-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background-color: var(--clr-box-background);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
& .type {
|
||||
font-size: 0.625em;
|
||||
color: var(--clr-heading-data);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
grid-area: type;
|
||||
}
|
||||
:host svg {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
& .text {
|
||||
font-size: 0.75em;
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
margin-inline: 0;
|
||||
color: var(--clr-text);
|
||||
grid-area: data;
|
||||
}
|
||||
:host p {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
:host .type {
|
||||
font-size: 0.625em;
|
||||
color: var(--clr-heading-data);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
grid-area: type;
|
||||
}
|
||||
|
||||
:host .text {
|
||||
font-size: 0.75em;
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
margin-inline: 0;
|
||||
color: var(--clr-text);
|
||||
grid-area: data;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue