From b8753da78de722884ba27660496502f896dfbce1 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Mon, 7 Sep 2026 13:48:03 -0700
Subject: [PATCH] Preserve original Vue component formatting

---
 eslint.config.mjs                             |  10 +-
 src/web/components/404.vue                    |  50 +--
 src/web/components/AboutDialog.vue            | 104 +++---
 src/web/components/App.vue                    |   6 +-
 src/web/components/CalendarDialog.vue         | 116 +++---
 src/web/components/CalendarLink.vue           |  72 ++--
 src/web/components/Dropdown.vue               |  53 ++-
 src/web/components/DropdownBase.vue           |  32 +-
 src/web/components/Main.vue                   | 339 +++++++++---------
 src/web/components/Modal.vue                  |  58 +--
 src/web/components/Screenshots.vue            |   6 +-
 src/web/components/VoteBanner.vue             |  38 +-
 .../screenshots/ScreenshotHelper.vue          | 102 +++---
 src/web/components/screenshots/Wrapper.vue    | 106 +++---
 .../screenshots/newweapon/NewWeapon.vue       |  10 +-
 .../screenshots/salmonrun/SalmonRun.vue       |  26 +-
 .../screenshots/salmonrun/SalmonRunGear.vue   |  10 +-
 .../screenshots/schedules/ScheduleBox.vue     |  66 ++--
 .../screenshots/schedules/Schedules.vue       |  96 ++---
 .../screenshots/splatfest/Splatfest.vue       |  28 +-
 .../screenshots/splatnetgear/SplatNetGear.vue |  38 +-
 .../components/splatoon/FinalFestDialog.vue   | 118 +++---
 .../components/splatoon/GameModeHeader.vue    |  28 +-
 .../components/splatoon/IdolResultsBox.vue    |  54 +--
 .../components/splatoon/IdolResultsRow.vue    |  46 +--
 .../components/splatoon/MerchandiseBox.vue    | 134 ++++---
 src/web/components/splatoon/NewWeaponBox.vue  |  48 +--
 .../splatoon/NewWeaponsContainer.vue          |  16 +-
 src/web/components/splatoon/SalmonRunBox.vue  | 218 +++++------
 .../splatoon/SalmonRunDetailsBar.vue          |  66 ++--
 .../splatoon/SalmonRunGearDialog.vue          |  14 +-
 src/web/components/splatoon/ScheduleBox.vue   |  84 ++---
 .../components/splatoon/ScheduleDialog.vue    |  20 +-
 src/web/components/splatoon/ScheduleList.vue  |  54 +--
 src/web/components/splatoon/ScheduleRow.vue   | 114 +++---
 .../splatoon/SplatNetGearDialog.vue           |  30 +-
 src/web/components/splatoon/SplatfestBox.vue  | 158 ++++----
 .../splatoon/SplatfestHistoryDialog.vue       | 138 ++++---
 .../splatoon/SplatfestResultsBox.vue          |  66 ++--
 .../splatoon/SplatfestResultsRow.vue          |  56 +--
 .../splatoon/SplatfestWinnerBar.vue           |   6 +-
 src/web/components/splatoon/Stage.vue         |  38 +-
 42 files changed, 1392 insertions(+), 1480 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 917a703..0241c41 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -28,10 +28,16 @@ export default [
       'object-curly-spacing': ['warn', 'always'],
 
       // Vue
+      // Preserve this site's existing template layout instead of reformatting it on lint.
+      'vue/html-indent': ['warn', 4],
+      'vue/attributes-order': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/multiline-html-element-content-newline': 'off',
+      'vue/block-order': 'off',
       'vue/multi-word-component-names': 'off',
       'vue/require-default-prop': 'off',
-      'vue/max-attributes-per-line': ['warn', { singleline: { max: 4 } }],
-      'vue/html-self-closing': ['warn', { html: { void: 'always' } }],
       'vue/no-deprecated-filter': 'off',
       'vue/require-toggle-inside-transition': 'off',
       'vue/no-deprecated-destroyed-lifecycle': 'off',
diff --git a/src/web/components/404.vue b/src/web/components/404.vue
index 96b2d31..d321d39 100644
--- a/src/web/components/404.vue
+++ b/src/web/components/404.vue
@@ -1,31 +1,31 @@
 <template>
-  <div class="hero is-fullheight">
-    <div class="hero-body">
-      <!-- 404! -->
-      <div class="error404 tilt-left">
-        <div class="hook-box">
-          <div class="box-header">
-            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-              404 Not Found
-            </h2>
-          </div>
+    <div class="hero is-fullheight">
+        <div class="hero-body">
+            <!-- 404! -->
+            <div class="error404 tilt-left">
+                <div class="hook-box">
+                    <div class="box-header">
+                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                            404 Not Found
+                        </h2>
+                    </div>
 
-          <img src="~@/web/assets/img/404.jpg" />
+                    <img src="~@/web/assets/img/404.jpg" />
 
-          <div class="box-footer">
-            <p class="has-text-centered">
-              <router-link to="/" class="button is-translucent is-rounded">
-                <span class="icon squid-icon-tilt">
-                  <span class="fa squid-squid" />
-                </span>
-                <span class="font-splatoon2">
-                  Return to Splatoon2.ink
-                </span>
-              </router-link>
-            </p>
-          </div>
+                    <div class="box-footer">
+                        <p class="has-text-centered">
+                            <router-link to="/" class="button is-translucent is-rounded">
+                                <span class="icon squid-icon-tilt">
+                                    <span class="fa squid-squid"></span>
+                                </span>
+                                <span class="font-splatoon2">
+                                    Return to Splatoon2.ink
+                                </span>
+                            </router-link>
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
diff --git a/src/web/components/AboutDialog.vue b/src/web/components/AboutDialog.vue
index dd5382c..63dd7a3 100644
--- a/src/web/components/AboutDialog.vue
+++ b/src/web/components/AboutDialog.vue
@@ -1,60 +1,52 @@
 <template>
-  <Modal @close="$emit('close')">
-    <div class="modal-content tilt-left-slight">
-      <div class="about-box">
-        <div class="hook-box">
-          <div class="content">
-            <h3 class="font-splatoon2 title is-3">
-              <div class="image is-pulled-right hero-image is-hidden-touch">
-                <img src="~@/web/assets/img/hero-char.png" />
-              </div>
-              Hello!
-            </h3>
-            <div class="inner-content">
-              <p>
-                Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
-              </p>
-              <p>
-                This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
-                and <a href="http://bulma.io/" target="_blank">Bulma</a>.
-                Data comes from the SplatNet 2 API and other manually-maintained sources.
-              </p>
-              <p>
-                Original SplatNet gear ability/price data comes from
-                <a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
-              </p>
-              <p>
-                Regional flag icons are from
-                <a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
-              </p>
-              <p>
-                Source code for this site is available on
-                <a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
-              </p>
-              <p>
-                If you'd like to use this site's data in your own site/bot/app, please review the data access policy
-                <a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
-              </p>
-              <p>
-                <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
-                or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
-              </p>
+    <Modal @close="$emit('close')">
+        <div class="modal-content tilt-left-slight">
+            <div class="about-box">
+                <div class="hook-box">
+                    <div class="content">
+                        <h3 class="font-splatoon2 title is-3">
+                            <div class="image is-pulled-right hero-image is-hidden-touch">
+                                <img src="~@/web/assets/img/hero-char.png" />
+                            </div>
+                            Hello!
+                        </h3>
+                        <div class="inner-content">
+                            <p>
+                                Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
+                            </p>
+                            <p>
+                                This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
+                                and <a href="http://bulma.io/" target="_blank">Bulma</a>.
+                                Data comes from the SplatNet 2 API and other manually-maintained sources.
+                            </p>
+                            <p>
+                                Original SplatNet gear ability/price data comes from
+                                <a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
+                            </p>
+                            <p>
+                                Regional flag icons are from
+                                <a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
+                            </p>
+                            <p>
+                                Source code for this site is available on
+                                <a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
+                            </p>
+                            <p>
+                                If you'd like to use this site's data in your own site/bot/app, please review the data access policy
+                                <a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
+                            </p>
+                            <p>
+                                <a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
+                                or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </Modal>
+    </Modal>
 </template>
 
-<script>
-import Modal from './Modal.vue';
-
-export default {
-    components: { Modal },
-};
-</script>
-
 <style scoped>
 .modal-content {
     max-height: 100vh;
@@ -69,3 +61,11 @@ export default {
     z-index: 2;
 }
 </style>
+
+<script>
+import Modal from './Modal.vue';
+
+export default {
+    components: { Modal },
+};
+</script>
diff --git a/src/web/components/App.vue b/src/web/components/App.vue
index d3e2cd8..fbc544a 100644
--- a/src/web/components/App.vue
+++ b/src/web/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+    <div id="app">
+        <router-view />
+    </div>
 </template>
diff --git a/src/web/components/CalendarDialog.vue b/src/web/components/CalendarDialog.vue
index fe7ca6b..57f9411 100644
--- a/src/web/components/CalendarDialog.vue
+++ b/src/web/components/CalendarDialog.vue
@@ -1,68 +1,59 @@
 <template>
-  <Modal @close="$emit('close')">
-    <div class="modal-content tilt-left-slight">
-      <div class="calendar-box">
-        <div class="hook-box">
-          <div class="content">
-            <h3 class="font-splatoon2 title is-3">
-              <div class="image is-pulled-right hero-image is-hidden-touch">
-                <img src="~@/web/assets/img/hero-char-2.png" />
-              </div>
-              Calendar Feeds
-            </h3>
-            <div class="inner-content">
-              <p>
-                Add data from Splatoon2.ink to your calendar!
-              </p>
+    <Modal @close="$emit('close')">
+        <div class="modal-content tilt-left-slight">
+            <div class="calendar-box">
+                <div class="hook-box">
+                    <div class="content">
+                        <h3 class="font-splatoon2 title is-3">
+                            <div class="image is-pulled-right hero-image is-hidden-touch">
+                                <img src="~@/web/assets/img/hero-char-2.png" />
+                            </div>
+                            Calendar Feeds
+                        </h3>
+                        <div class="inner-content">
+                            <p>
+                                Add data from Splatoon2.ink to your calendar!
+                            </p>
 
-              <h4 class="font-splatoon2 title is-4">
-                Salmon Run
-              </h4>
-              <p>
-                <CalendarLink
-                  title="Salmon Run Schedules"
-                  link="data/coop-schedules.ics"
-                  google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
-                />
-              </p>
+                            <h4 class="font-splatoon2 title is-4">
+                                Salmon Run
+                            </h4>
+                            <p>
+                                <CalendarLink
+                                    title="Salmon Run Schedules"
+                                    link="data/coop-schedules.ics"
+                                    google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
+                                />
+                            </p>
 
-              <h4 class="font-splatoon2 title is-4">
-                Splatfests
-              </h4>
-              <p>
-                <CalendarLink
-                  :title="$t('regions.na.name')"
-                  link="data/festivals-na.ics"
-                  google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
-                />
-                <CalendarLink
-                  :title="$t('regions.eu.name')"
-                  link="data/festivals-eu.ics"
-                  google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
-                />
-                <CalendarLink
-                  :title="$t('regions.jp.name')"
-                  link="data/festivals-jp.ics"
-                  google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
-                />
-              </p>
+                            <h4 class="font-splatoon2 title is-4">
+                                Splatfests
+                            </h4>
+                            <p>
+                                <CalendarLink
+                                    :title="$t('regions.na.name')"
+                                    link="data/festivals-na.ics"
+                                    google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
+                                />
+                                <CalendarLink
+                                    :title="$t('regions.eu.name')"
+                                    link="data/festivals-eu.ics"
+                                    google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
+                                />
+                                <CalendarLink
+                                    :title="$t('regions.jp.name')"
+                                    link="data/festivals-jp.ics"
+                                    google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
+                                />
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </Modal>
+    </Modal>
 </template>
 
-<script>
-import Modal from './Modal.vue';
-import CalendarLink from './CalendarLink.vue';
-
-export default {
-    components: { Modal, CalendarLink },
-};
-</script>
-
 <style scoped>
 .modal-content {
     max-height: 100vh;
@@ -77,3 +68,12 @@ export default {
     z-index: 2;
 }
 </style>
+
+<script>
+import Modal from './Modal.vue';
+import CalendarLink from './CalendarLink.vue';
+
+export default {
+    components: { Modal, CalendarLink },
+};
+</script>
diff --git a/src/web/components/CalendarLink.vue b/src/web/components/CalendarLink.vue
index 4051e8e..bca0696 100644
--- a/src/web/components/CalendarLink.vue
+++ b/src/web/components/CalendarLink.vue
@@ -1,55 +1,27 @@
 <template>
-  <div class="dropdown" :class="{ 'is-active': isOpen }">
-    <div class="dropdown-trigger">
-      <a
-        v-click-outside="hide"
-        :href="directLink"
-        class="button is-link is-rounded"
-        :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }"
-        data-tooltip="Copied!"
-        @click.prevent="isOpen = !isOpen"
-      >
-        <span class="font-splatoon2">{{ title }}</span>
-        <span class="icon is-small">
-          <span class="chevron bottom" />
-        </span>
-      </a>
+    <div class="dropdown" :class="{ 'is-active': isOpen }">
+        <div class="dropdown-trigger">
+            <a :href="directLink" class="button is-link is-rounded" :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }" data-tooltip="Copied!" @click.prevent="isOpen = !isOpen" v-click-outside="hide">
+                <span class="font-splatoon2">{{ title }}</span>
+                <span class="icon is-small">
+                    <span class="chevron bottom"></span>
+                </span>
+            </a>
+        </div>
+        <div class="dropdown-menu" role="menu">
+            <div class="dropdown-content font-splatoon2 has-text-left">
+                <a :href="googleLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
+                    Google Calendar
+                </a>
+                <a :href="webcalLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
+                    Apple/Android/Outlook Calendar
+                </a>
+                <a :href="directLink" target="_blank" class="dropdown-item" @click.prevent.stop="hide" v-clipboard:copy="directLink" v-clipboard:success="onCopy" @touchstart.stop @touchend.stop>
+                    Copy ICS Link
+                </a>
+            </div>
+        </div>
     </div>
-    <div class="dropdown-menu" role="menu">
-      <div class="dropdown-content font-splatoon2 has-text-left">
-        <a
-          :href="googleLink"
-          target="_blank"
-          class="dropdown-item"
-          @touchstart.stop
-          @touchend.stop
-        >
-          Google Calendar
-        </a>
-        <a
-          :href="webcalLink"
-          target="_blank"
-          class="dropdown-item"
-          @touchstart.stop
-          @touchend.stop
-        >
-          Apple/Android/Outlook Calendar
-        </a>
-        <a
-          v-clipboard:copy="directLink"
-          v-clipboard:success="onCopy"
-          :href="directLink"
-          target="_blank"
-          class="dropdown-item"
-          @click.prevent.stop="hide"
-          @touchstart.stop
-          @touchend.stop
-        >
-          Copy ICS Link
-        </a>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/Dropdown.vue b/src/web/components/Dropdown.vue
index aac1a44..476be2d 100644
--- a/src/web/components/Dropdown.vue
+++ b/src/web/components/Dropdown.vue
@@ -1,36 +1,27 @@
 <template>
-  <div class="dropdown" :class="{ 'is-active': isOpen }">
-    <div class="dropdown-trigger">
-      <button v-if="tag == 'button'" v-click-outside="hide" class="button is-clear font-splatoon2" @click="isOpen = !isOpen">
-        <span v-if="selectedOption">{{ selectedOption.name }}</span>
-        <span class="icon is-small">
-          <span class="chevron bottom" />
-        </span>
-      </button>
-      <a v-if="tag == 'a'" v-click-outside="hide" @click="isOpen = !isOpen">
-        <span v-if="selectedOption">{{ selectedOption.name }}</span>
-        <span class="icon is-small">
-          <span class="chevron top" />
-        </span>
-      </a>
+    <div class="dropdown" :class="{ 'is-active': isOpen }">
+        <div class="dropdown-trigger">
+            <button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'button'">
+                <span v-if="selectedOption">{{ selectedOption.name }}</span>
+                <span class="icon is-small">
+                    <span class="chevron bottom"></span>
+                </span>
+            </button>
+            <a @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'a'">
+                <span v-if="selectedOption">{{ selectedOption.name }}</span>
+                <span class="icon is-small">
+                    <span class="chevron top"></span>
+                </span>
+            </a>
+        </div>
+        <div class="dropdown-menu" role="menu">
+            <div class="dropdown-content font-splatoon2 has-text-left">
+                <a href="#" class="dropdown-item" v-for="option in options" :key="option.key" :class="{ 'is-active': option.key == value }" @click.prevent="select(option)" @touchstart.stop @touchend.prevent="select(option)">
+                    {{ option.name }}
+                </a>
+            </div>
+        </div>
     </div>
-    <div class="dropdown-menu" role="menu">
-      <div class="dropdown-content font-splatoon2 has-text-left">
-        <a
-          v-for="option in options"
-          :key="option.key"
-          href="#"
-          class="dropdown-item"
-          :class="{ 'is-active': option.key == value }"
-          @click.prevent="select(option)"
-          @touchstart.stop
-          @touchend.prevent="select(option)"
-        >
-          {{ option.name }}
-        </a>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/DropdownBase.vue b/src/web/components/DropdownBase.vue
index 4b093f5..98a93b1 100644
--- a/src/web/components/DropdownBase.vue
+++ b/src/web/components/DropdownBase.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="dropdown" :class="{ 'is-active': isActive }">
-    <div class="dropdown-trigger">
-      <a v-click-outside="hide" :class="triggerClass" @click="isActive = !isActive">
-        <slot name="trigger">
-          <span>{{ label }}</span>
-          <span class="icon is-small">
-            <span class="chevron bottom" />
-          </span>
-        </slot>
-      </a>
+    <div class="dropdown" :class="{ 'is-active': isActive }">
+        <div class="dropdown-trigger">
+            <a :class="triggerClass" @click="isActive = !isActive" v-click-outside="hide">
+                <slot name="trigger">
+                    <span>{{ label }}</span>
+                    <span class="icon is-small">
+                        <span class="chevron bottom"></span>
+                    </span>
+                </slot>
+            </a>
+        </div>
+        <div class="dropdown-menu" role="menu">
+            <div class="dropdown-content">
+                <slot />
+            </div>
+        </div>
     </div>
-    <div class="dropdown-menu" role="menu">
-      <div class="dropdown-content">
-        <slot />
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/Main.vue b/src/web/components/Main.vue
index 7a5b829..598e493 100644
--- a/src/web/components/Main.vue
+++ b/src/web/components/Main.vue
@@ -1,183 +1,182 @@
 <template>
-  <div id="main" class="hero is-fullheight">
-    <!-- Site header -->
-    <div class="hero-head">
-      <!-- <VoteBanner /> -->
+    <div class="hero is-fullheight" id="main">
 
-      <div class="container is-fluid">
-        <div class="level is-marginless">
-          <div class="level-left">
-            <div class="level-item">
-              <h1 class="title is-1 font-splatoon1 is-inline">
-                Splatoon 2
-              </h1>
-            </div>
-          </div>
+        <!-- Site header -->
+        <div class="hero-head">
+            <!-- <VoteBanner /> -->
 
-          <div class="level-right">
-            <div class="level-item">
-              <h3 class="subtitle is-3 font-splatoon2 is-inline">
-                {{ $t('ui.map_schedules') }}
-              </h3>
+            <div class="container is-fluid">
+                <div class="level is-marginless">
+                    <div class="level-left">
+                        <div class="level-item">
+                            <h1 class="title is-1 font-splatoon1 is-inline">Splatoon 2</h1>
+                        </div>
+                    </div>
+
+                    <div class="level-right">
+                        <div class="level-item">
+                            <h3 class="subtitle is-3 font-splatoon2 is-inline">{{ $t('ui.map_schedules') }}</h3>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="level">
+                    <div class="level-left">
+                        <div class="level-item">
+                            <a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
+                                <span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
+                            </a>
+                        </div>
+                        <div class="level-item">
+                            <a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
+                                <span class="font-splatoon2">Splatoon 3</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="level-right">
+                        <div class="level-item" v-if="showFestivalRegionDropdown">
+                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
+                        </div>
+
+
+                        <div class="level-item" v-if="showFestivalRegionDropdown">
+                            <!-- Empty spacer to add some room when festivals are active -->
+                        </div>
+
+                        <div class="level-item" v-if="hasMerchandises">
+                            <router-link to="/splatnet" class="button is-translucent-dark is-rounded">
+                                <span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
+                            </router-link>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
 
-        <div class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
-                <span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
-              </a>
-            </div>
-            <div class="level-item">
-              <a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
-                <span class="font-splatoon2">Splatoon 3</span>
-              </a>
-            </div>
-          </div>
-          <div class="level-right">
-            <div v-if="showFestivalRegionDropdown" class="level-item">
-              <Dropdown v-model="selectedRegionKey" :options="regions" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
-            </div>
+        <!-- Main body area -->
+        <div class="hero-body">
+            <div class="container is-fluid">
+                <!-- Loading spinner -->
+                <div v-if="loading" class="has-text-centered">
+                    <span class="icon is-large">
+                        <span class="fa fa-3x fa-spin squid-refresh"></span>
+                    </span>
+                </div>
 
+                <div v-else>
+                    <!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
+                    <div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
+                        <div class="column">
+                            <div class="splatfest tilt-left">
+                                <div class="hook-box">
+                                    <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
+                        </div>
+                    </div>
 
-            <div v-if="showFestivalRegionDropdown" class="level-item">
-              <!-- Empty spacer to add some room when festivals are active -->
-            </div>
+                    <!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
+                    <div v-else class="columns is-desktop">
+                        <div class="column">
+                            <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
+                        </div>
+                    </div>
 
-            <div v-if="hasMerchandises" class="level-item">
-              <router-link to="/splatnet" class="button is-translucent-dark is-rounded">
-                <span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
-              </router-link>
+                    <!-- Upcoming Splatfest and Salmon Run boxes -->
+                    <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
+                        <div class="column" v-if="showSplatfestOnBottomRow">
+                            <div class="splatfest tilt-right" style="margin-top: 40px">
+                                <div class="hook-box">
+                                    <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="column" v-if="shiftySchedule">
+                            <div class="shifty-box font-splatoon2 tilt-right">
+                                <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
+                                    <template v-if="shiftySchedule.stages.length === 1">
+                                        Current Shifty Station
+                                    </template>
+                                    <template v-else>
+                                        Current Shifty Stations
+                                    </template>
+                                </h3>
+                                <div class="columns">
+                                    <div class="column">
+                                        <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
+                                    </div>
+                                    <div class="column" v-if="shiftySchedule.stages[1]">
+                                        <Stage :stage="shiftySchedule.stages[1]" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="column" v-if="hasSalmonRun">
+                            <div class="salmon-run tilt-left">
+                                <div class="hook-box">
+                                    <SalmonRunBox />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }" v-if="hasWeapons && showWeaponsNextToSalmonRun">
+                            <NewWeaponsContainer :max-weapons-per-row="3" />
+                        </div>
+                    </div>
+
+                    <div style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }" v-if="showExtraWeaponsAtBottom">
+                        <NewWeaponsContainer />
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
+
+        <!-- Footer -->
+        <div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
+            <div class="container is-fluid">
+                {{ $t('ui.disclaimer') }}
+                &ndash;
+                <router-link to="/about">{{ $t('ui.about') }}</router-link>
+                &ndash;
+                <a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
+                <!-- &ndash; -->
+                <!-- <router-link to="/finalfest">FinalFest</router-link> -->
+                &ndash;
+                <router-link to="/calendars">Calendar Feeds</router-link>
+                &ndash;
+                <a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
+                <template v-if="hasSplatfests">
+                    &ndash;
+                    <router-link to="/splatfests">{{ $t('splatfest.previous') }}</router-link>
+                </template>
+                &ndash;
+                <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
+            </div>
+        </div>
+
+        <router-view @close="$router.push('/')" />
     </div>
