Mobile-adapted index :)

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 style="margin: auto; margin-top: 110px; width: fit-content;">
-        <h2 style="font-size: 55px; margin-bottom: 10px;">Tierlists</h2>
+    <div class="index-tierlist-info-container">
+        <div id="index-tierlists">
+        <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>