Mobile tierlists :) (sort of)

frontend/components/tierlist/Tier.vue

@@ -34,7 +34,7 @@ defineProps<{
     margin-bottom: 10px;
 }
 .tierlist-tier-title {
-    font-size: 54px;
+    font-size: 3.3rem;
     margin-left: 20px;
     margin-right: 20px;
     margin-top: 40px;
@@ -56,4 +56,18 @@ defineProps<{
 
     user-select: none;
 }
+@media only screen and (max-width: 450px) {
+    .champion-img-container {
+        width: 80px; 
+        height: 80px;
+    }
+    .champion-img {
+        width: 76px;
+        height: 76px;
+    }
+    .tierlist-tier-container {
+        grid-template-columns: repeat(auto-fit, 80px);
+        min-height: 82px;
+    }
+}
 </style>

frontend/pages/tierlist/[lane].vue

@@ -64,24 +64,42 @@ tiers.push({title: "F", data: tierFromScaledPickrate(0, 0.1)})
     <div style="display: flex; min-height: 100vh; align-items: stretch;  width: 100%;">
         <NavBar :tierlist-list="true" />
 
-        <div style="margin-left: 10px; width: 100%; overflow-y: scroll;">
+        <div id="tierlist-container" style="margin-left: 10px; width: 100%; overflow-y: scroll;">
 
         <div style="margin-left: 0px; margin-top: 20px; display: flex; margin-bottom: 30px; align-items: center">
-            <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">Tierlist for</h1>
+            <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300;">Tierlist for</h1>
             <NuxtImg format="webp" style="margin-left: 10px;" 
                 width="50" height="50" 
                 :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
-            <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">{{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
+            <h1 style="margin-left: 10px; font-size: 2.8rem; font-weight: 300;">{{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
         </div>
 
         <TierlistTier v-for="tier in tiers" :title="tier.title" :tier="tier.data" />
 
-        <TierlistChart style="margin-left: 100px; margin-right: 100px; margin-bottom: 100px; margin-top: 40px" :data="tiers" />
+        <TierlistChart id="chart" :data="tiers" />
 
         </div>
     </div>
 
 </template>
 
-<style>
+<style scoped>
+#chart {
+    margin-left: 100px; 
+    margin-right: 100px; 
+    margin-bottom: 100px; 
+    margin-top: 40px
+}
+
+@media only screen and (max-width: 450px) {
+    #chart {
+        margin-left: 2px; 
+        margin-right: 12px;
+        margin-bottom: 40px;
+        margin-top: 40px;
+    }
+    #tierlist-container {
+        padding-bottom: 120px;
+    }
+}
 </style>