-
-    <!-- Main body area -->
-    <div class="hero-body">
-      <div class="container is-fluid">
-        <!-- Loading spinner -->
-        <div v-if="loading" class="has-text-centered">
-          <span class="icon is-large">
-            <span class="fa fa-3x fa-spin squid-refresh" />
-          </span>
-        </div>
-
-        <div v-else>
-          <!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
-          <div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
-            <div class="column">
-              <div class="splatfest tilt-left">
-                <div class="hook-box">
-                  <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
-                </div>
-              </div>
-            </div>
-            <div class="column">
-              <ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
-            </div>
-          </div>
-
-          <!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
-          <div v-else class="columns is-desktop">
-            <div class="column">
-              <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
-            </div>
-            <div class="column">
-              <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
-            </div>
-            <div class="column">
-              <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
-            </div>
-          </div>
-
-          <!-- Upcoming Splatfest and Salmon Run boxes -->
-          <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
-            <div v-if="showSplatfestOnBottomRow" class="column">
-              <div class="splatfest tilt-right" style="margin-top: 40px">
-                <div class="hook-box">
-                  <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
-                </div>
-              </div>
-            </div>
-
-            <div v-if="shiftySchedule" class="column">
-              <div class="shifty-box font-splatoon2 tilt-right">
-                <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
-                  <template v-if="shiftySchedule.stages.length === 1">
-                    Current Shifty Station
-                  </template>
-                  <template v-else>
-                    Current Shifty Stations
-                  </template>
-                </h3>
-                <div class="columns">
-                  <div class="column">
-                    <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
-                  </div>
-                  <div v-if="shiftySchedule.stages[1]" class="column">
-                    <Stage :stage="shiftySchedule.stages[1]" />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="hasSalmonRun" class="column">
-              <div class="salmon-run tilt-left">
-                <div class="hook-box">
-                  <SalmonRunBox />
-                </div>
-              </div>
-            </div>
-
-            <div v-if="hasWeapons && showWeaponsNextToSalmonRun" class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }">
-              <NewWeaponsContainer :max-weapons-per-row="3" />
-            </div>
-          </div>
-
-          <div v-if="showExtraWeaponsAtBottom" style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }">
-            <NewWeaponsContainer />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
-      <div class="container is-fluid">
-        {{ $t('ui.disclaimer') }}
-        &ndash;
-        <router-link to="/about">
-          {{ $t('ui.about') }}
-        </router-link>
-        &ndash;
-        <a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
-        <!-- &ndash; -->
-        <!-- <router-link to="/finalfest">FinalFest</router-link> -->
-        &ndash;
-        <router-link to="/calendars">
-          Calendar Feeds
-        </router-link>
-        &ndash;
-        <a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
-        <template v-if="hasSplatfests">
-          &ndash;
-          <router-link to="/splatfests">
-            {{ $t('splatfest.previous') }}
-          </router-link>
-        </template>
-        &ndash;
-        <Dropdown v-model="selectedLanguageKey" :options="languages" tag="a" class="is-right is-up" />
-      </div>
-    </div>
-
-    <router-view @close="$router.push('/')" />
-  </div>
 </template>
 
