New tierlists :)

frontend/components/tierlist/Tier.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+    title: string
+    tier: Array<{champion: Champion, lane: LaneData}>
+}>()
+</script>
+
+<template>
+<div style="display: flex; align-items: center;">
+    <h2 class="tierlist-tier-title">{{ title }}</h2>
+    <div class="tierlist-tier-container">
+        <NuxtLink v-for="{champion: champion} in tier" :to="'/champion/' + champion.alias.toLowerCase()">
+        <div class="champion-img-container">
+        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        </div>
+        </NuxtLink>
+    </div>
+</div>
+</template>
+
+<style>
+.tierlist-tier-container {
+    width: 90%;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 128px);
+    grid-gap: 10px;
+
+    align-items: center;
+
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.tierlist-tier-title {
+    font-size: 54px;
+    margin-left: 20px;
+    margin-right: 20px;
+    
+    font-weight: 300;
+}
+
+.champion-img-container {
+    overflow: hidden; width: 120px; height: 120px;
+    border: 1px solid var(--color-surface);
+}
+.champion-img-container:hover {
+    border: 1px solid var(--color-on-surface);
+}
+.champion-img {
+    width: 116px;
+    height: 116px;
+    transform: translate(4px, 4px) scale(1.2, 1.2);
+
+    user-select: none;
+}
+</style>