106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
class="mosaic-modal theme-dark layout-grid-inner"
|
|
@click="emit('close')"
|
|
>
|
|
<div class="meta">
|
|
<div class="window dl" @click.stop>
|
|
<dl-row v-for="row in item.dl" :row="row" />
|
|
</div>
|
|
|
|
<div class="window gif">
|
|
<strapi-media :image="item.image" fit="contain" />
|
|
|
|
<a
|
|
class="h6"
|
|
href="https://web.archive.org/web/20090831003020/http://geocities.com/aizalonl/"
|
|
target="_blank"
|
|
>aizaloni</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window content" @click.stop data-lenis-prevent>
|
|
<lenis instance="mosaic-modal">
|
|
<h1 class="title">{{ item.title }}</h1>
|
|
|
|
<strapi-map :items="item.content" mediaDS="42vw" />
|
|
</lenis>
|
|
</div>
|
|
|
|
<button class="window close" @click="emit('close')">Close X</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({ item: Object })
|
|
console.log(props.item)
|
|
|
|
const emit = defineEmits(['close'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mosaic-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
align-items: flex-start;
|
|
padding-top: desktop-vw(27px);
|
|
|
|
.meta {
|
|
grid-column: 4 / span 2;
|
|
}
|
|
|
|
.window {
|
|
background: var(--theme-bg);
|
|
color: var(--theme-fg);
|
|
border-radius: desktop-vw(10px);
|
|
|
|
&.dl {
|
|
padding: desktop-vw(12px) desktop-vw(10px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: desktop-vw(8px);
|
|
|
|
.dl-row:first-child {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
&.gif {
|
|
margin-top: var(--layout-margin);
|
|
padding: 1rem;
|
|
text-align: center;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
display: block;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
&.content {
|
|
grid-column: 6 / span 7;
|
|
|
|
.lenis {
|
|
max-height: desktop-vh(950px);
|
|
overflow: auto;
|
|
padding: desktop-vw(34px) desktop-vw(24px);
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
margin-bottom: 1em;
|
|
}
|
|
.strapi-media {
|
|
border-radius: desktop-vw(4px);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
&.close {
|
|
padding: desktop-vw(9px);
|
|
border-radius: desktop-vw(16px);
|
|
cursor: pointer;
|
|
margin-right: auto;
|
|
@include label;
|
|
}
|
|
}
|
|
}
|
|
</style>
|