Get rid of sass-lint errors.

sass-lint.yml

@@ -26,6 +26,11 @@ rules:
 
   no-warn: 1
   no-debug: 1
+  no-duplicate-properties:
+    - 2
+    -
+      exclude:
+        - background
   no-ids: 0
   no-important: 2
   hex-notation:

src/_debug.sass

@@ -1,18 +1,20 @@
 @if ($debug)
   *
-    background-color: rgba(255, 0, 255, 0.1)
+    background-color: $debug-element-background-color
-    border: red 1px solid
+    border: $debug-element-border-color 1px solid
     box-sizing: border-box
     position: relative
-    &:after
+
+    &::after
       content: attr(class) // sass-lint:disable-line variable-for-property
       z-index: 99999
-      box-shadow: 0 0 10px black
+      box-shadow: 0 0 10px $debug-label-shadow-color
       position: absolute
       left: 0
       top: 0
-      background: white
+      color: $debug-label-text-color
-      border: black 1px solid
+      background: $debug-label-background-color
+      border: $debug-label-border-color 1px solid
       padding: 4px
       font-size: 12px
       font-weight: bold

src/_font.scss

@@ -1,7 +1,7 @@
 // @import url('https://fonts.googleapis.com/css?family=Orbitron:400,700');
 // @import '~typeface-orbitron';
 
-@mixin icedream-font() {
+@mixin icedream-font {
   font-family: 'Orbitron', sans-serif;
   font-size: 2vmin;
 }

src/_header.scss

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

src/_main.scss

@@ -0,0 +1,2 @@
+@import 'main/page';
+@import 'main/smoke';

src/_variables.scss

@@ -1,17 +1,25 @@
 $debug: false !default;
+$debug-element-background-color: rgba(255, 0, 255, .1) !default;
+$debug-element-border-color: #F00 !default;
+$debug-label-background-color: #FFF !default;
+$debug-label-text-color: #000 !default;
+$debug-label-border-color: $debug-label-text-color !default;
+$debug-label-shadow-color: #000 !default;
 
 $icedream-bg-color: #000 !default;
 $icedream-text-color: #EEE !default;
+$icedream-extended-line-height: 5vmin !default;
 
 // extra features
-$icedream-metadata-overlay: false !default;
+$icedream-metadata-overlay: true !default;
+$icedream-metadata-overlay-background-gradient-from: #000 !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-bg: true !default;
 $icedream-fog-bg-animated: true !default;
 $icedream-fog-bg-animation-length: 5s !default;
-$icedream-fog-bg-tab-offset: true !default;
 
 $rekt-tab-count: 4 !default;
 $rekt-border-color: #AAA !default;

src/header/_meta.scss

@@ -0,0 +1,9 @@
+@import 'meta/overlay';
+@import 'meta/prefix';
+
+// currently playing track metadata
+#meta {
+  @include icedream-font;
+  color: $icedream-text-color;
+  line-height: $icedream-extended-line-height;
+}

src/header/_nav.scss

@@ -0,0 +1,15 @@
+@import 'nav/borderfix';
+@import 'nav/bgfade';
+
+#nav {
+  @include icedream-font;
+
+  // push in some air
+  line-height: $icedream-extended-line-height;
+
+  > .active {
+    // apply darker background and brighter text to content
+    background: $icedream-bg-color;
+    color: $icedream-text-color;
+  }
+}

src/header/meta/_overlay.scss

@@ -0,0 +1,23 @@
+// metadata overlay tweak
+@if $icedream-metadata-overlay {
+  #meta {
+    margin: 0; // sass-lint:disable-line variable-for-property
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: left;
+    padding: 1em;
+    z-index: 900;
+    // copied from https://gist.github.com/Odepia/5790397
+    background: transparent;
+    background: linear-gradient(to right, $icedream-metadata-overlay-background-gradient-from 0%, $icedream-metadata-overlay-background-gradient-to 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$icedream-metadata-overlay-background-gradient-from}, endColorstr=#{$icedream-metadata-overlay-background-gradient-to});
+  }
+
+  .page {
+    &:not(#page_EQ) {
+      height: calc(100% - 9vmin);
+    }
+  }
+}

src/header/meta/_prefix.scss

@@ -0,0 +1,8 @@
+@if $icedream-metadata-prefix {
+  #meta {
+    &::before {
+      content: $icedream-metadata-prefix;
+      font-weight: 700;
+    }
+  }
+}

src/header/nav/_bgfade.scss

@@ -0,0 +1,8 @@
+// just some nice fades
+#nav {
+  > div {
+    @if $icedream-nav-bg-fade {
+      transition: background .6s ease-in-out, color .6s ease-in-out, border .25s ease-out;
+    }
+  }
+}

src/header/nav/_borderfix.scss

