From 06e682968c757e384dc951abc17542f3c0f11acc Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:49:19 -0500
Subject: [PATCH] Center champion cells

---
 pages/champions/index.vue | 38 ++++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/pages/champions/index.vue b/pages/champions/index.vue
index 4864f61..4ea2132 100644
--- a/pages/champions/index.vue
+++ b/pages/champions/index.vue
@@ -15,26 +15,24 @@ watch(currentLocale, async () => {
 </script>
 
 <template>
-  <div class="d-flex flex-column gap-2">
-      <div class="d-flex flex-row flex-wrap gap-4">
-        <div v-for="summary in summaries" :id="`${summary.id}`" 
-            style="width: 200px;"
-            data-aos="zoom-out"
-            data-aos-duration="500">
-            <NuxtLink :to="`/champions/${summary.id}`">
-                <div class="ratio ratio-16x9 position-relative">
-                    <img class="object-fit-cover rounded" 
-                        :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
-                        loading="lazy"/>
-                    <div class="position-absolute z-1 d-flex flex-column justify-content-end">
-                        <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
-                            <span class="fs-5 fw-light">{{ summary.name }}</span>
-                            <span class="fw-bold">{{ summary.id }}</span>
-                        </div>
+  <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
+    <div v-for="summary in summaries" :id="`${summary.id}`" 
+        style="width: 200px;"
+        data-aos="zoom-out"
+        data-aos-duration="500">
+        <NuxtLink :to="`/champions/${summary.id}`">
+            <div class="ratio ratio-16x9 position-relative">
+                <img class="object-fit-cover rounded" 
+                    :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
+                    loading="lazy"/>
+                <div class="position-absolute z-1 d-flex flex-column justify-content-end">
+                    <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
+                        <span class="fs-5 fw-light">{{ summary.name }}</span>
+                        <span class="fw-bold">{{ summary.id }}</span>
                     </div>
                 </div>
-            </NuxtLink>
-        </div>
-      </div>
-  </div>
+            </div>
+        </NuxtLink>
+    </div>
+    </div>
 </template>
\ No newline at end of file