Lint and format

frontend/components/tierlist/Tier.vue

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