package.json

@@ -38,7 +38,7 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
     "css-loader": "^1.0.0",
-    "cssnano": "^4.0.3",
+    "cssnano": "^4.0.1",
     "debug": "^3.1.0",
     "eslint": "4",
     "eslint-config-airbnb-base": "^13.0.0",
@@ -48,7 +48,6 @@
     "execa": "^0.10.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^4.3.1",
     "jimp": "^0.2.28",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.2",

src/_header.scss

@@ -1,3 +1,2 @@
 @import 'header/nav';
 @import 'header/meta';
-@import 'header/player';

src/_main.scss

@@ -1,10 +1,2 @@
 @import 'main/page';
 @import 'main/smoke';
-
-#main {
-  background-image: url(./images/decay.png);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 50%;
-  background-color: #000;
-}

src/_mixins.scss

@@ -1,3 +0,0 @@
-@mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
-  filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
-}

src/_variables.scss

@@ -11,20 +11,18 @@ $icedream-text-color: #EEE !default;
 $icedream-extended-line-height: 5vmin !default;
 
 // extra features
-$icedream-saturation: true !default;
 $icedream-metadata-overlay: true !default;
-$icedream-metadata-overlay-background-gradient-from: #000 !default;
+$icedream-metadata-overlay-background-gradient-from: rgba(0, 0, 0, .75) !default;
 $icedream-metadata-overlay-background-gradient-to: transparent !default;
 $icedream-metadata-prefix: '🎶 Now playing: ' !default;
 $icedream-nav-tab-fix: false !default;
 $icedream-nav-bg-fade: true !default;
-$icedream-fog-base-opacity: 0.05 !default;
 $icedream-fog-bg: true !default;
 $icedream-fog-bg-blur: false !default;
 $icedream-fog-bg-animated: true !default;
 $icedream-fog-bg-pulse-animation-length: 68s !default;
 $icedream-fog-bg-slide-animation-length: 25s !default;
-$icedream-station-fill-background-color: rgba(255, 255, 255, .1) !default;
+$icedream-station-fill-background-color: rgba(255, 255, 255, .1);
 
 $rekt-tab-count: 4 !default;
 $rekt-border-color: #AAA !default;

src/header/_player.scss

@@ -1,15 +0,0 @@
-// player
-#player {
-  .player_button {
-    @if $icedream-saturation {
-      @include saturate-from-red();
-    }
-  }
-  .slider {
-    .active {
-      @if $icedream-saturation {
-        @include saturate-from-red();
-      }
-    }
-  }
-}

src/icedream.scss

@@ -1,7 +1,5 @@
 @charset 'UTF-8';
 
-@import 'mixins';
-
 @import 'variables';
 
 @import 'font';

src/main/_page.scss

@@ -17,44 +17,4 @@
   &:not(#page_Chat) {
     @include icedream-font;
   }
-
-  &#page_EQ {
-    #wave {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 25%;
-      bottom: 25%;
-    }
-    #eq {
-      margin: 20vh;
-      transition: opacity ease-out .33s, transform ease-out .33s;
-      opacity: 0;
-      transform: scale(0.75);
-      .slider {
-        background-color: rgba(0, 0, 0, .75);
-      }
-    }
-    #bars {
-      display: none;
-    }
-    &:hover {
-      #eq {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-
-  .eq {
-    @if $icedream-saturation {
-      @include saturate-from-red();
-    }
-  }
-
-  #wave {
-    @if $icedream-saturation {
-      @include saturate-from-red(300%, 5%);
-    }
-  }
 }

src/main/_smoke.scss

