86 lines
1.8 KiB
Text
86 lines
1.8 KiB
Text
<figure webc:root="override">
|
|
<eleventy-image
|
|
class="image"
|
|
:class="(dropshadow ? 'dropshadow' : '')"
|
|
:src="`src/img/${char}/${src}`"
|
|
:alt="`${alt} by ${artist}`"
|
|
:width="width"
|
|
sizes="1000px"
|
|
></eleventy-image>
|
|
<eleventy-image
|
|
class="image nsfw"
|
|
:class="(dropshadow ? 'dropshadow' : '')"
|
|
:src="`src/img/${char}/${src.replace(/^(.*?)(\.[^.]+)$/, '$1-nsfw$2')}`"
|
|
:alt="`${alt} by ${artist}`"
|
|
:width="width"
|
|
sizes="1000px"
|
|
webc:if="nsfw"
|
|
></eleventy-image>
|
|
<figcaption class="caption">
|
|
<template webc:nokeep @text="alt"></template>
|
|
©
|
|
<a :href="href" target="_blank" @text="artist"></a>
|
|
</figcaption>
|
|
<nsfw-barrier webc:if="nsfw"></nsfw-barrier>
|
|
</figure>
|
|
|
|
<style webc:scoped="ref-image">
|
|
:host {
|
|
display: grid;
|
|
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
|
grid-template-columns: [image-start] 1fr [image-end];
|
|
place-content: center;
|
|
row-gap: 1rem;
|
|
|
|
margin-block: 0;
|
|
margin-inline: auto;
|
|
|
|
.nsfw &:has(.image.nsfw) {
|
|
& .image {
|
|
display: none;
|
|
}
|
|
|
|
& .image.nsfw {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.nsfw &:not(:has(.image.nsfw)) {
|
|
& .image {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
:host .nsfw-barrier {
|
|
grid-area: image;
|
|
justify-self: end;
|
|
align-self: end;
|
|
}
|
|
|
|
:host :where(picture, img) {
|
|
grid-area: image;
|
|
}
|
|
|
|
:host .image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 35rem;
|
|
object-fit: contain;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
:host .image.nsfw {
|
|
display: none;
|
|
}
|
|
|
|
:host .dropshadow {
|
|
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
|
}
|
|
|
|
:host .caption {
|
|
grid-area: caption / image;
|
|
text-align: center;
|
|
}
|
|
</style>
|