149 lines
3.7 KiB
Vue
149 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import CharacterList from "@/components/CharacterList.vue";
|
|
import CharacterItem from "@/components/CharacterItem.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<CharacterList>
|
|
<CharacterItem class="viktor" href="/viktor/">
|
|
<template #image>
|
|
<picture>
|
|
<source
|
|
srcset="
|
|
@/assets/viktor-portrait.png?w=250;500&avif&quality=75&srcset
|
|
"
|
|
type="image/avif"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<source
|
|
srcset="
|
|
@/assets/viktor-portrait.png?w=250;500&webp&quality=100&srcset
|
|
"
|
|
type="image/webp"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<img
|
|
srcset="@/assets/viktor-portrait.png?w=250;500&png&srcset"
|
|
alt="Viktor Portrait"
|
|
/>
|
|
</picture>
|
|
</template>
|
|
|
|
<template #name>Viktor Kraastav</template>
|
|
<template #species>Ankylosaurus</template>
|
|
</CharacterItem>
|
|
|
|
<CharacterItem class="sebin" href="/sebin/">
|
|
<template #image>
|
|
<picture>
|
|
<source
|
|
srcset="
|
|
@/assets/sebin-portrait.png?w=250;500&avif&quality=75&srcset
|
|
"
|
|
type="image/avif"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<source
|
|
srcset="
|
|
@/assets/sebin-portrait.png?w=250;500&webp&quality=100&srcset
|
|
"
|
|
type="image/webp"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<img
|
|
srcset="@/assets/sebin-portrait.png?w=250;500&png&srcset"
|
|
alt="Sebin Portrait"
|
|
/>
|
|
</picture>
|
|
</template>
|
|
|
|
<template #name>Sebin Nyshkim</template>
|
|
<template #species>Anthro Dragon (main)</template>
|
|
</CharacterItem>
|
|
|
|
<CharacterItem class="jarek" href="/jarek/">
|
|
<template #image>
|
|
<picture>
|
|
<source
|
|
srcset="
|
|
@/assets/jarek-portrait.png?w=250;500&avif&quality=75&srcset
|
|
"
|
|
type="image/avif"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<source
|
|
srcset="
|
|
@/assets/jarek-portrait.png?w=250;500&webp&quality=100&srcset
|
|
"
|
|
type="image/webp"
|
|
sizes="(min-width: 70em) 500px, 250px"
|
|
/>
|
|
<img
|
|
srcset="@/assets/jarek-portrait.png?w=250;500&png&srcset"
|
|
alt="Jarek Portrait"
|
|
/>
|
|
</picture>
|
|
</template>
|
|
|
|
<template #name>Jarek Vakhtang</template>
|
|
<template #species>Krondir</template>
|
|
</CharacterItem>
|
|
</CharacterList>
|
|
</main>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.sebin {
|
|
font-family: "Exo", sans-serif;
|
|
font-style: italic;
|
|
|
|
&:before {
|
|
background: var(--background--sebin);
|
|
}
|
|
|
|
&:after {
|
|
background: url(@/assets/subtle-prism.svg);
|
|
mix-blend-mode: multiply;
|
|
}
|
|
}
|
|
|
|
.viktor {
|
|
font-family: "Secular One", serif;
|
|
|
|
&:before {
|
|
background: var(--background--viktor);
|
|
}
|
|
|
|
&:after {
|
|
top: unset;
|
|
|
|
background: var(--background-image--viktor) no-repeat center bottom;
|
|
background-size: cover;
|
|
|
|
height: var(--background-height-base--viktor);
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
&:hover:after {
|
|
height: var(--background-height-hover--viktor);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-text--viktor);
|
|
}
|
|
|
|
img {
|
|
background: var(--image-background--viktor);
|
|
}
|
|
}
|
|
|
|
.jarek {
|
|
font-family: "Rubik Dirt", sans-serif;
|
|
|
|
&:before {
|
|
background: var(--background--jarek);
|
|
}
|
|
}
|
|
</style>
|