@@ -0,0 +1,30 @@
+#nav {
+  > div {
+    @if $icedream-nav-tab-fix {
+      &:not(.active) {
+        border: 1px transparent solid;
+        border-bottom-color: $rekt-border-color;
+
+        &+div {
+          // rules here for all but first child that don't follow an active tab
+          &:hover {
+            border-left-color: $rekt-border-color;
+          }
+        }
+      }
+
+      &:not(:last-child) {
+        // rules here for all but last child
+        &:hover {
+          border-right-color: $rekt-border-color;
+        }
+      }
+
+      // rules here for all children
+      &:hover {
+        border-bottom-color: transparent;
+        border-top-color: $rekt-border-color;
+      }
+    }
+  }
+}

src/icedream.scss

@@ -1,152 +1,12 @@
-@charset "UTF-8";
+@charset 'UTF-8';
 
-@import './variables';
+@import 'variables';
 
-@import './font';
+@import 'font';
-@import './debug';
+@import 'debug';
 
 // wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
 body {
-  // metadata overlay tweak
+  @import 'header';
-  @if $icedream-metadata-overlay {
+  @import 'main';
-    #meta {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      text-align: left;
-      padding: 1em;
-      margin: 0; // sass-lint:disable-line variable-for-property
-      z-index: 900;
-      // copied from https://gist.github.com/Odepia/5790397
-      background: transparent;
-      background: linear-gradient(to right, #000 0%, transparent 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000, endColorstr=transparent);
-    }
-
-    .page:not(#page_EQ) {
-      height: calc(100% - 9vmin);
-    }
-  }
-
-  // push in some air between lines
-  #meta,
-  #nav {
-    line-height: 5vmin;
-  }
-
-  // use user font for all text it is seen to look good on
-  #meta,
-  #nav,
-  .page:not(#page_Chat) {
-    @include icedream-font();
-  }
-
-  // apply darker background and brighter text to content
-  #nav > .active,
-  .page,
-  .page.active {
-    background: $icedream-bg-color;
-    color: $icedream-text-color;
-  }
-
-  // stylization of text
-  //text-transform: lowercase;
-
-  // currently playing track metadata
-  #meta {
-    color: $icedream-text-color;
-
-    @if $icedream-metadata-prefix {
-      &:before {
-        content: $icedream-metadata-prefix;
-        font-weight: 700;
-      }
-    }
-  }
-
-  .station .title {
-    font-weight: 700;
-  }
-
-  #nav > .active,
-  .page,
-  .page.active {
-    position: relative;
-  }
-
-  // just some nice fades
-  #nav {
-    > div {
-      @if $icedream-nav-bg-fade {
-        transition: background .6s ease-in-out, color .6s ease-in-out, border .25s ease-out;
-      }
-      @if $icedream-nav-tab-fix {
-        &:not(.active) {
-          border: 1px transparent solid;
-          border-bottom-color: $rekt-border-color;
-
-          &+div {
-            // rules here for all but first child that don't follow an active tab
-            &:hover {
-              border-left-color: $rekt-border-color;
-            }
-          }
-        }
-
-        &:not(:last-child) {
-          // rules here for all but last child
-          &:hover {
-            border-right-color: $rekt-border-color;
-          }
-        }
-        // rules here for all children
-        &:hover {
-          border-bottom-color: transparent;
-          border-top-color: $rekt-border-color;
-        }
-      }
-    }
-  }
-
-  // smoke effect
-  @if $icedream-fog-bg {
-    #main {
-      position: relative;
-
-      &::before {
-        opacity: 0.2;
-        background-image: url("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%;
-        }
-
-        // 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;
-          @keyframes icedream-bg-slide {
-            from {
-              transform: translateX(0);
-            }
-
-            to {
-              transform: translateX(-50%);
-            }
-          }
-        }
-      }
-    }
-  }
 }

src/main/_page.scss

@@ -0,0 +1,18 @@
+@import 'page/meta_overlay_fix';
+@import 'page/stations';
+
+.page {
+  background: $icedream-bg-color;
+  color: $icedream-text-color;
+
+  // seems like above colors get overwritten again when .active is added
+  &.active {
+    background: $icedream-bg-color;
+    color: $icedream-text-color;
+  }
+
+  // apply theme font to all pages but chat page (monospace!)
+  &:not(#page_Chat) {
+    @include icedream-font;
+  }
+}

src/main/_smoke.scss

@@ -0,0 +1,40 @@
+// smoke effect
+@if $icedream-fog-bg {
+  #main {
+    position: relative;
+
+    &::before {
+      opacity: .2;
+      background-image: url('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%;
+      }
+
+      // 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;
+        @keyframes icedream-bg-slide {
+          from {
+            transform: translateX(0);
+          }
+
+          to {
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}

src/main/page/_meta_overlay_fix.scss

@@ -0,0 +1,8 @@
+// page fixes for metadata overlay
+@if $icedream-metadata-overlay {
+  .page {
+    &:not(#page_EQ) {
+      height: calc(100% - 9vmin);
+    }
+  }
+}

src/main/page/_stations.scss

@@ -0,0 +1,5 @@
+.station {
+  .title {
+    font-weight: 700;
+  }
+}