Mobile-adapted index :)

frontend/assets/css/main.css

@@ -26,6 +26,16 @@ body {
     
     padding: 0;
     margin: 0;
+
+    /* default value: font-size: 16px; */
+}
+@media only screen and (max-width: 550px) {
+    body {
+        font-size: 12px;
+    }
+    html {
+        font-size: 12px;
+    }
 }
 
 /* Different title settings */

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;">
+    <div class="search-lanefilter-container">
-        <LaneFilter @filter-change="(value : number) => onLaneFilterChange(value)" style="margin-right: 20px;"/>
+        <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()">
+        <NuxtLink style="width: fit-content; height: fit-content;" v-for="champion in filteredChampions" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
+        <div class="cs-champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        <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" />
+    <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 ? '90px' : fontSize) + ';'" id="logo-text">BuildPath</h1>
+    <h1 :style="'font-size: ' + (fontSize == null ? '5.6rem' : fontSize) + ';'" id="logo-text">BuildPath</h1>
     </NuxtLink>
     </div>
 </template>
@@ -19,11 +19,22 @@ defineProps<{
     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>

frontend/pages/index.vue

@@ -9,29 +9,84 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
         <Title>BuildPath</Title>
     </Head>
 
-    <Logo style="margin: auto; margin-top: 64px; margin-bottom: 64px;" />
+    <Logo id="index-logo"/>
 
-    <div style="display: flex; margin-top: 64px;">
+    <div class="index-main-content">
 
-    <div style="margin: auto; margin-top: 0px; width: fit-content;">
+    <div class="index-tierlist-info-container">
-        <div style="margin: auto; margin-top: 110px; width: fit-content;">
+        <div id="index-tierlists">
-        <h2 style="font-size: 55px; margin-bottom: 10px;">Tierlists</h2>
+        <h2 style="font-size: 3.4rem; margin-bottom: 10px;">Tierlist</h2>
             <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
             <div style="display: flex; align-items: center;">
                 <img width="40" height="40" :src="LANE_IMAGES[i]" />
-                <h3 style="font-size: 34px; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
+                <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
             </div>
             </NuxtLink>
         </div>
         <div style="margin: auto; margin-left: 50px; margin-top: 50px; width: fit-content; max-width: 300px;">
-            <h3 style="font-size: 30px; font-weight: 200;">
+            <h3 id="index-statp" style="font-size: 30px; font-weight: 200;">
                 BuildPath analyzed {{ stats.count }} games from challenger players on patch {{ stats.patch }}
             </h3>
             
         </div>
     </div>
     
-    <ChampionSelector style="width: 80%;"/>
+    <ChampionSelector class="index-champion-selector"/>
 
     </div>
 </template>
+
+<style>
+#index-logo {
+    margin: auto; 
+    margin-top: 64px; 
+    margin-bottom: 64px;
+}
+.index-main-content {
+    display: flex; 
+    margin-top: 164px;
+}
+.index-champion-selector {
+    width: 80%;
+}
+.index-tierlist-info-container {
+    margin: auto; 
+    margin-top: 0px; 
+    width: fit-content;
+}
+#index-tierlists {
+    margin: auto; 
+    margin-top: 10px; 
+    width: fit-content;
+}
+@media only screen and (max-width: 1240px) {
+    .index-main-content {
+        flex-direction: column;
+        margin-top: 5px;
+    }
+    .index-champion-selector {
+        width: 100%;
+    }
+    .index-tierlist-info-container {
+        display: flex;
+        margin-bottom: 50px;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    #index-logo {
+        margin-top: 5px;
+        margin-bottom: 10px;
+    }
+    #index-statp {
+        display: none;
+    }
+    .index-tierlist-info-container {
+        margin-bottom: 10px;
+        margin-left: 10px;
+        
+        display: none;
+    }
+}
+
+</style>