functionnal env with styling

package.json

@@ -49,7 +49,7 @@
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.3.0",
     "rimraf": "^2.6.2",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "7.3.1",
     "semver": "^5.4.1",
     "shelljs": "^0.7.8",
     "sw-precache-webpack-plugin": "^0.11.4",

src/App.vue

@@ -1,10 +1,9 @@
 <template>
   <div id="app">
     <header>
-      <span>Vue.js PWA</span>
+      <span>Nexus Timers</span>
     </header>
     <main>
-      <img src="./assets/logo.png" alt="Vue.js PWA">
       <router-view></router-view>
     </main>
   </div>
@@ -16,39 +15,48 @@ export default {
 }
 </script>
 
-<style>
-body {
-  margin: 0;
-}
 
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
+<style lang="sass">
+  $blizzard-background-color: #0A020F
+  $blizzard-font-color: #66CCFF
 
-main {
-  text-align: center;
-  margin-top: 40px;
-}
+  =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+ */
 
-header {
-  margin: 0;
-  height: 56px;
-  padding: 0 16px 0 24px;
-  background-color: #35495E;
-  color: #ffffff;
-}
 
-header span {
-  display: block;
-  position: relative;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: .02em;
-  font-weight: 400;
-  box-sizing: border-box;
-  padding-top: 16px;
-}
+  body
+    margin: 0
+
+  #app
+    font-family: 'Avenir', Helvetica, Arial, sans-serif
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    color: $blizzard-font-color
+    text-shadow: 0 0 1rem #009cff
+    background-color: $blizzard-background-color
+
+  main
+
+    margin-top: 40px
+
+  header
+    margin: 0
+    height: 56px
+    padding: 0 16px 0 24px
+    +blizzard-header-gradient
+    text-shadow: 0 0 1rem #009cff
+    color: #fff
+    span
+      display: block
+      position: relative
+      font-size: 20px
+      line-height: 1
+      letter-spacing: .02em
+      font-weight: 400
+      box-sizing: border-box
+      padding-top: 16px
+
 </style>

src/components/MapSelector.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="map-selector">
-    <h1 class="map-selector__title">Map Selector</h1>
-    <ul>
-      <li v-for="map in maps"><a>{{ map.name }}</a></li>
+    <h1 class="map-selector__title">Battleground Selector</h1>
+    <ul class="map-selector__map-list">
+      <li class="map-selector__map-list-item" v-for="map in maps"><a>{{ map.name }}</a></li>
     </ul>
   </div>
 </template>
@@ -18,18 +18,42 @@
     blackheartSBay: {
       name: "Blackheart's Bay"
     },
-    gardenOfTerror: {},
-    HanamuraTemple: {},
-    VolskayaFoundry: {},
-    HauntedMines: {},
-    TowerOfDoom: {},
-    InfernalShrines: {},
-    TombOfTheSpiderQueen: {},
-    SkyTemple: {},
-    DragonShire: {},
-    CursedHollow: {},
-    BraxisHoldout: {},
-    WarheadJunction: {}
+    gardenOfTerror: {
+      name: 'Garden of Terror'
+    },
+    HanamuraTemple: {
+      name: 'Hanamura Temple'
+    },
+    VolskayaFoundry: {
+      name: 'Volskaya Foundry'
+    },
+    HauntedMines: {
+      name: 'Haunted Mines'
+    },
+    TowersOfDoom: {
+      name: 'Towers of Doom'
+    },
+    InfernalShrines: {
+      name: 'Infernal Shrines'
+    },
+    TombOfTheSpiderQueen: {
+      name: 'Tomb of the Spider Queen'
+    },
+    SkyTemple: {
+      name: 'Sky Temple'
+    },
+    DragonShire: {
+      name: 'Dragon Shire'
+    },
+    CursedHollow: {
+      name: 'Cursed Hollow'
+    },
+    BraxisHoldout: {
+      name: 'Braxis Holdout'
+    },
+    WarheadJunction: {
+      name: 'Warhead Junction'
+    }
   }
 
   module.exports = {
@@ -41,3 +65,12 @@
     }
   }
 </script>
+
+<style lang="sass">
+  .map-selector
+    &__map-list
+      list-style-type: none
+      &-item
+        font-size: 2rem
+        padding: 10px 0 10px 5px
+</style>

yarn.lock

@@ -139,7 +139,7 @@ ajv-keywords@^2.1.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
   integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
 
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
+ajv-keywords@^3.1.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
@@ -154,7 +154,7 @@ ajv@^5.0.0, ajv@^5.2.3, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
+ajv@^6.1.0, ajv@^6.5.5:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.11.0.tgz#c3607cbc8ae392d8a5a536f25b21f8e5f3f87fe9"
   integrity sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==
@@ -4496,7 +4496,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -4887,7 +4887,7 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0, neo-async@^2.6.1:
+neo-async@^2.5.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
@@ -5460,6 +5460,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -6691,15 +6696,15 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-sass-loader@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+sass-loader@7.1.3:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
+  integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==
   dependencies:
     clone-deep "^4.0.1"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
+    loader-utils "^1.0.1"
+    neo-async "^2.5.0"
+    pify "^4.0.1"
     semver "^6.3.0"
 
 sax@~1.2.1, sax@~1.2.4:
@@ -6722,14 +6727,6 @@ schema-utils@^0.4.5:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.1:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.4.tgz#a27efbf6e4e78689d91872ee3ccfa57d7bdd0f53"
-  integrity sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==
-  dependencies:
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"