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

refactor: ♻️ use more of the webc feature set proper

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-25 00:15:50 +02:00
parent c0b42b82d0
commit aa410f916a
21 changed files with 678 additions and 723 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/abilities.webc
View file

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