+<style>
+#main .limited-width {
+    max-width: 1392px;
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>
+
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import Dropdown from './Dropdown.vue';
@@ -292,11 +291,3 @@ export default {
     },
 };
 </script>
-
-<style>
-#main .limited-width {
-    max-width: 1392px;
-    margin-left: auto;
-    margin-right: auto;
-}
-</style>
diff --git a/src/web/components/Modal.vue b/src/web/components/Modal.vue
index abc50a6..e716870 100644
--- a/src/web/components/Modal.vue
+++ b/src/web/components/Modal.vue
@@ -1,13 +1,35 @@
 <template>
-  <transition name="modal">
-    <div v-portal class="modal is-active">
-      <div class="modal-background" @click="close" />
-      <slot />
-      <button class="modal-close is-large" @click="close" />
-    </div>
-  </transition>
+    <transition name="modal">
+        <div class="modal is-active" v-portal>
+            <div class="modal-background" @click="close"></div>
+            <slot></slot>
+            <button class="modal-close is-large" @click="close"></button>
+        </div>
+    </transition>
 </template>
 
+<style lang="scss">
+.modal-enter-active, .modal-leave-active {
+    &, &>.modal-content, &>.modal-card {
+        transition: all 0.15s ease;
+    }
+}
+
+.modal-enter, .modal-leave-active {
+    opacity: 0;
+
+    &>.modal-content, &>.modal-card {
+        &.tilt-left-slight {
+            transform: rotate(-1.0deg) scale(0.98);
+        }
+        &.tilt-right-slight {
+            transform: rotate(1.0deg) scale(0.98);
+        }
+        transform: scale(0.98);
+    }
+}
+</style>
+
 <script>
 // This tracks open modals in order to add/remove the "has-modal" class to the body
 
@@ -54,25 +76,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.modal-enter-active, .modal-leave-active {
-    &, &>.modal-content, &>.modal-card {
-        transition: all 0.15s ease;
-    }
-}
-
-.modal-enter, .modal-leave-active {
-    opacity: 0;
-
-    &>.modal-content, &>.modal-card {
-        &.tilt-left-slight {
-            transform: rotate(-1.0deg) scale(0.98);
-        }
-        &.tilt-right-slight {
-            transform: rotate(1.0deg) scale(0.98);
-        }
-        transform: scale(0.98);
-    }
-}
-</style>
diff --git a/src/web/components/Screenshots.vue b/src/web/components/Screenshots.vue
index 7bc57df..dca619b 100644
--- a/src/web/components/Screenshots.vue
+++ b/src/web/components/Screenshots.vue
@@ -1,7 +1,7 @@
 <template>
-  <div id="screenshots">
-    <router-view />
-  </div>
+    <div id="screenshots">
+        <router-view></router-view>
+    </div>
 </template>
 
 <script>
diff --git a/src/web/components/VoteBanner.vue b/src/web/components/VoteBanner.vue
index 2730e16..cba32af 100644
--- a/src/web/components/VoteBanner.vue
+++ b/src/web/components/VoteBanner.vue
@@ -1,26 +1,26 @@
 <template>
-  <div v-if="shouldShow" class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px">
-    <div class="container is-fluid">
-      <div style="width: 100%; display: flex; align-items: center">
-        <div class="has-text-centered" style="flex: 1; margin: 10px">
-          <div>
-            🗳️
-            <strong>VOTE 2020!</strong>
-            Make your voice heard this year!
+    <div class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px" v-if="shouldShow">
+        <div class="container is-fluid">
+            <div style="width: 100%; display: flex; align-items: center">
+                <div class="has-text-centered" style="flex: 1; margin: 10px">
+                    <div>
+                        🗳️
+                        <strong>VOTE 2020!</strong>
+                        Make your voice heard this year!
 
-            Check
-            <a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
-            and
-            <a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
-            to get information for your state.
-          </div>
+                        Check
+                        <a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
+                        and
+                        <a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
+                        to get information for your state.
+                    </div>
+                </div>
+                <div style="margin: 5px">
+                    <a class="delete" @click.prevent="hide"></a>
+                </div>
+            </div>
         </div>
-        <div style="margin: 5px">
-          <a class="delete" @click.prevent="hide" />
-        </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/ScreenshotHelper.vue b/src/web/components/screenshots/ScreenshotHelper.vue
index 19e91c2..1261e08 100644
--- a/src/web/components/screenshots/ScreenshotHelper.vue
+++ b/src/web/components/screenshots/ScreenshotHelper.vue
@@ -1,62 +1,62 @@
 <template>
-  <div class="hero is-fullheight">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <div v-if="latestSchedule">
-          <strong>
-            <router-link :to="`/schedules/${latestSchedule.start_time}`">
-              Map Schedules
-            </router-link>
-          </strong>
-        </div>
+    <div class="hero is-fullheight">
+        <div class="hero-body">
+            <div class="container has-text-centered">
+                <div v-if="latestSchedule">
+                    <strong>
+                        <router-link :to="`/schedules/${latestSchedule.start_time}`">
+                            Map Schedules
+                        </router-link>
+                    </strong>
+                </div>
 
-        <div v-if="latestGear">
-          <strong>
-            <router-link :to="`/splatNetGear/${latestGearTime}`">
-              SplatNet Gear
-            </router-link>
-          </strong>
-        </div>
+                <div v-if="latestGear">
+                    <strong>
+                        <router-link :to="`/splatNetGear/${latestGearTime}`">
+                            SplatNet Gear
+                        </router-link>
+                    </strong>
+                </div>
 
-        <div v-if="latestSalmonRun">
-          <strong>
-            <router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
-              Salmon Run
-            </router-link>
-          </strong>
-        </div>
+                <div v-if="latestSalmonRun">
+                    <strong>
+                        <router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
+                            Salmon Run
+                        </router-link>
+                    </strong>
+                </div>
 
-        <div v-if="salmonRunGear">
-          <strong>
-            <router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
-              Salmon Run Gear
-            </router-link>
-          </strong>
-        </div>
+                <div v-if="salmonRunGear">
+                    <strong>
+                        <router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
+                            Salmon Run Gear
+                        </router-link>
+                    </strong>
+                </div>
 
-        <div v-if="newWeaponAvailability">
-          <strong>
-            <router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
-              New Weapon
-            </router-link>
-          </strong>
-        </div>
+                <div v-if="newWeaponAvailability">
+                    <strong>
+                        <router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
+                            New Weapon
+                        </router-link>
+                    </strong>
+                </div>
 
-        <div v-if="splatfests">
-          Splatfest:
-          <strong>
-            <router-link
-              v-for="splatfest in splatfests"
-              :key="splatfest.region"
-              :to="`/splatfest/${splatfest.region}/${splatfest.time}`"
-            >
-              {{ splatfest.region }}
-            </router-link>
-          </strong>
+                <div v-if="splatfests">
+                    Splatfest:
+                    <strong>
+                        <router-link
+                            v-for="splatfest in splatfests"
+                            :key="splatfest.region"
+                            :to="`/splatfest/${splatfest.region}/${splatfest.time}`"
+                        >
+                            {{ splatfest.region }}
+                        </router-link>
+                    </strong>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/Wrapper.vue b/src/web/components/screenshots/Wrapper.vue
index d6be020..8da201a 100644
--- a/src/web/components/screenshots/Wrapper.vue
+++ b/src/web/components/screenshots/Wrapper.vue
@@ -1,69 +1,65 @@
 <template>
-  <div id="main" class="hero is-fullheight">
-    <div class="hero-body">
-      <div class="container">
-        <slot />
-      </div>
-    </div>
+    <div class="hero is-fullheight" id="main">
+        <div class="hero-body">
+            <div class="container">
+                <slot></slot>
+            </div>
+        </div>
 
-    <div class="hero-foot">
-      <div class="container">
-        <div class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <div class="image is-32x32">
-                <img src="~@/web/assets/img/favicon.svg" />
-              </div>
-            </div>
-            <div class="level-item">
-              <h1 class="title is-4 font-splatoon2">
-                {{ title }}
-              </h1>
-            </div>
-            <div class="level-item">
-&nbsp;
-            </div>
-            <div class="level-item">
-              <div class="font-splatoon2 is-size-7 has-text-grey-light">
-                <div class="image is-16x16 bluesky-logo">
-                  <img src="~@/web/assets/img/bluesky-white.svg" />
-                </div>
-                @splatoon2.ink
-              </div>
-            </div>
-            <!-- <div class="level-item">&nbsp;</div>
+        <div class="hero-foot">
+            <div class="container">
+                <div class="level">
+                    <div class="level-left">
+                        <div class="level-item">
+                            <div class="image is-32x32">
+                                <img src="~@/web/assets/img/favicon.svg" />
+                            </div>
+                        </div>
+                        <div class="level-item">
+                            <h1 class="title is-4 font-splatoon2">{{ title }}</h1>
+                        </div>
+                        <div class="level-item">&nbsp;</div>
+                        <div class="level-item">
+                            <div class="font-splatoon2 is-size-7 has-text-grey-light">
+                                <div class="image is-16x16 bluesky-logo">
+                                    <img src="~@/web/assets/img/bluesky-white.svg" />
+                                </div>
+                                @splatoon2.ink
+                            </div>
+                        </div>
+                        <!-- <div class="level-item">&nbsp;</div>
                         <div class="level-item">
                             <div class="font-splatoon2 is-size-7 has-text-grey-light">
                                 splatoon2.ink
                             </div>
                         </div> -->
-          </div>
+                    </div>
 
