49 lines
1 KiB
Text
49 lines
1 KiB
Text
<figure class="ref-image">
|
|
<eleventy-image
|
|
class="image"
|
|
:class="(dropshadow ? 'dropshadow' : '')"
|
|
:src="`src/img/${char}/${src}`"
|
|
:alt="`${alt} by ${artist}`"
|
|
:width="width"
|
|
sizes="1000px"
|
|
></eleventy-image>
|
|
<figcaption class="caption">
|
|
<template webc:nokeep @text="alt"></template>
|
|
©
|
|
<a :href="href" target="_blank" @text="artist"></a>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<style>
|
|
.ref-image {
|
|
display: grid;
|
|
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
|
place-content: center;
|
|
row-gap: 1rem;
|
|
|
|
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;
|
|
}
|
|
|
|
& .dropshadow {
|
|
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
|
}
|
|
|
|
& .caption {
|
|
grid-area: caption;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|