51 lines
1022 B
Svelte
51 lines
1022 B
Svelte
<script lang="ts">
|
|
export let src: string;
|
|
export let alt = '';
|
|
const u = new URL(src);
|
|
const filename = u.pathname.split('/').pop() || '9a8sda';
|
|
const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
|
|
</script>
|
|
|
|
<div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
|
|
<img src="/hang.png" class="hang" />
|
|
<picture>
|
|
<source srcset={src.replace('.png', '.jpg')} type="image/jpeg" />
|
|
<img {src} alt={src} />
|
|
</picture>
|
|
</div>
|
|
|
|
<style>
|
|
.hang {
|
|
position: absolute;
|
|
top: 0px;
|
|
margin: 0px;
|
|
top: -16%;
|
|
width: 50%;
|
|
left: 25%;
|
|
z-index: -1;
|
|
}
|
|
.frame {
|
|
position: relative;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
.frame:before {
|
|
content: '';
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--frame);
|
|
background-position: center center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
filter: drop-shadow(0px 0px 20px black);
|
|
}
|
|
img {
|
|
z-index: -1;
|
|
max-width: 70%;
|
|
max-height: 70%;
|
|
margin-left: 15%;
|
|
margin-top: 12%;
|
|
}
|
|
</style>
|