Reorganize CSS

src/css/_backgrounds.scss

@@ -0,0 +1,66 @@
+// Images
+$bg-squids: url(../img/bg-squids.png);
+$bg-stripes: url(../img/bg-stripes.png);
+$bg-dots: url(../img/bg-dots.png);
+$bg-spots: url(../img/bg-spots.png);
+$bg-mask-product: url(../img/bg-mask-product.png);
+$bg-mask-title-squid: url(../img/bg-mask-title-squid.png);
+$bg-mask-hook: url(../img/bg-mask-hook.png);
+
+// Colors
+$bg-battle-regular: #19d719;
+$bg-battle-ranked: #f54910;
+$bg-battle-league: #f02d7d;
+
+// Backgrounds
+.bg-squids {
+    background-image: $bg-squids;
+    background-position: top;
+    background-size: 360px 360px;
+}
+
+.bg-stripes {
+    background-image: $bg-stripes;
+    background-position: top;
+    background-size: 80px 80px;
+}
+
+.bg-spots-dots {
+    background-image : $bg-spots, $bg-dots;
+    background-position: 50% top;
+    background-size: 189px 189px, 40px 40px;
+}
+
+// Background masks
+.bg-mask-product {
+    -webkit-mask-image: $bg-mask-product;
+    mask-image: $bg-mask-product;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 600px 960px; // Original value: 500px 800px
+    mask-size: 600px 960px;
+    -webkit-mask-position: center top;
+    mask-position: center top;
+}
+
+.bg-mask-title-squid {
+    -webkit-mask-image: $bg-mask-title-squid;
+    mask-image: $bg-mask-title-squid;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    -webkit-mask-position: right center;
+    mask-position: right center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+}
+
+.bg-mask-hook {
+    -webkit-mask-image: $bg-mask-hook;
+    mask-image: $bg-mask-hook;
+    -webkit-mask-size: 36px 29px;
+    mask-size: 36px 29px;
+    -webkit-mask-position: center top;
+    mask-position: center top;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+}

src/css/_boxes.scss

@@ -0,0 +1,25 @@
+// Generic boxes
+.product-box {
+    @extend .bg-mask-product;
+    border-radius: 32px;
+    padding-top: 35px;
+}
+
+.hook-box {
+    border-radius: 32px;
+    padding: 10px;
+    overflow: hidden;
+
+    &:before {
+        content: "";
+        position: absolute;
+        background-position-y: bottom !important;
+
+        width: 100%;
+        height: 29px;
+        top: -28px;
+        left: 0;
+
+        @extend .bg-mask-hook;
+    }
+}

src/css/_fonts.scss

@@ -17,3 +17,7 @@
     font-family: Splatoon2;
     src: url(../fonts/eb82d017016045bf998cade4dac1ec22.woff2) format("woff2"),url(../fonts/b4fab2f6ac35a758f6aeb5b7054ab121.woff) format("woff")
 }
+
+.text-shadow {
+    text-shadow: 1px 1px 0 #000;
+}

src/css/_modifiers.scss

@@ -0,0 +1,43 @@
+.font-splatoon1 {
+    font-family: Splatoon1, $family-sans-serif;
+}
+
+.font-splatoon2 {
+    font-family: Splatoon2, $family-sans-serif;
+}
+
+.title-color {
+    color: $title-color;
+}
+
+.title-squid {
+    background-color: $purple;
+    color: $title-color;
+    @extend .bg-stripes;
+    @extend .bg-mask-title-squid;
+
+    display: inline-block;
+
+    padding: 2px 48px 2px 20px;
+    margin: 0 0 10px -20px;
+}
+
+.tilt-right {
+    -webkit-transform: rotate(1.4deg);
+    transform: rotate(1.4deg);
+}
+
+.tilt-left {
+    -webkit-transform: rotate(-1.4deg);
+    transform: rotate(-1.4deg);
+}
+
+.columns.is-slim {
+    margin-left: -0.4rem;
+    margin-right: -0.4rem;
+
+    .column {
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+    }
+}

src/css/_variables.scss

@@ -1,12 +1,11 @@
 @import '~bulma/sass/utilities/initial-variables';
 
