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>

frontend/components/LaneFilter.vue

@@ -38,7 +38,7 @@ function handleHover(laneImg: Ref<string>, index: number) {
 </script>
 
 <template>
-<div style="width: fit-content; margin: auto;">
+<div style="width: fit-content;">
     <img v-for="(laneImg, index) in laneImgs" 
     class="lane-img" :src="laneImg.value" 
     @mouseout="handleMouseOut(laneImg, index)"
@@ -56,4 +56,10 @@ function handleHover(laneImg: Ref<string>, index: number) {
 .lane-img:hover {
     cursor: pointer;
 }
+
+@media only screen and (max-width: 400px) {
+    .lane-img {
+        width: 48px;
+    }
+}
 </style>

frontend/components/Logo.vue

@@ -6,10 +6,10 @@ defineProps<{
 </script>
 
 <template>
-    <div style="width: fit-content;">
+    <div style="width: fit-content; max-width: 100%; overflow: hidden;">
     <NuxtLink style="display: flex; width: fit-content; text-decoration: none;" to="/">
-    <img style="user-select: none;" :width="imgWidth == null ? '140' : Number(imgWidth)" src="~/assets/img/buildpath-high-resolution-logo-transparent.png" />
-    <h1 :style="'font-size: ' + (fontSize == null ? '90px' : fontSize) + ';'" id="logo-text">BuildPath</h1>
+    <img id="logo-img" :width="imgWidth == null ? '140' : Number(imgWidth)" src="~/assets/img/buildpath-high-resolution-logo-transparent.png" />
+    <h1 :style="'font-size: ' + (fontSize == null ? '5.6rem' : fontSize) + ';'" id="logo-text">BuildPath</h1>
     </NuxtLink>
     </div>
 </template>
@@ -18,12 +18,23 @@ defineProps<{
 #logo-text {
     font-weight: 200; 
     align-content: center; 
-    
-    font-size: 90px;
 
     margin-left: 20px;
     
     user-select: none;
     text-decoration: none;
 }
+#logo-img {
+    user-select: none;
+}
+
+@media only screen and (max-width: 550px) {
+    #logo-text {
+        margin-left: 10px;
+    }
+    #logo-img {
+        max-width: 80px;
+        height: fit-content;
+    }
+}
 </style>