Initial commit

src/components/CharacterItem.vue

@@ -0,0 +1,105 @@
+<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>