-$original-family-sans-serif: $family-sans-serif;
-$family-sans-serif: Splatoon2, $family-sans-serif;
-
 $text: $grey-lighter;
 $text-strong: $white-ter;
 $title-color: $white-ter;
 $subtitle-color: $grey-lighter;
 
+$purple: #460fc8;
+
 // Temp: This can be removed after Bulma 0.5.1
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;

src/css/main.scss

@@ -1,60 +1,24 @@
 @import './fonts';
 @import './variables';
 @import '~bulma';
-
-.plain-font {
-    font-family: $original-family-sans-serif;
-}
-
-.alt-font {
-    font-family: Splatoon1, $original-family-sans-serif;
-}
-
-.title-effect {
-    color: $title-color;
-    background: #460fc8 url(../img/bkg-stripes.png);
-
-    display: inline-block;
-
-    padding: 2px 48px 2px 20px;
-    margin: 0 0 10px -20px;
-
-    -webkit-mask-image: url(../img/bkg-header.png);
-    mask-image: url(../img/bkg-header.png);
-    -webkit-mask-size: cover;
-    mask-size: cover;
-    -webkit-mask-position: right center;
-    mask-position: right center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-}
+@import './modifiers';
+@import './backgrounds';
+@import './boxes';
 
 html {
-    background: #191919 url(../img/bkg-squid.png) top;
-    background-size: 360px 360px;
+    @extend .bg-squids;
+    background-color: #191919;
 }
 
 .schedule-box {
-    background: url(../img/bkg-stripes.png) top;
-    background-size: 80px 80px;
-    border-radius: 32px;
-
-    text-shadow: 1px 1px 0 #000;
+    @extend .product-box;
+    @extend .bg-stripes;
+    @extend .text-shadow;
 
     max-width: 600px;
     padding: 35px 10px 10px 10px;
     margin: auto;
 
-    -webkit-mask-image: url(../img/bkg-mask-product.png);
-    mask-image: url(../img/bkg-mask-product.png);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    // Original value: 500px 800px
-    -webkit-mask-size: 600px 960px;
-    mask-size: 600px 960px;
-    -webkit-mask-position: center top;
-    mask-position: center top;
-
     .schedule-icon {
         display: inline-block;
         width: 42px;
@@ -66,79 +30,36 @@ html {
     }
 
     &.regular {
-        background-color: #19d719;
+        background-color: $bg-battle-regular;
         .schedule-icon {
             background-image: url(../img/battle-regular.png);
         }
     }
 
     &.ranked {
-        background-color: #f54910;
+        background-color: $bg-battle-ranked;
         .schedule-icon {
             background-image: url(../img/battle-ranked.png);
         }
     }
 
     &.league {
-        background-color: #f02d7d;
+        background-color: $bg-battle-league;
         .schedule-icon {
             background-image: url(../img/battle-league.png);
         }
     }
 }
 
-.hook-box-wrapper {
-    position: relative;
-    margin: 40px auto 20px;
-}
-
-.hook-box {
-    border-radius: 32px;
-    padding: 10px;
-    text-shadow: 1px 1px 0 #000;
-    overflow: hidden;
-
-    &, &:before {
-        background: url(../img/bkg-spots.png) 50%, url(../img/bkg-dots.png) 50%;
-        background-size: 189px 189px, 40px 40px;
-    }
-
-    &:before {
-        content: "";
-        position: absolute;
-
-        width: 100%;
-        height: 29px;
-        top: -28px;
-        left: 0;
-
-        -webkit-mask-image: url(../img/bkg-mask-hook.png);
-        mask-image: url(../img/bkg-mask-hook.png);
-        -webkit-mask-size: 36px 29px;
-        mask-size: 36px 29px;
-        -webkit-mask-position: center top;
-        mask-position: center top;
-        -webkit-mask-repeat: no-repeat;
-        mask-repeat: no-repeat;
-    }
-}
-
 .salmon-run {
+    @extend .text-shadow;
+    max-width: 600px;
+    margin: 40px auto 0;
+
     .hook-box, .hook-box:before {
         background-color: darken(#ff5600, 10%);
+        @extend .bg-spots-dots;
     }
-
-    max-width: 600px;
-}
-
-.tilt-right {
-    -webkit-transform: rotate(1.4deg);
-    transform: rotate(1.4deg);
-}
-
-.tilt-left {
-    -webkit-transform: rotate(-1.4deg);
-    transform: rotate(-1.4deg);
 }
 
 .main-schedule {
@@ -150,18 +71,6 @@ html {
     .top-bar {
         margin-bottom: 0.5rem;
     }
-
-    .rule-name {
-        color: $title-color;
-        font-size: 1.25rem;
-    }
-}
-
-.upcoming-schedule {
-    .rule-name {
-        color: $title-color;
-        font-size: 1.1rem;
-    }
 }
 
 .stage-image {
@@ -171,7 +80,7 @@ html {
 
     position: relative;
 
-    span {
+    .stage-title {
         position: absolute;
         right: 3px;
         bottom: 3px;
@@ -189,13 +98,3 @@ html {
         text-overflow: ellipsis;
     }
 }
-
-.columns.is-slim {
-    margin-left: -0.4rem;
-    margin-right: -0.4rem;
-
-    .column {
-        padding-left: 0.4rem;
-        padding-right: 0.4rem;
-    }
-}

src/js/components/App.vue

@@ -5,12 +5,12 @@
                 <div class="level">
                     <div class="level-left">
                         <div class="level-item">
-                            <h1 class="title is-1 alt-font is-inline">Splatoon 2</h1>
+                            <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 is-inline">Map Schedules</h3>
+                            <h3 class="subtitle is-3 font-splatoon2 is-inline">Map Schedules</h3>
                         </div>
                     </div>
                 </div>
@@ -36,7 +36,7 @@
                     </div>
 
                     <div v-if="coop">
-                        <div class="hook-box-wrapper salmon-run tilt-left">
+                        <div class="salmon-run tilt-left">
                             <div class="hook-box">
                                 <SalmonRunBox :coop="coop" :now="now"></SalmonRunBox>
                             </div>
@@ -47,7 +47,7 @@
             </div>
         </div>
 
-        <div class="hero-foot has-text-centered has-text-grey plain-font is-size-7" style="margin-bottom: 0.5rem">
+        <div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
             <div class="container is-fluid">
                 This website is not affiliated with Nintendo.
                 All product names, logos, and brands are property of their respective owners.

src/js/components/SalmonRunBox.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
-        <h2 class="title is-3 is-size-2-fullhd alt-font">
+    <div class="font-splatoon2">
+        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
             Salmon Run
         </h2>
-        <div class="is-size-5 title-effect alt-font">
+        <div class="is-size-5 title-squid font-splatoon1">
             <span v-if="isOpen">Now open!</span>
             <span v-else>Soon!</span>
         </div>

src/js/components/ScheduleBox.vue

@@ -1,13 +1,13 @@
 <template>
-    <div v-if="firstSchedule">
-        <h2 class="title is-3 is-size-2-fullhd alt-font">
+    <div class="font-splatoon2" v-if="firstSchedule">
+        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
             <span class="schedule-icon"></span>{{ firstSchedule.game_mode.name }}
         </h2>
 
         <div class="main-schedule">
             <div class="level is-mobile top-bar">
                 <div class="level-left">
-                    <div class="level-item rule-name">{{ firstSchedule.rule.name }}</div>
+                    <div class="level-item title-color is-size-5">{{ firstSchedule.rule.name }}</div>
                 </div>
                 <div class="level-right">
                     <div class="level-item">
@@ -24,12 +24,12 @@
         </div>
 
         <div class="upcoming-schedule" v-if="upcomingSchedule">
-            <div class="is-size-5 title-effect alt-font">
+            <div class="is-size-5 title-squid font-splatoon1">
                 Next
             </div>
             <div class="level is-mobile is-marginless is-hidden-tablet">
                 <div class="level-left">
-                    <div class="level-item rule-name">{{ upcomingSchedule.rule.name }}</div>
+                    <div class="level-item title-color is-size-5">{{ upcomingSchedule.rule.name }}</div>
                 </div>
                 <div class="level-right">
                     <div class="level-item">

src/js/components/Stage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="stage-image" :style="style">
         <figure class=" image is-16by9"></figure>
-        <span>{{ stage.name }}</span>
+        <span class="stage-title">{{ stage.name }}</span>
     </div>
 </template>