49 lines
797 B
Vue
49 lines
797 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
dropshadow?: boolean
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<figure class="figure">
|
|
<picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
|
|
<slot></slot>
|
|
</picture>
|
|
|
|
<figcaption class="figure__caption">
|
|
<slot name="caption"></slot>
|
|
</figcaption>
|
|
</figure>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.figure {
|
|
max-width: var(--refimage-max-width);
|
|
margin: 0 auto;
|
|
|
|
&__image,
|
|
&__caption {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&__image {
|
|
&--dropshadow {
|
|
filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
|
|
}
|
|
}
|
|
|
|
&__caption {
|
|
text-align: center;
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 35rem;
|
|
margin: auto;
|
|
}
|
|
}
|
|
</style>
|