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

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

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