105 lines
1.6 KiB
Vue
105 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
href: string;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<li class="character__item">
|
|
<a class="character__link" :href="href">
|
|
<span class="character__image">
|
|
<slot name="image"></slot>
|
|
</span>
|
|
|
|
<span class="character__name">
|
|
<slot name="name"></slot>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.character {
|
|
&__item {
|
|
flex: 1 1 auto;
|
|
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
// transform: skew(25deg);
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
flex: 2 1 auto;
|
|
}
|
|
}
|
|
|
|
&__item:hover &__link {
|
|
transform: scale(1.5);
|
|
filter: saturate(100%);
|
|
}
|
|
|
|
&__link {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
// transform: skew(-25deg);
|
|
filter: saturate(0%);
|
|
}
|
|
|
|
&__image {
|
|
flex: 0 0 auto;
|
|
|
|
img {
|
|
display: block;
|
|
|
|
width: 30vw;
|
|
height: 30vw;
|
|
max-width: 15vh;
|
|
max-height: 15vh;
|
|
|
|
margin: 0;
|
|
border: 0.25rem solid #fff;
|
|
border-radius: 100%;
|
|
padding: 0;
|
|
|
|
@media (min-width: 80em) {
|
|
width: 15vw;
|
|
height: 15vw;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__name {
|
|
flex: 0 0 auto;
|
|
|
|
font-size: 1.75rem;
|
|
|
|
margin: 1.75rem 0 0 0;
|
|
|
|
@media (min-width: 80em) {
|
|
font-size: 2.5vw;
|
|
margin: 4vh 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|