chore(): use stylelint and order variables

.hound.yml

@@ -6,6 +6,6 @@ eslint:
   enabled: true
   config_file: ".eslintrc.json"
   ignore_file: .eslintignore
-scss:
+stylelint:
   enabled: true
-  config_file: ".scss-lint.yml"
+  config_file: ".stylelintrc.json"

.stylelintrc.json

@@ -0,0 +1,45 @@
+{
+  "rules": {
+    "declaration-bang-space-before": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-property-value-blacklist": {
+      "/^border/": ["none"]
+    },
+    "color-named": "never",
+    "declaration-block-no-duplicate-properties": true,
+    "rule-empty-line-before": ["always-multi-line", {
+      "except": ["after-single-line-comment", "first-nested"]
+    }],
+    "block-no-empty": true,
+    "no-missing-end-of-source-newline": true,
+    "color-hex-length": "short",
+    "color-hex-case": "lower",
+    "color-no-invalid-hex": true,
+    "declaration-no-important": true,
+    "indentation": 2,
+    "number-leading-zero": "never",
+    "no-duplicate-selectors": true,
+    "max-nesting-depth": 3,
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-no-qualifying-type": true,
+    "shorthand-property-no-redundant-values": true,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "selector-list-comma-newline-after": "always",
+    "function-comma-space-after": "always-single-line",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "block-opening-brace-space-before": "always",
+    "function-parentheses-space-inside": "never",
+    "string-quotes": "single",
+    "declaration-block-trailing-semicolon": "always",
+    "no-eol-whitespace": true,
+    "number-no-trailing-zeros": true,
+    "function-url-quotes": "always",
+    "property-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "at-rule-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "length-zero-no-unit": true
+  }
+}

app/javascript/trellaw/stylesheets/variables.scss

@@ -1,9 +1,9 @@
 $font-family: 'Helvetica Neue', Helvetica, 'Open Sans', sans-serif;
 
-$header-bg: #4e2187;
 $body-bg: #6c34b4;
 $body-color: #4d4d4d;
+$card-bg: #f6f6f6;
 $color: #7000ff;
+$header-bg: #4e2187;
 $list-bg: #e2e4e6;
 $list-content-bg: #ecedee;
-$card-bg: #f6f6f6;