Fix animated fog background.

config/webpack/environment.js

@@ -94,8 +94,10 @@ export default class Environment {
         loader: 'postcss-loader',
         options: {
           ident: 'postcss',
-          plugins: [
+          plugins: loader => [
-            postcssImportPlugin(),
+            postcssImportPlugin({
+              root: loader.resourcePath,
+            }),
             postcssPresetEnvPlugin(),
             postcssAutoprefixerPlugin(),
           ],

src/_variables.scss

@@ -11,7 +11,7 @@ $icedream-text-color: #EEE !default;
 $icedream-extended-line-height: 5vmin !default;
 
 // extra features
-$icedream-metadata-overlay: true !default;
+$icedream-metadata-overlay: false !default;
 $icedream-metadata-overlay-background-gradient-from: #000 !default;
 $icedream-metadata-overlay-background-gradient-to: transparent !default;
 $icedream-metadata-prefix: '🎶 Now playing: ' !default;

src/main/_page.scss

@@ -2,12 +2,14 @@
 @import 'page/stations';
 
 .page {
-  background: $icedream-bg-color;
+  // background-color: #000;
+  background: transparent;
   color: $icedream-text-color;
 
   // seems like above colors get overwritten again when .active is added
   &.active {
-    background: $icedream-bg-color;
+    // background-color: #000;
+    background: transparent;
     color: $icedream-text-color;
   }
 

src/main/_smoke.scss

@@ -2,36 +2,36 @@
 @if $icedream-fog-bg {
   #main {
     position: relative;
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+    overflow-x: hidden;
 
     &::before {
       opacity: .2;
-      background-image: url('whitefog.png');
+      background-image: url('../images/whitefog.png');
       background-attachment: fixed;
       content: ' '; // sass-lint:disable-line variable-for-property
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
-      @if not($icedream-fog-bg-animated) {
-        background-size: cover;
       min-width: 100%;
-        width: 100%;
+
+      @if not($icedream-fog-bg-animated) {
+        background-size: 200% 100%;
       }
 
       // animate it so it moves right to left slowly?
       @if $icedream-fog-bg-animated {
         background-repeat: repeat-x;
         background-size: 100% 100%;
-        min-width: 200%;
-        width: 200%;
         animation: icedream-bg-slide linear $icedream-fog-bg-animation-length infinite;
+        transform: scale(2, 1) translateX(0);
+        transform-origin: left;
         @keyframes icedream-bg-slide {
-          from {
-            transform: translateX(0);
-          }
-
           to {
-            transform: translateX(-50%);
+            transform: scale(2, 1) translateX(-50%);
           }
         }
       }

webpack.config.babel.js

@@ -171,7 +171,7 @@ export default (options, { mode }) => {
           loader: 'url-loader',
           options: {
             ...urlLoaderOptions,
-            fallback: 'responsive-loader',
+            // fallback: 'responsive-loader',
           },
         })),