-          <div class="level-right">
-            <div class="level-item">
-              <div class="font-splatoon2 is-size-6 has-text-white">
-                {{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
-              </div>
+                    <div class="level-right">
+                        <div class="level-item">
+                            <div class="font-splatoon2 is-size-6 has-text-white">
+                                {{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
+                            </div>
+                        </div>
+                        <div class="level-item" v-if="!hideLocalTimes">
+                            <div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
+                                <table>
+                                    <tr>
+                                        <td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
+                                        <td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
+                                        <td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
+                                    </tr>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div v-if="!hideLocalTimes" class="level-item">
-              <div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
-                <table>
-                  <tr>
-                    <td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
-                    <td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
-                  </tr>
-                  <tr>
-                    <td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
-                    <td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/newweapon/NewWeapon.vue b/src/web/components/screenshots/newweapon/NewWeapon.vue
index 7ea943a..bacf87f 100644
--- a/src/web/components/screenshots/newweapon/NewWeapon.vue
+++ b/src/web/components/screenshots/newweapon/NewWeapon.vue
@@ -1,9 +1,9 @@
 <template>
-  <Wrapper :title="title">
-    <div v-if="weapons" :class="{ 'new-weapons-large': weapons.length <= 3 }">
-      <NewWeaponsContainer title="Now Available" />
-    </div>
-  </Wrapper>
+    <Wrapper :title="title">
+        <div :class="{ 'new-weapons-large': weapons.length <= 3 }" v-if="weapons">
+            <NewWeaponsContainer title="Now Available" />
+        </div>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/salmonrun/SalmonRun.vue b/src/web/components/screenshots/salmonrun/SalmonRun.vue
index 534ac47..cd40285 100644
--- a/src/web/components/screenshots/salmonrun/SalmonRun.vue
+++ b/src/web/components/screenshots/salmonrun/SalmonRun.vue
@@ -1,17 +1,17 @@
 <template>
-  <Wrapper title="Salmon Run">
-    <div class="salmon-run tilt-left">
-      <div class="hook-box">
-        <SalmonRunBox
-          :use-relative-time="true"
-          :show-current="showCurrent"
-          :show-upcoming="showUpcoming"
-          :show-reward-gear="showRewardGear"
-          :hide-upcoming-schedules-without-details="true"
-        />
-      </div>
-    </div>
-  </Wrapper>
+    <Wrapper title="Salmon Run">
+        <div class="salmon-run tilt-left">
+            <div class="hook-box">
+                <SalmonRunBox
+                    :use-relative-time="true"
+                    :show-current="showCurrent"
+                    :show-upcoming="showUpcoming"
+                    :show-reward-gear="showRewardGear"
+                    :hide-upcoming-schedules-without-details="true"
+                />
+            </div>
+        </div>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/salmonrun/SalmonRunGear.vue b/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
index 6aacc5e..fc70b46 100644
--- a/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
+++ b/src/web/components/screenshots/salmonrun/SalmonRunGear.vue
@@ -1,9 +1,9 @@
 <template>
-  <Wrapper title="Salmon Run Gear">
-    <div v-if="rewardGear" class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;">
-      <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
-    </div>
-  </Wrapper>
+    <Wrapper title="Salmon Run Gear">
+        <div class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;" v-if="rewardGear">
+            <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
+        </div>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/schedules/ScheduleBox.vue b/src/web/components/screenshots/schedules/ScheduleBox.vue
index 958c475..70c8dad 100644
--- a/src/web/components/screenshots/schedules/ScheduleBox.vue
+++ b/src/web/components/screenshots/schedules/ScheduleBox.vue
@@ -1,45 +1,41 @@
 <template>
-  <div v-if="schedule" :class="mode">
-    <h3 class="title is-2 font-splatoon1 has-text-centered">
-      <template v-if="splatfestBattle">
-        {{ $t('splatfest.battle') }}
-      </template>
-      <template v-else>
-        {{ schedule.game_mode.name }}
-      </template>
-    </h3>
+    <div v-if="schedule" :class="mode">
+        <h3 class="title is-2 font-splatoon1 has-text-centered">
+            <template v-if="splatfestBattle">{{ $t('splatfest.battle') }}</template>
+            <template v-else>{{ schedule.game_mode.name }}</template>
+        </h3>
 
-    <h5 v-if="!splatfestBattle" class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem">
-      <div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
-        <img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
-        <img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
-        <img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
-      </div>
+        <h5 class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
+            <div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
+                <img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
+                <img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
+                <img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
+            </div>
 
-      {{ schedule.rule.name }}
-    </h5>
+            {{ schedule.rule.name }}
+        </h5>
 
-    <div v-if="splatfestBattle && currentSplatfest">
-      <div class="columns">
-        <div class="column">
-          <Stage :stage="schedule.stage_a" />
+        <div v-if="splatfestBattle && currentSplatfest">
+            <div class="columns">
+                <div class="column">
+                    <Stage :stage="schedule.stage_a" />
+                </div>
+                <div class="column">
+                    <Stage :stage="schedule.stage_b" />
+                </div>
+            </div>
+
+            <div class="columns">
+                <div class="column is-half is-offset-one-quarter">
+                    <Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
+                </div>
+            </div>
         </div>
-        <div class="column">
-          <Stage :stage="schedule.stage_b" />
+        <div v-else>
+            <Stage :stage="schedule.stage_a" />
+            <Stage :stage="schedule.stage_b" />
         </div>
-      </div>
-
-      <div class="columns">
-        <div class="column is-half is-offset-one-quarter">
-          <Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
-        </div>
-      </div>
     </div>
-    <div v-else>
-      <Stage :stage="schedule.stage_a" />
-      <Stage :stage="schedule.stage_b" />
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/schedules/Schedules.vue b/src/web/components/screenshots/schedules/Schedules.vue
index f535a73..3bee7c9 100644
--- a/src/web/components/screenshots/schedules/Schedules.vue
+++ b/src/web/components/screenshots/schedules/Schedules.vue
@@ -1,54 +1,54 @@
 <template>
-  <Wrapper title="Map Schedules">
-    <div v-if="!globalSplatfestIsActiveInAllRegions" class="columns font-splatoon2">
-      <div class="column">
-        <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
-      </div>
-
-      <div class="column">
-        <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
-      </div>
-
-      <div class="column">
-        <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
-      </div>
-    </div>
-    <div v-else class="columns font-splatoon2">
-      <div class="column" style="display: flex">
-        <div class="splatfest">
-          <div class="hook-box">
-            <SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
-          </div>
-
-          <template v-if="shiftySchedule">
-            <br />
-
-            <div class="shifty-box">
-              <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
-                <template v-if="shiftySchedule.stages.length === 1">
-                  Current Shifty Station
-                </template>
-                <template v-else>
-                  Current Shifty Stations
-                </template>
-              </h3>
-              <div class="columns">
-                <div class="column">
-                  <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
-                </div>
-                <div v-if="shiftySchedule.stages[1]" class="column">
-                  <Stage :stage="shiftySchedule.stages[1]" />
-                </div>
-              </div>
+    <Wrapper title="Map Schedules">
+        <div class="columns font-splatoon2" v-if="!globalSplatfestIsActiveInAllRegions">
+            <div class="column">
+                <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
+            </div>
+
+            <div class="column">
+                <ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
+            </div>
+
+            <div class="column">
+                <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
             </div>
-          </template>
         </div>
-      </div>
-      <div class="column">
-        <ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
-      </div>
-    </div>
-  </Wrapper>
+        <div class="columns font-splatoon2" v-else>
+            <div class="column" style="display: flex">
+                <div class="splatfest">
+                    <div class="hook-box">
+                        <SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
+                    </div>
+
+                    <template v-if="shiftySchedule">
+                        <br />
+
+                        <div class="shifty-box">
+                            <h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
+                                <template v-if="shiftySchedule.stages.length === 1">
+                                    Current Shifty Station
+                                </template>
+                                <template v-else>
+                                    Current Shifty Stations
+                                </template>
+                            </h3>
+                            <div class="columns">
+                                <div class="column">
+                                    <Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
+                                </div>
+                                <div class="column" v-if="shiftySchedule.stages[1]">
+                                    <Stage :stage="shiftySchedule.stages[1]" />
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="column">
+                <ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
+            </div>
+        </div>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/splatfest/Splatfest.vue b/src/web/components/screenshots/splatfest/Splatfest.vue
index d41f2c4..b1cd240 100644
--- a/src/web/components/screenshots/splatfest/Splatfest.vue
+++ b/src/web/components/screenshots/splatfest/Splatfest.vue
@@ -1,19 +1,19 @@
 <template>
-  <Wrapper v-if="festival" :title="title" class="splatfest-screenshot" hide-local-times>
-    <div class="level">
-      <div class="level-item">
-        <div class="splatfest tilt-left">
-          <div class="hook-box">
-            <SplatfestBox :festival="festival" screenshot-mode />
-          </div>
-        </div>
-      </div>
+    <Wrapper :title="title" class="splatfest-screenshot" v-if="festival" hide-local-times>
+        <div class="level">
+            <div class="level-item">
+                <div class="splatfest tilt-left">
+                    <div class="hook-box">
+                        <SplatfestBox :festival="festival" screenshot-mode />
+                    </div>
+                </div>
+            </div>
 
-      <div v-if="festival.results" class="level-item">
-        <SplatfestResultsBox :festival="festival" />
-      </div>
-    </div>
-  </Wrapper>
+            <div class="level-item" v-if="festival.results">
+                <SplatfestResultsBox :festival="festival" />
+            </div>
+        </div>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
index e2e1306..ddd9c3f 100644
--- a/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
+++ b/src/web/components/screenshots/splatnetgear/SplatNetGear.vue
@@ -1,25 +1,25 @@
 <template>
-  <Wrapper v-if="merchandises" title="SplatNet Gear">
-    <div class="columns">
-      <div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
-        <MerchandiseBox
-          :merchandise="featuredMerchandise"
-          class="featured-merchandise"
-        />
-      </div>
+    <Wrapper title="SplatNet Gear" v-if="merchandises">
+        <div class="columns">
+            <div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
+                <MerchandiseBox
+                    :merchandise="featuredMerchandise"
+                    class="featured-merchandise"
+                />
+            </div>
 
-      <div class="column" style="display: flex; align-items: center; justify-content: center;">
-        <div class="still-available-merchandise columns is-multiline is-centered">
-          <div v-for="(merchandise, index) in otherMerchandises" :key="index" class="column is-one-third">
-            <MerchandiseBox
-              :merchandise="merchandise"
-              :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-            />
-          </div>
+            <div class="column" style="display: flex; align-items: center; justify-content: center;">
+                <div class="still-available-merchandise columns is-multiline is-centered">
+                    <div class="column is-one-third" v-for="(merchandise, index) in otherMerchandises" :key="index">
+                        <MerchandiseBox
+                            :merchandise="merchandise"
+                            :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+                        />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </Wrapper>
+    </Wrapper>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/FinalFestDialog.vue b/src/web/components/splatoon/FinalFestDialog.vue
index 5f4dc42..f366950 100644
--- a/src/web/components/splatoon/FinalFestDialog.vue
+++ b/src/web/components/splatoon/FinalFestDialog.vue
@@ -1,68 +1,66 @@
 <template>
-  <Modal v-if="allSchedules" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
-    <div class="modal-card">
-      <div class="modal-card-head">
-        <h3 class="title is-3 font-splatoon1 text-shadow">
-          FinalFest Shifty&nbsp;Station Schedule
-        </h3>
-      </div>
-
-      <div ref="body" class="modal-card-body">
-        <div class="has-text-right" style="margin-bottom: 1em">
-          <p>
-            Schedules:
-            <a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
-              @SplatoonJP
-            </a>
-          </p>
-          <p>
-            Stage images and names:
-            <a href="https://leanny.github.io/feststages/" target="_blank">
-              LeanYoshi
-            </a>
-          </p>
-        </div>
-
-        <div class="font-splatoon2">
-          <div v-if="first">
-            <div class="is-size-5 title-squid font-splatoon1">
-              <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
-              <span v-else>{{ $t('times.soon') }}</span>
+    <Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="allSchedules">
+        <div class="modal-card">
+            <div class="modal-card-head">
+                <h3 class="title is-3 font-splatoon1 text-shadow">FinalFest Shifty&nbsp;Station Schedule</h3>
             </div>
 
-            <ScheduleRow :schedule="first" />
-          </div>
-          <div v-if="second">
-            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-              {{ $t('times.next') }}
+            <div class="modal-card-body" ref="body">
+                <div class="has-text-right" style="margin-bottom: 1em">
+                    <p>
+                        Schedules:
+                        <a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
+                            @SplatoonJP
+                        </a>
+                    </p>
+                    <p>
+                        Stage images and names:
+                        <a href="https://leanny.github.io/feststages/" target="_blank">
+                            LeanYoshi
+                        </a>
+                    </p>
+                </div>
+
+                <div class="font-splatoon2">
+                    <div v-if="first">
+                        <div class="is-size-5 title-squid font-splatoon1">
+                            <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
+                            <span v-else>{{ $t('times.soon') }}</span>
+                        </div>
+
+                        <ScheduleRow :schedule="first" />
+                    </div>
+                    <div v-if="second">
+                        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+                            {{ $t('times.next') }}
+                        </div>
+
+                        <ScheduleRow :schedule="second" />
+                    </div>
+
+                    <div v-if="others && others.length">
+                        <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+                            {{ $t('times.future') }}
+                        </div>
+
+                        <ScheduleRow
+                            v-for="schedule in others"
+                            :key="schedule.start_time"
+                            :schedule="schedule"
+                        />
+                    </div>
+                </div>
+
+                <div class="font-splatoon2" v-if="currentSchedules.length === 0">
+                    <ScheduleRow
+                        v-for="schedule in allSchedules"
+                        :key="schedule.start_time"
+                        :schedule="schedule"
+                    />
+                </div>
             </div>
-
-            <ScheduleRow :schedule="second" />
-          </div>
-
-          <div v-if="others && others.length">
-            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-              {{ $t('times.future') }}
-            </div>
-
-            <ScheduleRow
-              v-for="schedule in others"
-              :key="schedule.start_time"
-              :schedule="schedule"
-            />
-          </div>
         </div>
-
-        <div v-if="currentSchedules.length === 0" class="font-splatoon2">
-          <ScheduleRow
-            v-for="schedule in allSchedules"
-            :key="schedule.start_time"
-            :schedule="schedule"
-          />
-        </div>
-      </div>
-    </div>
-  </Modal>
+    </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/GameModeHeader.vue b/src/web/components/splatoon/GameModeHeader.vue
index 2d949f5..1487223 100644
--- a/src/web/components/splatoon/GameModeHeader.vue
+++ b/src/web/components/splatoon/GameModeHeader.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="level">
-    <div class="level-left">
-      <div class="level-item">
-        <div class="image is-48x48" style="margin-bottom: -6px">
-          <img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
-          <img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
-          <img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
+    <div class="level">
+        <div class="level-left">
+            <div class="level-item">
+                <div class="image is-48x48" style="margin-bottom: -6px">
+                    <img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
+                    <img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
+                    <img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
+                </div>
+            </div>
+            <div class="level-item">
+                <h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
+                    {{ name }}
+                </h2>
+            </div>
         </div>
-      </div>
-      <div class="level-item">
-        <h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
-          {{ name }}
-        </h2>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/IdolResultsBox.vue b/src/web/components/splatoon/IdolResultsBox.vue
index d483138..b9d9620 100644
--- a/src/web/components/splatoon/IdolResultsBox.vue
+++ b/src/web/components/splatoon/IdolResultsBox.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="splatfest-results">
-    <div class="background" />
+    <div class="splatfest-results">
+        <div class="background"></div>
 
-    <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
-      {{ $t('splatfest.results.title') }}
-    </div>
-
-    <div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
-      <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
-        {{ $t('splatfest.results.title') }}
-      </div>
-
-      <div class="column">
-        <div class="image is-48x48">
-          <img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
+        <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
+            {{ $t('splatfest.results.title') }}
         </div>
-      </div>
 
-      <div class="column is-5">
-        <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
-      </div>
+        <div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
+            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
+                {{ $t('splatfest.results.title') }}
+            </div>
 
-      <div class="column">
-        <div class="image is-48x48">
-          <img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
+            <div class="column">
+                <div class="image is-48x48">
+                    <img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
+                </div>
+            </div>
+
+            <div class="column is-5">
+                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
+            </div>
+
+            <div class="column">
+                <div class="image is-48x48">
+                    <img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <IdolResultsRow region="na" />
-    <IdolResultsRow region="eu" />
-    <IdolResultsRow region="jp" />
-  </div>
+        <IdolResultsRow region="na" />
+        <IdolResultsRow region="eu" />
+        <IdolResultsRow region="jp" />
+    </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/IdolResultsRow.vue b/src/web/components/splatoon/IdolResultsRow.vue
index 22946f9..905f7f8 100644
--- a/src/web/components/splatoon/IdolResultsRow.vue
+++ b/src/web/components/splatoon/IdolResultsRow.vue
@@ -1,31 +1,31 @@
 <template>
-  <div class="columns is-mobile result">
-    <div class="column">
-      <div v-if="winner == 'alpha'" class="winner-mark-shadow" />
-      <div v-if="winner == 'alpha'" class="winner-mark" style="background: #f2327b" />
-      <div class="result-container">
-        <div class="font-splatoon2 title is-4">
-          <div>{{ heroWins.alpha }}</div>
+    <div class="columns is-mobile result">
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
+            <div class="winner-mark" style="background: #f2327b" v-if="winner == 'alpha'"></div>
+            <div class="result-container">
+                <div class="font-splatoon2 title is-4">
+                    <div>{{ heroWins.alpha }}</div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div class="column is-5 has-text-centered font-splatoon2">
-      <div style="margin: 0 -100px">
-        {{ $t(`regions.${region}.name`) }}
-      </div>
-    </div>
-
-    <div class="column">
-      <div v-if="winner == 'bravo'" class="winner-mark-shadow" />
-      <div v-if="winner == 'bravo'" class="winner-mark" style="background: #10dc85" />
-      <div class="result-container">
-        <div class="font-splatoon2 title is-4">
-          <div>{{ heroWins.bravo }}</div>
+        <div class="column is-5 has-text-centered font-splatoon2">
+            <div style="margin: 0 -100px">
+                {{ $t(`regions.${region}.name`) }}
+            </div>
+        </div>
+
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
+            <div class="winner-mark" style="background: #10dc85" v-if="winner == 'bravo'"></div>
+            <div class="result-container">
+                <div class="font-splatoon2 title is-4">
+                    <div>{{ heroWins.bravo }}</div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/MerchandiseBox.vue b/src/web/components/splatoon/MerchandiseBox.vue
index 12b2fc9..348e0b2 100644
--- a/src/web/components/splatoon/MerchandiseBox.vue
+++ b/src/web/components/splatoon/MerchandiseBox.vue
@@ -1,80 +1,76 @@
 <template>
-  <div class="merchandise-box font-splatoon2" :class="merchandise.kind">
-    <div class="brand">
-      <div class="image is-32x32">
-        <img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
-      </div>
-    </div>
-
-    <div class="skills">
-      <div v-if="merchandise.skill" class="main skill-img-bg">
-        <img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
-      </div>
-      <div v-for="i in merchandise.gear.rarity + 1" :key="i" class="sub">
-        <img src="~@/web/assets/img/blank-skill-slot.png" />
-      </div>
-    </div>
-
-    <div v-if="merchandise.end_time" class="is-size-6 title-squid remaining-time">
-      {{ merchandise.end_time - now | shortDuration }}
-    </div>
-
-    <div class="gear-image">
-      <div class="image is-square">
-        <img :src="merchandise.gear.image | localSplatNetImageUrl" />
-      </div>
-    </div>
-
-    <div class="gear-name has-text-centered">
-      {{ gearName }}
-
-      <div class="info-overlay">
-        <div v-if="merchandise.original_gear" class="info-overlay-container original-gear">
-          <div class="is-size-7">
-            {{ $t('splatnet_gear.original_gear') }}
-          </div>
-
-          <div class="level" style="margin: 0 3px">
-            <div class="level-left">
-              <div class="level-item">
-                <div class="skill-img-bg strikethrough">
-                  <img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
-                </div>
-                <div v-for="i in merchandise.original_gear.rarity + 1" :key="i" class="sub">
-                  <img src="~@/web/assets/img/blank-skill-slot.png" />
-                </div>
-              </div>
+    <div class="merchandise-box font-splatoon2" :class="merchandise.kind">
+        <div class="brand">
+            <div class="image is-32x32">
+                <img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
             </div>
-            <div v-if="merchandise.original_gear.price" class="level-right">
-              <div class="level-item">
-                <div>
-                  <img class="cash" src="~@/web/assets/img/cash.png" />
-                  <span class="strikethrough">{{ merchandise.original_gear.price }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
 
-        <div v-if="merchandise.gear.brand.frequent_skill" class="info-overlay-container common-ability">
-          <div class="is-size-7">
-            {{ $t('gear.frequent_ability') }}
-          </div>
-          <div>
-            <div class="skill-img-bg">
-              <img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
+        <div class="skills">
+            <div class="main skill-img-bg" v-if="merchandise.skill">
+                <img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
+            </div>
+            <div class="sub" v-for="i in merchandise.gear.rarity + 1" :key="i">
+                <img src="~@/web/assets/img/blank-skill-slot.png" />
             </div>
-            {{ brandName }}
-          </div>
         </div>
-      </div>
-    </div>
 
-    <div v-if="merchandise.price" class="bottom-bar has-text-centered">
-      <img class="cash" src="~@/web/assets/img/cash.png" />
-      {{ merchandise.price }}
+        <div class="is-size-6 title-squid remaining-time" v-if="merchandise.end_time">
+            {{ merchandise.end_time - now | shortDuration }}
+        </div>
+
+        <div class="gear-image">
+            <div class="image is-square">
+                <img :src="merchandise.gear.image | localSplatNetImageUrl" />
+            </div>
+        </div>
+
+        <div class="gear-name has-text-centered">
+            {{ gearName }}
+
+            <div class="info-overlay">
+                <div class="info-overlay-container original-gear" v-if="merchandise.original_gear">
+                    <div class="is-size-7">{{ $t('splatnet_gear.original_gear') }}</div>
+
+                    <div class="level" style="margin: 0 3px">
+                        <div class="level-left">
+                            <div class="level-item">
+                                <div class="skill-img-bg strikethrough">
+                                    <img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
+                                </div>
+                                <div class="sub" v-for="i in merchandise.original_gear.rarity + 1" :key="i">
+                                    <img src="~@/web/assets/img/blank-skill-slot.png" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="level-right" v-if="merchandise.original_gear.price">
+                            <div class="level-item">
+                                <div>
+                                    <img class="cash" src="~@/web/assets/img/cash.png" />
+                                    <span class="strikethrough">{{ merchandise.original_gear.price }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="info-overlay-container common-ability" v-if="merchandise.gear.brand.frequent_skill">
+                    <div class="is-size-7">{{ $t('gear.frequent_ability') }}</div>
+                    <div>
+                        <div class="skill-img-bg">
+                            <img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
+                        </div>
+                        {{ brandName }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bottom-bar has-text-centered" v-if="merchandise.price">
+            <img class="cash" src="~@/web/assets/img/cash.png" />
+            {{ merchandise.price }}
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/NewWeaponBox.vue b/src/web/components/splatoon/NewWeaponBox.vue
index 6fad313..39b01e9 100644
--- a/src/web/components/splatoon/NewWeaponBox.vue
+++ b/src/web/components/splatoon/NewWeaponBox.vue
@@ -1,33 +1,35 @@
 <template>
-  <div class="new-weapon-box font-splatoon2">
-    <div class="font-splatoon1 is-size-5 title-squid">
-      {{ displayTitle }}
-    </div>
+    <div class="new-weapon-box font-splatoon2">
 
-    <div class="main-content-wrapper">
-      <div class="weapon-special-sub">
-        <div class="image-wrapper" :title="specialName">
-          <div class="image is-24x24">
-            <img :src="weapon.special.image_a | localSplatNetImageUrl" />
-          </div>
+        <div class="font-splatoon1 is-size-5 title-squid">
+            {{ displayTitle }}
         </div>
 
-        <div class="image-wrapper" :title="subName">
-          <div class="image is-24x24">
-            <img :src="weapon.sub.image_a | localSplatNetImageUrl" />
-          </div>
+        <div class="main-content-wrapper">
+            <div class="weapon-special-sub">
+                <div class="image-wrapper" :title="specialName">
+                    <div class="image is-24x24">
+                        <img :src="weapon.special.image_a | localSplatNetImageUrl" />
+                    </div>
+                </div>
+
+                <div class="image-wrapper" :title="subName">
+                    <div class="image is-24x24">
+                        <img :src="weapon.sub.image_a | localSplatNetImageUrl" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="image is-square">
+                <img :src="weapon.image | localSplatNetImageUrl" />
+            </div>
+
+            <div class="weapon-name has-text-centered is-size-5">
+                {{ name }}
+            </div>
         </div>
-      </div>
 
-      <div class="image is-square">
-        <img :src="weapon.image | localSplatNetImageUrl" />
-      </div>
-
-      <div class="weapon-name has-text-centered is-size-5">
-        {{ name }}
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/NewWeaponsContainer.vue b/src/web/components/splatoon/NewWeaponsContainer.vue
index 25884b1..683accf 100644
--- a/src/web/components/splatoon/NewWeaponsContainer.vue
+++ b/src/web/components/splatoon/NewWeaponsContainer.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="columns is-multiline is-centered">
-    <div v-for="(weapon, index) in weapons" :key="weapon.id" class="column" :class="columnClass">
-      <NewWeaponBox
-        :weapon="weapon"
-        :title="title"
-        :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-      />
+    <div class="columns is-multiline is-centered">
+        <div class="column" :class="columnClass" v-for="(weapon, index) in weapons" :key="weapon.id">
+            <NewWeaponBox
+                :weapon="weapon"
+                :title="title"
+                :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SalmonRunBox.vue b/src/web/components/splatoon/SalmonRunBox.vue
index 71af7f5..4699a19 100644
--- a/src/web/components/splatoon/SalmonRunBox.vue
+++ b/src/web/components/splatoon/SalmonRunBox.vue
@@ -1,118 +1,118 @@
 <template>
-  <div class="font-splatoon2">
-    <div class="salmon-run-header">
-      <div class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <div class="image is-48x48">
-              <img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
-            </div>
-          </div>
-          <div class="level-item">
-            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-              {{ $t('coop.title') }}
-            </h2>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="columns is-gapless">
-      <div class="column is-4 salmon-run-ad-img">
-        <div class="image is-16by9 is-hidden-desktop" />
-
-        <template v-if="showRewardGear && rewardGear">
-          <div class="salmon-run-gear-text">
-            {{ $t('coop.current_gear') }}
-          </div>
-          <div class="salmon-run-gear-image hand" :title="rewardGearName" @click="gearDialogOpen = true">
-            <div class="image is-32x32">
-              <img :src="rewardGear.image | localSplatNetImageUrl" />
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="column">
-        <div class="salmon-run-content">
-          <div v-if="showCurrent && activeSchedule" class="salmon-run-open">
-            <div class="is-size-5 title-squid font-splatoon1">
-              {{ $t('times.open') }}
-            </div>
-            <template v-if="useRelativeTime">
-              <div class="title-color is-size-5">
-                {{ activeSchedule.end_time - now | durationHours | time.remaining }}
-              </div>
-            </template>
-            <template v-else>
-              <div class="title-color is-size-5">
-                {{ activeSchedule.start_time | date }}
-                {{ activeSchedule.start_time | time }}
-                &ndash;
-                {{ activeSchedule.end_time | date }}
-                {{ activeSchedule.end_time | time }}
-              </div>
-              <div>
-                {{ activeSchedule.end_time - now | duration | time.remaining }}
-              </div>
-            </template>
-
-            <div class="salmon-run-details">
-              <SalmonRunDetailsBar :schedule="activeSchedule" />
-            </div>
-          </div>
-
-          <div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
-            <div class="salmon-run-future">
-              <div class="is-size-6 title-squid font-splatoon1">
-                {{ $t('times.soon') }}
-              </div>
-              <div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
-                <div class="columns is-marginless is-gapless is-mobile">
-                  <div class="column is-narrow" style="margin-right: 5px">
-                    <div class="image is-4by3" style="width: 23px">
-                      <img src="~@/web/assets/img/salmon-run-mini.png" />
+    <div class="font-splatoon2">
+        <div class="salmon-run-header">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <div class="image is-48x48">
+                            <img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
+                        </div>
+                    </div>
+                    <div class="level-item">
+                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                            {{ $t('coop.title') }}
+                        </h2>
                     </div>
-                  </div>
-                  <div v-if="useRelativeTime" class="column">
-                    <span class="title-color is-size-6">
-                      Shift opens
-                      {{ event.start_time - now | durationHours | time.in }}
-                    </span>
-                    <span class="is-size-7 is-pulled-right">
-                      {{ event.end_time - event.start_time | durationHours }}
-                    </span>
-                  </div>
-                  <div v-else class="column">
-                    <span class="title-color is-size-6">
-                      <span class="nowrap">
-                        {{ event.start_time | date({ weekday: 'short' }) }}
-                        {{ event.start_time | time }}
-                      </span>
-                      &ndash;
-                      <span class="nowrap">
-                        {{ event.end_time | date }}
-                        {{ event.end_time | time }}
-                      </span>
-                    </span>
-                    <span class="is-size-7 is-hidden-touch is-pulled-right">
-                      {{ event.start_time - now | duration(true) | time.in }}
-                    </span>
-                  </div>
                 </div>
-
-                <SalmonRunDetailsBar :schedule="event" mini />
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
 
-    <SalmonRunGearDialog
-      v-if="gearDialogOpen && rewardGear"
-      @close="gearDialogOpen = false"
-    />
-  </div>
+        <div class="columns is-gapless">
+            <div class="column is-4 salmon-run-ad-img">
+                <div class="image is-16by9 is-hidden-desktop"></div>
+
+                <template v-if="showRewardGear && rewardGear">
+                    <div class="salmon-run-gear-text">
+                        {{ $t('coop.current_gear') }}
+                    </div>
+                    <div class="salmon-run-gear-image hand" @click="gearDialogOpen = true" :title="rewardGearName">
+                        <div class="image is-32x32">
+                            <img :src="rewardGear.image | localSplatNetImageUrl" />
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <div class="column">
+                <div class="salmon-run-content">
+                    <div class="salmon-run-open" v-if="showCurrent && activeSchedule">
+                        <div class="is-size-5 title-squid font-splatoon1">
+                            {{ $t('times.open') }}
+                        </div>
+                        <template v-if="useRelativeTime">
+                            <div class="title-color is-size-5">
+                                {{ activeSchedule.end_time - now | durationHours | time.remaining }}
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="title-color is-size-5">
+                                {{ activeSchedule.start_time | date }}
+                                {{ activeSchedule.start_time | time }}
+                                &ndash;
+                                {{ activeSchedule.end_time | date }}
+                                {{ activeSchedule.end_time | time }}
+                            </div>
+                            <div>
+                                {{ activeSchedule.end_time - now | duration | time.remaining }}
+                            </div>
+                        </template>
+
+                        <div class="salmon-run-details">
+                            <SalmonRunDetailsBar :schedule="activeSchedule" />
+                        </div>
+                    </div>
+
+                    <div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
+                        <div class="salmon-run-future">
+                            <div class="is-size-6 title-squid font-splatoon1">
+                                {{ $t('times.soon') }}
+                            </div>
+                            <div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
+                                <div class="columns is-marginless is-gapless is-mobile">
+                                    <div class="column is-narrow" style="margin-right: 5px">
+                                        <div class="image is-4by3" style="width: 23px">
+                                            <img src="~@/web/assets/img/salmon-run-mini.png" />
+                                        </div>
+                                    </div>
+                                    <div class="column" v-if="useRelativeTime">
+                                        <span class="title-color is-size-6">
+                                            Shift opens
+                                            {{ event.start_time - now | durationHours | time.in }}
+                                        </span>
+                                        <span class="is-size-7 is-pulled-right">
+                                            {{ event.end_time - event.start_time | durationHours }}
+                                        </span>
+                                    </div>
+                                    <div class="column" v-else>
+                                        <span class="title-color is-size-6">
+                                            <span class="nowrap">
+                                                {{ event.start_time | date({ weekday: 'short' }) }}
+                                                {{ event.start_time | time }}
+                                            </span>
+                                            &ndash;
+                                            <span class="nowrap">
+                                                {{ event.end_time | date }}
+                                                {{ event.end_time | time }}
+                                            </span>
+                                        </span>
+                                        <span class="is-size-7 is-hidden-touch is-pulled-right">
+                                            {{ event.start_time - now | duration(true) | time.in }}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <SalmonRunDetailsBar :schedule="event" mini />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <SalmonRunGearDialog
+            v-if="gearDialogOpen && rewardGear"
+            @close="gearDialogOpen = false"
+        />
+    </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SalmonRunDetailsBar.vue b/src/web/components/splatoon/SalmonRunDetailsBar.vue
index fe0e21d..ba63a5d 100644
--- a/src/web/components/splatoon/SalmonRunDetailsBar.vue
+++ b/src/web/components/splatoon/SalmonRunDetailsBar.vue
@@ -1,45 +1,43 @@
 <template>
-  <div v-if="schedule.stage || schedule.weapons" class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0">
-    <div v-if="schedule.stage" class="column" :class="mini ? 'is-3' : 'is-5'">
-      <Stage :stage="schedule.stage" is-salmon-run :show-title="!mini" />
-    </div>
-
-    <div v-if="mini && schedule.stage" class="column" style="display: flex; align-items: center;">
-      {{ stageName }}
-    </div>
-
-    <div v-if="schedule.weapons" class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;">
-      <div style="width: 100%">
-        <div v-if="!mini" class="has-text-centered">
-          {{ $t('coop.supplied_weapons') }}
+    <div class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0" v-if="schedule.stage || schedule.weapons">
+        <div class="column" :class="mini ? 'is-3' : 'is-5'" v-if="schedule.stage">
+            <Stage :stage="schedule.stage" is-salmon-run :show-title="!mini"></Stage>
         </div>
 
-        <div class="columns is-mobile is-slimmer">
-          <div v-for="(weapon, i) in schedule.weapons" :key="i" class="column">
-            <div class="image is-square weapon">
-              <template v-if="weapon.weapon">
-                <img
-                  :src="weapon.weapon.image | localSplatNetImageUrl"
-                  :title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
-                />
-              </template>
+        <div class="column" style="display: flex; align-items: center;" v-if="mini && schedule.stage">
+            {{ stageName }}
+        </div>
 
-              <template v-else-if="weapon.coop_special_weapon">
-                <img
-                  :src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
-                  :title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
-                />
-              </template>
+        <div class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;" v-if="schedule.weapons">
+            <div style="width: 100%">
+                <div class="has-text-centered" v-if="!mini">{{ $t('coop.supplied_weapons') }}</div>
 
-              <template v-else>
-                <img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
-              </template>
+                <div class="columns is-mobile is-slimmer">
+                    <div class="column" v-for="(weapon, i) in schedule.weapons" :key="i">
+                        <div class="image is-square weapon">
+                            <template v-if="weapon.weapon">
+                                <img
+                                    :src="weapon.weapon.image | localSplatNetImageUrl"
+                                    :title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
+                                />
+                            </template>
+
+                            <template v-else-if="weapon.coop_special_weapon">
+                                <img
+                                    :src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
+                                    :title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
+                                />
+                            </template>
+
+                            <template v-else>
+                                <img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
+                            </template>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SalmonRunGearDialog.vue b/src/web/components/splatoon/SalmonRunGearDialog.vue
index bb1e0ba..6699516 100644
--- a/src/web/components/splatoon/SalmonRunGearDialog.vue
+++ b/src/web/components/splatoon/SalmonRunGearDialog.vue
@@ -1,11 +1,11 @@
 <template>
-  <Modal @close="$emit('close')">
-    <div class="modal-content" style="max-width: 300px; overflow: visible">
-      <div class="tilt-right" style="overflow: hidden">
-        <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
-      </div>
-    </div>
-  </Modal>
+    <Modal @close="$emit('close')">
+        <div class="modal-content" style="max-width: 300px; overflow: visible">
+            <div class="tilt-right" style="overflow: hidden">
+                <MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
+            </div>
+        </div>
+    </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/ScheduleBox.vue b/src/web/components/splatoon/ScheduleBox.vue
index 69ae58f..6235bb4 100644
--- a/src/web/components/splatoon/ScheduleBox.vue
+++ b/src/web/components/splatoon/ScheduleBox.vue
@@ -1,54 +1,46 @@
 <template>
-  <div class="font-splatoon2" :class="mode">
-    <GameModeHeader :mode="mode" />
+    <div class="font-splatoon2" :class="mode">
+        <GameModeHeader :mode="mode" />
 
-    <div v-if="activeSchedule" class="main-schedule">
-      <div class="level is-mobile top-bar">
-        <div class="level-left">
-          <div class="level-item title-color is-size-5">
-            {{ activeRuleName }}
-          </div>
+        <div class="main-schedule" v-if="activeSchedule">
+            <div class="level is-mobile top-bar">
+                <div class="level-left">
+                    <div class="level-item title-color is-size-5">{{ activeRuleName }}</div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        {{ activeSchedule.start_time | time }} &ndash;
+                        {{ activeSchedule.end_time | time }}
+                    </div>
+                </div>
+            </div>
+            <div class="is-clearfix"></div>
+            <div class="columns is-mobile is-slim">
+                <div class="column"><Stage :stage="activeSchedule.stage_a"></Stage></div>
+                <div class="column"><Stage :stage="activeSchedule.stage_b"></Stage></div>
+                <template v-if="selectedRegionHasActiveSplatfest">
+                    <div class="column"><Stage :stage="selectedRegionCurrentSplatfest.special_stage"></Stage></div>
+                </template>
+            </div>
         </div>
-        <div class="level-right">
-          <div class="level-item">
-            {{ activeSchedule.start_time | time }} &ndash;
-            {{ activeSchedule.end_time | time }}
-          </div>
-        </div>
-      </div>
-      <div class="is-clearfix" />
-      <div class="columns is-mobile is-slim">
-        <div class="column">
-          <Stage :stage="activeSchedule.stage_a" />
-        </div>
-        <div class="column">
-          <Stage :stage="activeSchedule.stage_b" />
-        </div>
-        <template v-if="selectedRegionHasActiveSplatfest">
-          <div class="column">
-            <Stage :stage="selectedRegionCurrentSplatfest.special_stage" />
-          </div>
+
+        <template v-if="upcomingSchedules && upcomingSchedules[0]">
+            <div class="is-size-5 title-squid font-splatoon1">
+                {{ $t('times.next') }}
+            </div>
+
+            <ScheduleRow :schedule="upcomingSchedules[0]" is-small />
         </template>
-      </div>
+
+        <p class="has-text-centered" style="margin-top: 10px">
+            <router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
+                <span class="icon squid-icon-tilt">
+                    <span class="fa squid-squid"></span>
+                </span>
+                <span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
+            </router-link>
+        </p>
     </div>
-
-    <template v-if="upcomingSchedules && upcomingSchedules[0]">
-      <div class="is-size-5 title-squid font-splatoon1">
-        {{ $t('times.next') }}
-      </div>
-
-      <ScheduleRow :schedule="upcomingSchedules[0]" is-small />
-    </template>
-
-    <p class="has-text-centered" style="margin-top: 10px">
-      <router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
-        <span class="icon squid-icon-tilt">
-          <span class="fa squid-squid" />
-        </span>
-        <span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
-      </router-link>
-    </p>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/ScheduleDialog.vue b/src/web/components/splatoon/ScheduleDialog.vue
index cec1da4..b175f2b 100644
--- a/src/web/components/splatoon/ScheduleDialog.vue
+++ b/src/web/components/splatoon/ScheduleDialog.vue
@@ -1,14 +1,14 @@
 <template>
-  <Modal class="font-splatoon2" @close="$emit('close')">
-    <div class="modal-card schedule-box tilt-left-slight" :class="mode">
-      <header class="modal-card-head">
-        <GameModeHeader :mode="mode" />
-      </header>
-      <section class="modal-card-body">
-        <ScheduleList :mode="mode" />
-      </section>
-    </div>
-  </Modal>
+    <Modal @close="$emit('close')" class="font-splatoon2">
+        <div class="modal-card schedule-box tilt-left-slight" :class="mode">
+            <header class="modal-card-head">
+                <GameModeHeader :mode="mode" />
+            </header>
+            <section class="modal-card-body">
+                <ScheduleList :mode="mode" />
+            </section>
+        </div>
+    </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/ScheduleList.vue b/src/web/components/splatoon/ScheduleList.vue
index a7835f3..be759d0 100644
--- a/src/web/components/splatoon/ScheduleList.vue
+++ b/src/web/components/splatoon/ScheduleList.vue
@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <div v-if="first">
-      <div class="is-size-5 title-squid font-splatoon1">
-        <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
-        <span v-else>{{ $t('times.soon') }}</span>
-      </div>
+    <div>
+        <div v-if="first">
+            <div class="is-size-5 title-squid font-splatoon1">
+                <span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
+                <span v-else>{{ $t('times.soon') }}</span>
+            </div>
 
-      <ScheduleRow :schedule="first" />
+            <ScheduleRow :schedule="first" />
+        </div>
+        <div v-if="second">
+            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+                {{ $t('times.next') }}
+            </div>
+
+            <ScheduleRow :schedule="second" />
+        </div>
+
+        <div v-if="others && others.length">
+            <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
+                {{ $t('times.future') }}
+            </div>
+
+            <ScheduleRow
+                v-for="schedule in others"
+                :key="schedule.start_time"
+                :schedule="schedule"
+            />
+        </div>
     </div>
-    <div v-if="second">
-      <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-        {{ $t('times.next') }}
-      </div>
-
-      <ScheduleRow :schedule="second" />
-    </div>
-
-    <div v-if="others && others.length">
-      <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
-        {{ $t('times.future') }}
-      </div>
-
-      <ScheduleRow
-        v-for="schedule in others"
-        :key="schedule.start_time"
-        :schedule="schedule"
-      />
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/ScheduleRow.vue b/src/web/components/splatoon/ScheduleRow.vue
index f3dfe10..c097c58 100644
--- a/src/web/components/splatoon/ScheduleRow.vue
+++ b/src/web/components/splatoon/ScheduleRow.vue
@@ -1,70 +1,62 @@
 <template>
-  <div>
-    <div class="level is-mobile is-marginless is-hidden-tablet">
-      <div class="level-left">
-        <template v-if="ruleName">
-          <div class="level-item title-color is-size-5">
-            {{ ruleName }}
-          </div>
-        </template>
-        <template v-else>
-          {{ timeFromNow }}
-        </template>
-      </div>
-      <div class="level-right">
-        <div class="level-item has-text-right">
-          <div>
-            <template v-if="ruleName && schedule.start_time > now">
-              {{ timeFromNow }}<span class="is-hidden-mobile">,&nbsp;</span>
-            </template>
-            <div class="is-size-7">
-              <template v-if="showStartDate">
-                {{ schedule.start_time | date }}
-              </template>
-              {{ schedule.start_time | time }} &ndash;
-              <template v-if="showEndDate">
-                {{ schedule.end_time | date }}
-              </template>
-              {{ schedule.end_time | time }}
+    <div>
+        <div class="level is-mobile is-marginless is-hidden-tablet">
+            <div class="level-left">
+                <template v-if="ruleName">
+                    <div class="level-item title-color is-size-5">{{ ruleName }}</div>
+                </template>
+                <template v-else>
+                    {{ timeFromNow }}
+                </template>
+            </div>
+            <div class="level-right">
+                <div class="level-item has-text-right">
+                    <div>
+                        <template v-if="ruleName && schedule.start_time > now">
+                            {{ timeFromNow }}<span class="is-hidden-mobile">,&nbsp;</span>
+                        </template>
+                        <div class="is-size-7">
+                            <template v-if="showStartDate">
+                                {{ schedule.start_time | date }}
+                            </template>
+                            {{ schedule.start_time | time }} &ndash;
+                            <template v-if="showEndDate">
+                                {{ schedule.end_time | date }}
+                            </template>
+                            {{ schedule.end_time | time }}
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
 
-    <div v-if="schedule" class="columns is-slim">
-      <div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
-        <div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">
-          {{ ruleName }}
+        <div class="columns is-slim" v-if="schedule">
+            <div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
+                <div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">{{ ruleName }}</div>
+                <div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
+                    <template v-if="schedule.start_time > now">
+                        {{ timeFromNow }}
+                        <br />
+                    </template>
+                    <template v-if="showStartDate">
+                        {{ schedule.start_time | date }}
+                    </template>
+                    <span class="nowrap">{{ schedule.start_time | time }}</span>
+                    &ndash;
+                    <template v-if="showEndDate">
+                        {{ schedule.end_time | date }}
+                    </template>
+                    <span class="nowrap">{{ schedule.end_time | time }}</span>
+                </div>
+            </div>
+            <div class="column is-8">
+                <div class="columns is-mobile is-slim">
+                    <div class="column"><Stage :stage="schedule.stage_a" v-if="schedule.stage_a" /></div>
+                    <div class="column"><Stage :stage="schedule.stage_b" v-if="schedule.stage_b" /></div>
+                </div>
+            </div>
         </div>
-        <div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
-          <template v-if="schedule.start_time > now">
-            {{ timeFromNow }}
-            <br />
-          </template>
-          <template v-if="showStartDate">
-            {{ schedule.start_time | date }}
-          </template>
-          <span class="nowrap">{{ schedule.start_time | time }}</span>
-          &ndash;
-          <template v-if="showEndDate">
-            {{ schedule.end_time | date }}
-          </template>
-          <span class="nowrap">{{ schedule.end_time | time }}</span>
-        </div>
-      </div>
-      <div class="column is-8">
-        <div class="columns is-mobile is-slim">
-          <div class="column">
-            <Stage v-if="schedule.stage_a" :stage="schedule.stage_a" />
-          </div>
-          <div class="column">
-            <Stage v-if="schedule.stage_b" :stage="schedule.stage_b" />
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatNetGearDialog.vue b/src/web/components/splatoon/SplatNetGearDialog.vue
index 5420c0a..bca4385 100644
--- a/src/web/components/splatoon/SplatNetGearDialog.vue
+++ b/src/web/components/splatoon/SplatNetGearDialog.vue
@@ -1,21 +1,19 @@
 <template>
-  <Modal @close="$emit('close')">
-    <div class="modal-content">
-      <div class="splatnet-gear-dialog">
-        <h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">
-          {{ $t('splatnet_gear.title') }}
-        </h3>
-        <div class="columns is-marginless is-multiline is-mobile is-centered">
-          <div v-for="(merchandise, index) in merchandises" :key="merchandise.end_time" class="column is-half-mobile is-one-third-tablet">
-            <MerchandiseBox
-              :merchandise="merchandise"
-              :class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
-            />
-          </div>
+    <Modal @close="$emit('close')">
+        <div class="modal-content">
+            <div class="splatnet-gear-dialog">
+                <h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">{{ $t('splatnet_gear.title') }}</h3>
+                <div class="columns is-marginless is-multiline is-mobile is-centered">
+                    <div class="column is-half-mobile is-one-third-tablet" v-for="(merchandise, index) in merchandises" :key="merchandise.end_time">
+                        <MerchandiseBox
+                            :merchandise="merchandise"
+                            :class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
+                        />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </Modal>
+    </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestBox.vue b/src/web/components/splatoon/SplatfestBox.vue
index e9c1611..ec55edd 100644
--- a/src/web/components/splatoon/SplatfestBox.vue
+++ b/src/web/components/splatoon/SplatfestBox.vue
@@ -1,96 +1,94 @@
 <template>
-  <div class="font-splatoon2" :class="{ 'has-results': showingResults }">
-    <div class="splatfest-header">
-      <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
-        {{ title }}
-      </h2>
-    </div>
+    <div class="font-splatoon2" :class="{ 'has-results': showingResults }">
+        <div class="splatfest-header">
+            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                {{ title }}
+            </h2>
+        </div>
 
-    <div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
-      <div class="image panel-image">
-        <img :src="image" />
-      </div>
+        <div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
+            <div class="image panel-image">
+                <img :src="image" />
+            </div>
 
-      <div class="regions">
-        <span v-for="(data, region) in festival.regions" :key="region" class="region">
-          <span class="icon is-small">
-            <img :src="require(`@/web/assets/img/region-${region}.svg`)" />
-          </span>
-          <span>{{ region | upperCase }}</span>
+            <div class="regions">
+                <span class="region" v-for="(data, region) in festival.regions" :key="region">
+                    <span class="icon is-small">
+                        <img :src="require(`@/web/assets/img/region-${region}.svg`)" />
+                    </span>
+                    <span>{{ region | upperCase }}</span>
 
-        </span>
-      </div>
+                </span>
+            </div>
 
-      <div class="columns is-gapless labels is-hidden-mobile">
-        <div class="column" v-text="teamNames.long.alpha" />
-        <div class="column has-text-right" v-text="teamNames.long.bravo" />
-      </div>
+            <div class="columns is-gapless labels is-hidden-mobile">
+                <div class="column" v-text="teamNames.long.alpha"></div>
+                <div class="column has-text-right" v-text="teamNames.long.bravo"></div>
+            </div>
 
-      <div class="columns is-gapless labels is-mobile is-hidden-tablet">
-        <div class="column" v-text="teamNames.short.alpha" />
-        <div class="column has-text-right" v-text="teamNames.short.bravo" />
-      </div>
+            <div class="columns is-gapless labels is-mobile is-hidden-tablet">
+                <div class="column" v-text="teamNames.short.alpha"></div>
+                <div class="column has-text-right" v-text="teamNames.short.bravo"></div>
+            </div>
 
-      <SplatfestResultsBox v-if="showingResults" :festival="festival" />
-    </div>
+            <SplatfestResultsBox :festival="festival" v-if="showingResults" />
+        </div>
 
-    <div v-if="showingResults" class="mobile-results is-hidden-tablet">
-      <SplatfestResultsBox :festival="festival" />
-    </div>
+        <div class="mobile-results is-hidden-tablet" v-if="showingResults">
+            <SplatfestResultsBox :festival="festival" />
+        </div>
 
-    <div v-if="!globalSplatfestMode" class="has-text-centered is-size-5 title-color festival-period-container">
-      <div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
-        <template v-if="!screenshotMode">
-          <span class="nowrap">
-            {{ festival.times.start | date(dateOptions) }}
-            {{ festival.times.start | time }}
-          </span>
-          &ndash;
-          <span class="nowrap">
-            {{ festival.times.end | date }}
-            {{ festival.times.end | time }}
-          </span>
-        </template>
-        <template v-else>
-          <template v-if="festival.state == 'upcoming'">
-            <template v-if="festival.times.start - now > 24 * 60 * 60">
-              {{ festival.times.start - now | shortDuration | time.in }}
+        <div class="has-text-centered is-size-5 title-color festival-period-container" v-if="!globalSplatfestMode">
+            <div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
+                <template v-if="!screenshotMode">
+                    <span class="nowrap">
+                        {{ festival.times.start | date(dateOptions) }}
+                        {{ festival.times.start | time }}
+                    </span>
+                    &ndash;
+                    <span class="nowrap">
+                        {{ festival.times.end | date }}
+                        {{ festival.times.end | time }}
+                    </span>
+                </template>
+                <template v-else>
+                    <template v-if="festival.state == 'upcoming'">
+                        <template v-if="festival.times.start - now > 24 * 60 * 60">
+                            {{ festival.times.start - now | shortDuration | time.in }}
+                        </template>
+                        <template v-else>
+                            {{ festival.times.start - now | durationHours | time.in }}
+                        </template>
+                    </template>
+                    <template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
+                        {{ festival.times.result - now | durationHours | resultsIn }}
+                    </template>
+                    <template v-else>
+                        {{ festival.times.end - now | durationHours | time.remaining }}
+                    </template>
+                </template>
+            </div>
+
+            <SplatfestWinnerBar :festival="festival" v-else />
+        </div>
+
+        <div class="splatfest-content has-text-centered" v-if="!screenshotMode && !globalSplatfestMode">
+            <template v-if="festival.state == 'upcoming'">
+                {{ festival.times.start - now | duration | time.in }}
             </template>
-            <template v-else>
-              {{ festival.times.start - now | durationHours | time.in }}
+
+            <template v-else-if="festival.state == 'active'">
+                {{ festival.times.end - now | duration | time.remaining }}
             </template>
-          </template>
-          <template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
-            {{ festival.times.result - now | durationHours | resultsIn }}
-          </template>
-          <template v-else>
-            {{ festival.times.end - now | durationHours | time.remaining }}
-          </template>
-        </template>
-      </div>
 
-      <SplatfestWinnerBar v-else :festival="festival" />
+            <template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
+                {{ festival.times.result - now | duration | resultsIn }}
+            </template>
+        </div>
+
+        <!-- Spacer at the bottom -->
+        <div v-if="globalSplatfestMode">&nbsp;</div>
     </div>
-
-    <div v-if="!screenshotMode && !globalSplatfestMode" class="splatfest-content has-text-centered">
-      <template v-if="festival.state == 'upcoming'">
-        {{ festival.times.start - now | duration | time.in }}
-      </template>
-
-      <template v-else-if="festival.state == 'active'">
-        {{ festival.times.end - now | duration | time.remaining }}
-      </template>
-
-      <template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
-        {{ festival.times.result - now | duration | resultsIn }}
-      </template>
-    </div>
-
-    <!-- Spacer at the bottom -->
-    <div v-if="globalSplatfestMode">
-&nbsp;
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestHistoryDialog.vue b/src/web/components/splatoon/SplatfestHistoryDialog.vue
index 0b8ee9a..ded5e0c 100644
--- a/src/web/components/splatoon/SplatfestHistoryDialog.vue
+++ b/src/web/components/splatoon/SplatfestHistoryDialog.vue
@@ -1,84 +1,76 @@
 <template>
-  <Modal v-if="festivals" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
-    <div class="modal-card">
-      <div class="modal-card-head">
-        <div class="level">
-          <div class="level-left">
-            <h3 class="title is-3 font-splatoon1 text-shadow">
-              {{ $t('splatfest.previous') }}
-            </h3>
-          </div>
+    <Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="festivals">
+        <div class="modal-card">
+            <div class="modal-card-head">
+                <div class="level">
+                    <div class="level-left">
+                        <h3 class="title is-3 font-splatoon1 text-shadow">{{ $t('splatfest.previous') }}</h3>
+                    </div>
 
-          <div class="level-right">
-            <DropdownBase
-              :label="selectedRegion.name"
-              style="margin: 0 -12px"
-              class="font-splatoon2 is-right-tablet"
-              trigger-class="button is-clear font-splatoon2"
-            >
-              <router-link
-                v-for="regionOption in regions"
-                :key="regionOption.key"
-                class="dropdown-item"
-                :to="regionOption.route"
-                exact
-              >
-                {{ regionOption.name }}
-              </router-link>
-            </DropdownBase>
-          </div>
-        </div>
-      </div>
-
-      <div ref="body" class="modal-card-body">
-        <div v-if="!region" class="columns idol-results">
-          <div class="column has-text-right is-hidden-mobile has-idol">
-            <img src="~@/web/assets/img/pearl.png" width="173" height="290" />
-          </div>
-          <div class="column is-5">
-            <div class="is-hidden-mobile" style="height: 85px" />
-            <div class="idol-results-container">
-              <IdolResultsBox />
-            </div>
-          </div>
-          <div class="column has-text-left is-hidden-mobile has-idol">
-            <img src="~@/web/assets/img/marina.png" width="172" height="339" />
-          </div>
-        </div>
-
-        <div v-for="(festival, index) in festivals" :key="festival.festival_id" class="splatfest-history-row">
-          <div class="level">
-            <div class="level-item">
-              <div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
-                <div class="hook-box">
-                  <SplatfestBox :festival="festival" history-mode show-regions />
+                    <div class="level-right">
+                        <DropdownBase
+                            :label="selectedRegion.name"
+                            style="margin: 0 -12px"
+                            class="font-splatoon2 is-right-tablet"
+                            trigger-class="button is-clear font-splatoon2"
+                        >
+                            <router-link v-for="regionOption in regions" class="dropdown-item" :key="regionOption.key" :to="regionOption.route" exact>
+                                {{ regionOption.name }}
+                            </router-link>
+                        </DropdownBase>
+                    </div>
                 </div>
-              </div>
             </div>
 
-            <div class="level-item">
-              <div class="splatfest-results-container">
-                <SplatfestResultsBox
-                  v-if="festival.results"
-                  :festival="festival"
-                  :results="festival.results"
-                  history-mode
-                />
-
-                <div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
-                  <div>{{ festival.times.result - now | duration | resultsIn }}</div>
-                  <div>
-                    {{ festival.times.result | date }}
-                    {{ festival.times.result | time }}
-                  </div>
+            <div class="modal-card-body" ref="body">
+                <div class="columns idol-results" v-if="!region">
+                    <div class="column has-text-right is-hidden-mobile has-idol">
+                        <img src="~@/web/assets/img/pearl.png" width="173" height="290" />
+                    </div>
+                    <div class="column is-5">
+                        <div class="is-hidden-mobile" style="height: 85px"></div>
+                        <div class="idol-results-container">
+                            <IdolResultsBox />
+                        </div>
+                    </div>
+                    <div class="column has-text-left is-hidden-mobile has-idol">
+                        <img src="~@/web/assets/img/marina.png" width="172" height="339" />
+                    </div>
+                </div>
+
+                <div v-for="(festival, index) in festivals" class="splatfest-history-row" :key="festival.festival_id">
+                    <div class="level">
+                        <div class="level-item">
+                            <div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
+                                <div class="hook-box">
+                                    <SplatfestBox :festival="festival" history-mode show-regions />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="level-item">
+                            <div class="splatfest-results-container">
+                                <SplatfestResultsBox
+                                    v-if="festival.results"
+                                    :festival="festival"
+                                    :results="festival.results"
+                                    history-mode
+                                />
+
+                                <div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
+                                    <div>{{ festival.times.result - now | duration | resultsIn }}</div>
+                                    <div>
+                                        {{ festival.times.result | date }}
+                                        {{ festival.times.result | time }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </Modal>
+    </Modal>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestResultsBox.vue b/src/web/components/splatoon/SplatfestResultsBox.vue
index dce06e5..edd1b8a 100644
--- a/src/web/components/splatoon/SplatfestResultsBox.vue
+++ b/src/web/components/splatoon/SplatfestResultsBox.vue
@@ -1,44 +1,44 @@
 <template>
-  <div class="splatfest-results">
-    <div class="background" />
+    <div class="splatfest-results">
+        <div class="background"></div>
 
-    <div class="columns is-marginless is-gapless is-mobile results-header">
-      <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
-        {{ $t('splatfest.results.title') }}
-      </div>
+        <div class="columns is-marginless is-gapless is-mobile results-header">
+            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
+                {{ $t('splatfest.results.title') }}
+            </div>
 
-      <div class="column">
-        <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
-          <img :src="festival.images.alpha | localSplatNetImageUrl" />
+            <div class="column">
+                <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
+                    <img :src="festival.images.alpha | localSplatNetImageUrl" />
+                </div>
+            </div>
+
+            <div class="column is-3">
+                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
+            </div>
+
+            <div class="column">
+                <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
+                    <img :src="festival.images.bravo | localSplatNetImageUrl" />
+                </div>
+            </div>
         </div>
-      </div>
 
-      <div class="column is-3">
-        <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
-      </div>
+        <SplatfestResultsRow :festival="festival" type="vote" />
 
-      <div class="column">
-        <div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
-          <img :src="festival.images.bravo | localSplatNetImageUrl" />
+        <template v-if="!isResultsV4">
+            <SplatfestResultsRow :festival="festival" type="solo" />
+            <SplatfestResultsRow :festival="festival" type="team" />
+        </template>
+        <template v-else>
+            <SplatfestResultsRow :festival="festival" type="regular" />
+            <SplatfestResultsRow :festival="festival" type="challenge" />
+        </template>
+
+        <div class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;" v-if="historyMode">
+            <SplatfestWinnerBar :festival="festival" />
         </div>
-      </div>
     </div>
-
-    <SplatfestResultsRow :festival="festival" type="vote" />
-
-    <template v-if="!isResultsV4">
-      <SplatfestResultsRow :festival="festival" type="solo" />
-      <SplatfestResultsRow :festival="festival" type="team" />
-    </template>
-    <template v-else>
-      <SplatfestResultsRow :festival="festival" type="regular" />
-      <SplatfestResultsRow :festival="festival" type="challenge" />
-    </template>
-
-    <div v-if="historyMode" class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;">
-      <SplatfestWinnerBar :festival="festival" />
-    </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestResultsRow.vue b/src/web/components/splatoon/SplatfestResultsRow.vue
index dc56156..9e30f88 100644
--- a/src/web/components/splatoon/SplatfestResultsRow.vue
+++ b/src/web/components/splatoon/SplatfestResultsRow.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="columns is-mobile result">
-    <div class="column">
-      <div v-if="winner == 'alpha'" class="winner-mark-shadow" />
-      <div v-if="winner == 'alpha'" class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" />
-      <div class="result-container">
-        <div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
-          <div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
+    <div class="columns is-mobile result">
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
+            <div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
+            <div class="result-container">
+                <div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
+                    <div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
+                </div>
+                <div class="font-splatoon2 title is-7" v-if="showAverage">
+                    {{ $t('splatfest.results.average') }}
+                    {{ averages.alpha | numberFormat(0) }}
+                </div>
+            </div>
         </div>
-        <div v-if="showAverage" class="font-splatoon2 title is-7">
-          {{ $t('splatfest.results.average') }}
-          {{ averages.alpha | numberFormat(0) }}
-        </div>
-      </div>
-    </div>
 
-    <div class="column is-3 has-text-centered font-splatoon2">
-      {{ $t(`splatfest.results.${type}`) }}
-    </div>
+        <div class="column is-3 has-text-centered font-splatoon2">
+            {{ $t(`splatfest.results.${type}`) }}
+        </div>
 
-    <div class="column">
-      <div v-if="winner == 'bravo'" class="winner-mark-shadow" />
-      <div v-if="winner == 'bravo'" class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" />
-      <div class="result-container">
-        <div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
-          <div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
+            <div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
+            <div class="result-container">
+                <div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
+                    <div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
+                </div>
+                <div class="font-splatoon2 title is-7" v-if="showAverage">
+                    {{ $t('splatfest.results.average') }}
+                    {{ averages.bravo | numberFormat(0) }}
+                </div>
+            </div>
         </div>
-        <div v-if="showAverage" class="font-splatoon2 title is-7">
-          {{ $t('splatfest.results.average') }}
-          {{ averages.bravo | numberFormat(0) }}
-        </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/SplatfestWinnerBar.vue b/src/web/components/splatoon/SplatfestWinnerBar.vue
index 5af29e5..6c9bcde 100644
--- a/src/web/components/splatoon/SplatfestWinnerBar.vue
+++ b/src/web/components/splatoon/SplatfestWinnerBar.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="festival-period" style="background-color: #333">
-    <span v-if="winner">{{ winnerText.before }}<span :style="{ color: winnerColor }">{{ teamNames[winner] }}</span>{{ winnerText.after }}</span>
-  </div>
+    <div class="festival-period" style="background-color: #333">
+        <span v-if="winner">{{ winnerText.before }}<span :style="{ color: winnerColor }">{{ teamNames[winner] }}</span>{{ winnerText.after }}</span>
+    </div>
 </template>
 
 <script>
diff --git a/src/web/components/splatoon/Stage.vue b/src/web/components/splatoon/Stage.vue
index 2097f28..5191cc4 100644
--- a/src/web/components/splatoon/Stage.vue
+++ b/src/web/components/splatoon/Stage.vue
@@ -1,27 +1,21 @@
 <template>
-  <div
-    v-if="stageDetails"
-    class="stage-image"
-    :class="{ hand: clickable }"
-    :style="style"
-    @click="click"
-  >
-    <figure class="image is-16by9" />
-    <span v-if="showTitle" class="stage-title">{{ name }}</span>
+    <div class="stage-image" :class="{ hand: clickable }" :style="style" @click="click" v-if="stageDetails">
+        <figure class="image is-16by9"></figure>
+        <span class="stage-title" v-if="showTitle">{{ name }}</span>
 
-    <Modal v-if="isOpen" class="is-xwide" @close="isOpen = false">
-      <div class="modal-content tilt-right-slight">
-        <p class="image is-16by9" @click="isOpen = false">
-          <img :src="largeImage" />
-        </p>
-        <p class="has-text-centered">
-          <span class="font-splatoon2">
-            {{ name }}
-          </span>
-        </p>
-      </div>
-    </Modal>
-  </div>
+        <Modal v-if="isOpen" @close="isOpen = false" class="is-xwide">
+            <div class="modal-content tilt-right-slight">
+                <p class="image is-16by9" @click="isOpen = false">
+                    <img :src="largeImage" />
+                </p>
+                <p class="has-text-centered">
+                    <span class="font-splatoon2">
+                        {{ name }}
+                    </span>
+                </p>
+            </div>
+        </Modal>
+    </div>
 </template>
 
 <script>