2020-09-23 15:37:12 +02:00
|
|
|
<script>
|
2020-11-02 15:55:59 +01:00
|
|
|
import Image from './Image.svelte'
|
|
|
|
|
|
2020-09-23 15:37:12 +02:00
|
|
|
export let src
|
|
|
|
|
export let alt
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2020-11-02 15:55:59 +01:00
|
|
|
:global(img.cdn) {
|
2020-09-23 15:37:12 +02:00
|
|
|
width: calc(100% - 0.25em);
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-position: center;
|
|
|
|
|
border: 0.125em solid var(--clr-primary);
|
|
|
|
|
transition: var(--animation);
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-02 15:55:59 +01:00
|
|
|
:global(img.cdn:hover) {
|
2020-09-23 15:37:12 +02:00
|
|
|
transform: scale(1.1);
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2020-11-02 15:55:59 +01:00
|
|
|
<Image crop class="cdn" {src} {alt} />
|
