Mobile layout (fix #2)

frontend/components/RunePage.vue

@@ -35,7 +35,7 @@ refreshStyles()
 <template>
     <div style="display: flex;">
     <div class="rune-holder">
-        <div class="rune-slot"><NuxtImg style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
+        <div class="rune-slot"><NuxtImg class="rune-style-img" style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
         <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
             <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
         </div>    
@@ -93,4 +93,24 @@ refreshStyles()
     margin-right: 20px;
     border: 1px var(--color-on-surface) solid;
 }
+
+@media only screen and (max-width: 650px) {
+    .rune-slot {
+        width: calc(24*3px + 30px);
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .rune-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-style-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-spacer-bar {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
 </style>