feat: ✨ add reference image component
This commit is contained in:
parent
f7a73793d8
commit
fa04d4ea19
1 changed files with 46 additions and 0 deletions
46
src/components/ref-img.webc
Normal file
46
src/components/ref-img.webc
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
<figure class="ref-image">
|
||||||
|
<eleventy-image
|
||||||
|
class="image"
|
||||||
|
:class="(dropshadow ? 'dropshadow' : '')"
|
||||||
|
:src="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 {
|
||||||
|
max-width: var(--refimage-max-width);
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: auto;
|
||||||
|
|
||||||
|
& img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 35rem;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .image,
|
||||||
|
& .caption {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .dropshadow {
|
||||||
|
filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
& .caption {
|
||||||
|
text-align: center;
|
||||||
|
margin-block: 1rem 0;
|
||||||
|
margin-inline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Add table
Add a link
Reference in a new issue