@@ -8,7 +8,7 @@
     overflow-x: hidden;
 
     &::before {
-      opacity: $icedream-fog-base-opacity;
+      opacity: .2;
       background-image: url('../images/whitefog.png');
       background-attachment: fixed;
       content: ' '; // sass-lint:disable-line variable-for-property
@@ -36,19 +36,19 @@
         transform-origin: left;
         @keyframes icedream-bg-pulse {
           0% {
-            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
+            opacity: .3;
           }
           22% {
-            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .12);
+            opacity: .2;
           }
           54% {
-            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .15);
+            opacity: .35;
           }
           77% {
-            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
+            opacity: .16;
           }
           100% {
-            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
+            opacity: .3;
           }
         }
         @keyframes icedream-bg-slide {

webpack.config.babel.js

@@ -40,8 +40,6 @@ const {
   ModuleConcatenationPlugin,
 } = optimize;
 
-const dj = 'icedream';
-
 export default (options, { mode }) => {
   const environment = new Environment({
     // @HACK
@@ -61,62 +59,39 @@ export default (options, { mode }) => {
     docker,
   } = environment;
 
-  const baseOutputFilepath = 'static/theme/[type]/[filename]';
+  const baseOutputFilename = development
-  const filenames = {
+    ? 'assets/dev/[name].dev.[ext]'
-    css: '[name].[ext]',
+    // Always use a hash (in production) to prevent files with the same name causing issues
-    default: development
+    : 'assets/prod/[chunkhash:2]/[name].[chunkhash:8].[ext]';
-      ? '[name].dev.[ext]'
-      // Always use a hash (in production) to prevent files with the same name causing issues
-      : '[name].[chunkhash:8].[ext]',
-  };
 
-  function replaceField(string, name, value) {
+  const webpackChunkFilename = baseOutputFilename
-    const retval = string.replace(new RegExp(`\\[${name}(.*?)\\]`), value);
+    .replace(/\[ext(.*?)\]/g, 'js');
-    debug('replaceField:', { args: { string, name, value } }, string, '=>', retval);
+  const webpackOutputFilename = webpackChunkFilename;
-    return retval;
-  }
 
-  function getOutputFilename(type) {
+  const assetOutputFilename = baseOutputFilename
-    let filename = baseOutputFilepath;
+    .replace(/\[chunkhash(.*?)\]/g, '[hash$1]');
-    switch (type) {
-      case 'css':
-        filename = replaceField(filename, 'type', type);
-        break;
-      default:
-        filename = replaceField(filename, 'type', `${type}/${dj}`);
-        break;
-    }
-    filename = replaceField(filename, 'filename', filenames[type] || filenames.default);
-    return filename;
-  }
 
-  function getAssetOutputFilename(type) {
+  const cssOutputFileName = baseOutputFilename
-    let filename = getOutputFilename(type);
-    filename = replaceField(filename, 'chunkhash', '[hash$1]');
-    return filename;
-  }
-
-  const cssOutputFileName = getOutputFilename('css')
     .replace(/\[ext(.*?)\]/g, 'css');
     // .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
-  const cssChunkOutputFileName = getOutputFilename('css')
+  const cssChunkOutputFileName = baseOutputFilename
     .replace(/\[chunkhash(.*?)\]/g, '[id$1]')
     .replace(/\[ext(.*?)\]/g, 'css');
   // const cssOutputRebasePath = `${slash(path.relative(path.dirname(cssOutputFileName), ''))}/`;
-  const cssOutputRebasePath = '../../../';
+  const cssOutputRebasePath = '/';
 
   // Default options for file-loader
-  const getFileLoaderOptions = type => ({
+  const fileLoaderOptions = {
-    name: getAssetOutputFilename(type),
+    name: assetOutputFilename,
     publicPath: cssOutputRebasePath,
-  });
+  };
 
   // Default options for url-loader
-  const getUrlLoaderOptions = type => ({
+  const urlLoaderOptions = {
-    ...getFileLoaderOptions(type),
+    ...fileLoaderOptions,
     // limit: 1, // Don't inline anything (but empty files) by default
     limit: 4 * 1024,
-  });
+  };
 
   const config = {
     name: 'frontend',
@@ -193,57 +168,22 @@ export default (options, { mode }) => {
           /\.jpe?g$/i, // jpeg
         ].map(test => ({
           test,
-          use: [
+          loader: 'url-loader',
-            {
+          options: {
-              loader: 'url-loader',
+            ...urlLoaderOptions,
-              options: {
+            // fallback: 'responsive-loader',
-                ...getUrlLoaderOptions('img'),
+          },
-                // fallback: 'responsive-loader',
-              },
-            },
-            {
-              loader: 'image-webpack-loader',
-              options: {
-                mozjpeg: {
-                  progressive: true,
-                  quality: 80,
-                },
-                optipng: {
-                  enabled: true,
-                  optimizationLevel: 7,
-                },
-                pngquant: {
-                  enabled: false,
-                  quality: '65-85',
-                  speed: 2,
-                  strip: true,
-                },
-                gifsicle: {
-                  interlaced: false,
-                },
-                disable: development,
-              },
-            },
-          ],
         })),
 
         ...[
           /\.(mp4|ogg|webm)$/i, // video
+          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
           /\.(wav|mp3|m4a|aac|oga)$/i, // audio
         ].map(test => ({
           test,
           loader: 'url-loader',
-          options: getUrlLoaderOptions('media'),
+          options: urlLoaderOptions,
         })),
-
-        ...[
-          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
-        ].map(test => ({
-          test,
-          loader: 'url-loader',
-          options: getUrlLoaderOptions('font'),
-        })),
-
         {
           test: /\.css$/,
           use: environment.styleLoaders(),
@@ -265,8 +205,8 @@ export default (options, { mode }) => {
     },
 
     output: {
-      filename: replaceField(getOutputFilename('js'), 'ext', 'js'),
+      filename: webpackOutputFilename,
-      chunkFilename: replaceField(getOutputFilename('js'), 'ext', 'js'),
+      chunkFilename: webpackChunkFilename,
       path: path.join(__dirname, 'dist'),
       publicPath: '',
       globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
@@ -385,9 +325,9 @@ export default (options, { mode }) => {
           sourceMap: true,
         }),
         new OptimizeCssAssetsPlugin({
+          assetNameRegExp: /\.css$/gi,
           cssProcessor: cssnano,
           cssProcessorOptions: {
-            preset: 'advanced',
             parser: postcssSafeParser,
             discardComments: { removeAll: true },
           },
@@ -397,7 +337,7 @@ export default (options, { mode }) => {
     },
     devtool: server ? 'cheap-module-source-map' : 'source-map',
     entry: {
-      [dj]: [
+      app: [
         path.join(__dirname, 'src'),
       ],
     },