From 6b83bc3c1bb2a8cb5148e1f00a0b1e3d9cfaee52 Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Fri, 13 Jul 2018 15:54:11 +0200
Subject: [PATCH] Fix animated fog background.

---
 config/webpack/environment.js |   6 ++++--
 src/_variables.scss           |   2 +-
 src/{ => images}/whitefog.png | Bin
 src/main/_page.scss           |   6 ++++--
 src/main/_smoke.scss          |  22 +++++++++++-----------
 webpack.config.babel.js       |   2 +-
 6 files changed, 21 insertions(+), 17 deletions(-)
 rename src/{ => images}/whitefog.png (100%)

diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 3bac3ee..0b8c490 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -94,8 +94,10 @@ export default class Environment {
         loader: 'postcss-loader',
         options: {
           ident: 'postcss',
-          plugins: [
-            postcssImportPlugin(),
+          plugins: loader => [
+            postcssImportPlugin({
+              root: loader.resourcePath,
+            }),
             postcssPresetEnvPlugin(),
             postcssAutoprefixerPlugin(),
           ],
diff --git a/src/_variables.scss b/src/_variables.scss
index 399426a..cdfdd8b 100644
--- a/src/_variables.scss
+++ b/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;
diff --git a/src/whitefog.png b/src/images/whitefog.png
similarity index 100%
rename from src/whitefog.png
rename to src/images/whitefog.png
diff --git a/src/main/_page.scss b/src/main/_page.scss
index e090686..b8dc61b 100644
--- a/src/main/_page.scss
+++ b/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;
   }
 
diff --git a/src/main/_smoke.scss b/src/main/_smoke.scss
index 5a2ef7f..d074fe8 100644
--- a/src/main/_smoke.scss
+++ b/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%;
+      min-width: 100%;
+
       @if not($icedream-fog-bg-animated) {
-        background-size: cover;
-        min-width: 100%;
-        width: 100%;
+        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%);
           }
         }
       }
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 2a243da..56e2449 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -171,7 +171,7 @@ export default (options, { mode }) => {
           loader: 'url-loader',
           options: {
             ...urlLoaderOptions,
-            fallback: 'responsive-loader',
+            // fallback: 'responsive-loader',
           },
         })),