WIP: modifs style

src/App.vue

@@ -28,7 +28,7 @@
     margin: 0
     height: 56px
     padding: 0 16px 0 24px
-    +blizzard-header-gradient
+    @include blizzard-header-gradient
     text-shadow: 0 0 1rem #009cff
     color: #fff
     span

src/components/Battleground.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="battleground" v-if="battleground">
+    <div class="battleground-background" :style="backgroundCss"/>
     <div class="battleground-content">
-      <div>Welcome to {{ battleground.name }}</div>
-
       <div id="objectives" class="objectives">
-        <div class="row" v-for="objectiveRow in battleground.objectives">
+        <div class="objectives-row" v-for="objectiveRow in battleground.objectives">
           <template v-for="objective in objectiveRow">
             <Objective :objective="objective"></Objective>
           </template>
@@ -19,18 +18,27 @@
   $border-style: 1px solid #66CCFF
 
   .battleground
-    background-image: url(/static/backgrounds/alterac-pass.jpg)
-    background-size: contain
-    &-content
-      backdrop-filter: blur(4px)
+    &-background, &-content
+      position: absolute
       height: 100vh
+      width: 100vw
+
+    &-background
+      background-size: cover
+      background-position: center
+      filter: blur(2px) brightness(70%)
+      z-index: 5
+
+    &-content
+      z-index: 10
+
 
   .objectives
     display: flex
     flex-direction: column
     height: 100%
 
-    .row
+    &-row
       display: flex
       justify-content: space-between
       flex-grow: 1
@@ -60,6 +68,11 @@
       },
       battleground () {
         return BATTLEGROUNDS[this.battlegroundId]
+      },
+      backgroundCss () {
+        return {
+          backgroundImage: `url(${this.battleground.backgroundUrl})`
+        }
       }
     },
     watch: {
@@ -73,4 +86,3 @@
     }
   }
 </script>
-

src/components/Objective.vue

@@ -12,6 +12,7 @@
     <div>
       <Timer
         ref="timer"
+        class="objective-timer"
         :initialTime="objective.initialSpawnTime"
         />
     </div>
@@ -22,6 +23,9 @@
   .objective
     width: 100%
     text-align: center
+
+    &-timer
+      font-size: 2rem
 </style>
 
 <script>

src/gameInfos/battlegrounds.js

@@ -16,6 +16,7 @@ const BOT = 'bottom'
 export default {
   alteracPass: {
     name: 'Alterac Pass',
+    backgroundUrl: '/static/backgrounds/alterac-pass.jpg',
     objectives: [
       [
         MAP.cavalryPrison

src/styles/main.sass

@@ -6,12 +6,29 @@
 // ############
 // ## Colors ##
 // ############
+
 $blizzard-background-color: #0A020F
 $blizzard-background-color-transparent: #0A020FCC
-$blizzard-font-color: #fff
+$blizzard-font-color: #6CF
 
-=blizzard-header-gradient
+@mixin blizzard-header-gradient
   background: #0d39a0 /* Old browsers */
   background: -moz-linear-gradient(left,  #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+
+
+// #################
+// ## Breakpoints ##
+// #################
+
+$xs: 0px
+$sm: 576px
+$md: 768px
+$lg: 992px
+$xl: 1200px
+
+/// A shortcut for media queries
+@mixin breakpoint($point)
+  @media (min-width: $point)
+    @content