Improve appearance

src/css/_variables.scss

@@ -6,3 +6,7 @@ $family-sans-serif: Splatoon2, $family-sans-serif;
 $text: $grey-lighter;
 $text-strong: $white-ter;
 $title-color: $white-ter;
+$subtitle-color: $grey-lighter;
+
+// Temp: This can be removed after Bulma 0.5.1
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;

src/css/main.scss

@@ -2,10 +2,29 @@
 @import './variables';
 @import '~bulma';
 
-.title {
+.alt-font {
     font-family: Splatoon1, $original-family-sans-serif;
 }
 
+.title-effect {
+    color: $title-color;
+    background: #460fc8 url(../img/bkg-stripes.png);
+
+    display: inline-block;
+
+    padding: 2px 48px 2px 20px;
+    margin: 0 0 10px -20px;
+
+    -webkit-mask-image: url(../img/bkg-header.png);
+    mask-image: url(../img/bkg-header.png);
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    -webkit-mask-position: right center;
+    mask-position: right center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+}
+
 html {
     background: #191919 url(../img/bkg-squid.png) top;
     background-size: 360px 360px;
@@ -20,15 +39,25 @@ html {
     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;
+    mask-image: url(../img/bkg-mask-product.png);
     -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
     // Original value: 500px 800px
-    mask-size: 600px 960px;
     -webkit-mask-size: 600px 960px;
-    mask-position: center top;
+    mask-size: 600px 960px;
     -webkit-mask-position: center top;
+    mask-position: center top;
+
+    &.tilt-right {
+        -webkit-transform: rotate(1.4deg);
+        transform: rotate(1.4deg);
+    }
+
+    &.tilt-left {
+        -webkit-transform: rotate(-1.4deg);
+        transform: rotate(-1.4deg);
+    }
 
     .schedule-icon {
         display: inline-block;
@@ -78,6 +107,13 @@ html {
     }
 }
 
+.upcoming-schedule {
+    .rule-name {
+        color: $title-color;
+        font-size: 1.1rem;
+    }
+}
+
 .stage-image {
     background-size: contain;
     background-repeat: no-repeat;

src/js/components/App.vue

@@ -1,18 +1,22 @@
 <template>
-    <div>
-        <div v-if="loading">
-            Loading...
-        </div>
-        <div v-else>
-            <div class="columns">
-                <div class="column">
-                    <ScheduleBox class="schedule-box regular" :schedules="regular" :now="now"></ScheduleBox>
+    <div class="hero is-fullheight">
+        <div class="hero-body">
+            <div class="container is-fluid">
+                <div v-if="loading">
+                    Loading...
                 </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 v-else>
+                    <div class="columns is-desktop">
+                        <div class="column">
+                            <ScheduleBox class="schedule-box tilt-left regular" :schedules="regular" :now="now"></ScheduleBox>
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="schedule-box tilt-right ranked" :schedules="ranked" :now="now"></ScheduleBox>
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="schedule-box tilt-left league" :schedules="league" :now="now"></ScheduleBox>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

src/js/components/ScheduleBox.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="firstSchedule">
-        <h2 class="title is-2">
+        <h2 class="title is-3 is-size-2-fullhd alt-font">
             <span class="schedule-icon"></span>{{ firstSchedule.game_mode.name }}
         </h2>
 
@@ -23,33 +23,40 @@
             </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>in {{ upcomingSchedule.start_time - now | duration }}</div>
-                        <div>
-                            {{ upcomingSchedule.start_time | time }} &ndash;
-                            {{ upcomingSchedule.end_time | time }}
-                        </div>
-                    </div>
-                    <div class="column is-8">
-                        <div class="columns is-mobile is-slim">
-                            <div class="column"><Stage :stage="upcomingSchedule.stage_a"></Stage></div>
-                            <div class="column"><Stage :stage="upcomingSchedule.stage_b"></Stage></div>
-                        </div>
+        <div class="upcoming-schedule" v-if="upcomingSchedule">
+            <div class="is-size-5 title-effect alt-font">
+                Next
+            </div>
+            <div class="level is-mobile is-marginless is-hidden-tablet">
+                <div class="level-left">
+                    <div class="level-item rule-name">{{ upcomingSchedule.rule.name }}</div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        in {{ upcomingSchedule.start_time - now | duration }},
+                        {{ upcomingSchedule.start_time | time }} &ndash;
+                        {{ upcomingSchedule.end_time | time }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="columns is-slim" v-if="upcomingSchedule">
+                <div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
+                    <div class="title is-6 is-size-5-fullhd">{{ upcomingSchedule.rule.name }}</div>
+                    <div class="subtitle is-7 is-size-6-fullhd ">
+                        in {{ upcomingSchedule.start_time - now | duration }}
+                        <br />
+                        {{ upcomingSchedule.start_time | time }} &ndash;
+                        {{ upcomingSchedule.end_time | time }}
+                    </div>
+                </div>
+                <div class="column is-8">
+                    <div class="columns is-mobile is-slim">
+                        <div class="column"><Stage :stage="upcomingSchedule.stage_a"></Stage></div>
+                        <div class="column"><Stage :stage="upcomingSchedule.stage_b"></Stage></div>
                     </div>
                 </div>
             </div>
-            <div class="column is-narrow"><button @click="nextSchedule">Next</button></div>
         </div>
     </div>
 </template>
@@ -89,16 +96,16 @@ export default {
         },
     },
     methods: {
-        nextSchedule() {
-            this.upcomingScheduleIndex++;
-            if (this.upcomingScheduleIndex >= this.upcomingSchedules.length)
-                this.upcomingScheduleIndex = 0;
-        },
-        previousSchedule() {
-            this.upcomingScheduleIndex--;
-            if (this.upcomingScheduleIndex < 0)
-                this.upcomingScheduleIndex = this.upcomingSchedules.length - 1;
-        },
+        // nextSchedule() {
+        //     this.upcomingScheduleIndex++;
+        //     if (this.upcomingScheduleIndex >= this.upcomingSchedules.length)
+        //         this.upcomingScheduleIndex = 0;
+        // },
+        // previousSchedule() {
+        //     this.upcomingScheduleIndex--;
+        //     if (this.upcomingScheduleIndex < 0)
+        //         this.upcomingScheduleIndex = this.upcomingSchedules.length - 1;
+        // },
     },
 }
 </script>