Mobile-adapted index :)

frontend/components/ChampionSelector.vue

@@ -59,14 +59,14 @@ async function submit() {
 
 <template>
     <div>
-    <div style="width: fit-content; margin: auto; display: flex; align-items: center;">
-        <LaneFilter @filter-change="(value : number) => onLaneFilterChange(value)" style="margin-right: 20px;"/>
+    <div class="search-lanefilter-container">
+        <LaneFilter id="cs-lanefilter" @filter-change="(value : number) => onLaneFilterChange(value)"/>
         <input @keyup.enter="submit" v-model="searchText" ref="searchBar" class="search-bar" type="text" placeholder="Search a champion"/>
     </div>
     <div class="champion-container">
-        <NuxtLink v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        <NuxtLink style="width: fit-content; height: fit-content;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
+        <div class="cs-champion-img-container">
+        <NuxtImg class="cs-champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
         </div>
         </NuxtLink>
     </div>
@@ -80,7 +80,7 @@ async function submit() {
 
     background-color: var(--color-surface-darker);
     
-    font-size: 28px;
+    font-size: 1.75rem;
 
     border-radius: 12px;
     border: none;
@@ -90,6 +90,19 @@ async function submit() {
     border: 2px solid var(--color-on-surface);
     outline: none;
 }
+
+#cs-lanefilter {
+    margin: auto;
+    margin-right: 20px;
+}
+
+.search-lanefilter-container {
+    width: fit-content; 
+    margin: auto; 
+    display: flex; 
+    align-items: center;
+}
+
 .champion-container {
     width: 90%;
     height: auto;
@@ -108,18 +121,47 @@ async function submit() {
     margin-top: 20px;
     margin-bottom: 20px;
 }
-.champion-img-container {
+.cs-champion-img-container {
     overflow: hidden; width: 120px; height: 120px;
     border: 1px solid var(--color-surface);
 }
-.champion-img-container:hover {
+.cs-champion-img-container:hover {
     border: 1px solid var(--color-on-surface);
 }
-.champion-img {
+.cs-champion-img {
     width: 116px;
     height: 116px;
     transform: translate(4px, 4px) scale(1.2, 1.2);
 
     user-select: none;
 }
+
+@media only screen and (max-width: 920px) {
+    .search-lanefilter-container {
+        flex-direction: column;
+    }
+    #cs-lanefilter {
+        margin-right: auto;
+    }
+    .champion-container {
+        width: 100%;
+    }
+}
+@media only screen and (max-width: 450px) {
+    .search-bar {
+        width: 92%;
+        height: 40px;
+    }
+    .cs-champion-img-container {
+        width: 80px; 
+        height: 80px;
+    }
+    .cs-champion-img {
+        width: 76px;
+        height: 76px;
+    }
+    .champion-container {
+        grid-template-columns: repeat(auto-fit, 80px);
+    }
+}
 </style>