Improve appearance

src/css/_variables.scss

@@ -2,3 +2,7 @@
 
 $original-family-sans-serif: $family-sans-serif;
 $family-sans-serif: Splatoon2, $family-sans-serif;
+
+$text: $grey-lighter;
+$text-strong: $white-ter;
+$title-color: $white-ter;

src/css/main.scss

@@ -5,3 +5,98 @@
 .title {
     font-family: Splatoon1, $original-family-sans-serif;
 }
+
+html {
+    background: #191919 url(../img/bkg-squid.png) top;
+    background-size: 360px 360px;
+}
+
+.schedule-box {
+    background: url(../img/bkg-stripes.png) top;
+    background-size: 80px 80px;
+    border-radius: 32px;
+
+    max-width: 600px;
+    padding: 35px 10px 10px 10px;
+    margin: auto;
+
+    mask-image: url(../img/bkg-mask-product.png);
+    -webkit-mask-image: url(../img/bkg-mask-product.png);
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    // Original value: 500px 800px
+    mask-size: 600px 960px;
+    -webkit-mask-size: 600px 960px;
+    mask-position: center top;
+    -webkit-mask-position: center top;
+
+    .schedule-icon {
+        display: inline-block;
+        width: 42px;
+        height: 38px;
+        background-size: auto 38px;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin: 0 4px -4px 0;
+    }
+
+    &.regular {
+        background-color: #19d719;
+        .schedule-icon {
+            background-image: url(../img/battle-regular.png);
+        }
+    }
+
+    &.ranked {
+        background-color: #f54910;
+        .schedule-icon {
+            background-image: url(../img/battle-ranked.png);
+        }
+    }
+
+    &.league {
+        background-color: #f02d7d;
+        .schedule-icon {
+            background-image: url(../img/battle-league.png);
+        }
+    }
+}
+
+.main-schedule {
+    background: rgba(0,0,0,0.7);
+    padding: 5px 10px 10px;
+    margin: 0 -5px 15px;
+    border-radius: 12px;
+
+    .rule-name {
+        color: $title-color;
+        font-size: 1.25rem;
+        margin-bottom: 5px;
+    }
+}
+
+.stage-image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    border-radius: 10px;
+
+    position: relative;
+
+    span {
+        position: absolute;
+        right: 3px;
+        bottom: 3px;
+
+        padding: 2px 5px;
+        max-width: 95%;
+
+        background: rgba(0,0,0,0.7);
+        border-radius: 8px;
+
+        font-size: 0.9rem;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

src/js/components/App.vue

@@ -5,9 +5,15 @@
         </div>
         <div v-else>
             <div class="columns">
-                <div class="column"><ScheduleBox :schedules="regular" :now="now"></ScheduleBox></div>
-                <div class="column"><ScheduleBox :schedules="ranked" :now="now"></ScheduleBox></div>
-                <div class="column"><ScheduleBox :schedules="league" :now="now"></ScheduleBox></div>
+                <div class="column">
+                    <ScheduleBox class="schedule-box regular" :schedules="regular" :now="now"></ScheduleBox>
+                </div>
+                <div class="column">
+                    <ScheduleBox class="schedule-box ranked" :schedules="ranked" :now="now"></ScheduleBox>
+                </div>
+                <div class="column">
+                    <ScheduleBox class="schedule-box league" :schedules="league" :now="now"></ScheduleBox>
+                </div>
             </div>
         </div>
     </div>

src/js/components/ScheduleBox.vue

@@ -1,27 +1,39 @@
 <template>
     <div v-if="firstSchedule">
-        <h2 class="title is-2">{{ firstSchedule.game_mode.name }}</h2>
-        <h3 class="title is-3">{{ firstSchedule.rule.name }}</h3>
-        <div class="columns">
-            <div class="column"><Stage :stage="firstSchedule.stage_a"></Stage></div>
-            <div class="column"><Stage :stage="firstSchedule.stage_b"></Stage></div>
-        </div>
-        <div v-if="upcomingSchedule">
-            <button @click="previousSchedule">Prev</button>
-            <button @click="nextSchedule">Next</button>
-        </div>
-        <div class="columns" v-if="upcomingSchedule">
-            <div class="column">
-                <div v-if="upcomingScheduleIndex == 0">
-                    Next
-                </div>
-                <div v-else>
-                    Soon
-                </div>
-                <div>{{ upcomingSchedule.rule.name }}</div>
+        <h2 class="title is-2">
+            <span class="schedule-icon"></span>{{ firstSchedule.game_mode.name }}
+        </h2>
+
+        <div class="main-schedule">
+            <div class="rule-name">{{ firstSchedule.rule.name }}</div>
+            <div class="columns is-mobile">
+                <div class="column"><Stage :stage="firstSchedule.stage_a"></Stage></div>
+                <div class="column"><Stage :stage="firstSchedule.stage_b"></Stage></div>
             </div>
-            <div class="column"><Stage :stage="upcomingSchedule.stage_a"></Stage></div>
-            <div class="column"><Stage :stage="upcomingSchedule.stage_b"></Stage></div>
+        </div>
+
+        <div class="columns is-gapless" v-if="upcomingSchedule">
+            <div class="column is-narrow"><button @click="previousSchedule">Prev</button></div>
+            <div class="column">
+                <div class="columns is-gapless" v-if="upcomingSchedule">
+                    <div class="column">
+                        <div v-if="upcomingScheduleIndex == 0">
+                            Next
+                        </div>
+                        <div v-else>
+                            Soon
+                        </div>
+                        <div>{{ upcomingSchedule.rule.name }}</div>
+                    </div>
+                    <div class="column is-8">
+                        <div class="columns is-mobile">
+                            <div class="column"><Stage :stage="upcomingSchedule.stage_a"></Stage></div>
+                            <div class="column"><Stage :stage="upcomingSchedule.stage_b"></Stage></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-narrow"><button @click="nextSchedule">Next</button></div>
         </div>
     </div>
 </template>

src/js/components/Stage.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <h4 class="title is-4">{{ stage.name }}</h4>
-        <img :src="image" />
+    <div class="stage-image" :style="style">
+        <figure class=" image is-16by9"></figure>
+        <span>{{ stage.name }}</span>
     </div>
 </template>
 
@@ -13,6 +13,11 @@ export default {
             if (this.stage)
                 return `https://app.splatoon2.nintendo.net${this.stage.image}`;
         },
+        style() {
+            return {
+                'background-image': `url(${this.image})`,
+            };
+        },
     },
 }
 </script>