Add SCSS Linter, make it pass.

5 files changed, 97 insertions, 28 deletions

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index c68bc3f5..bd220fa9 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -7,22 +7,33 @@ cache:
   paths:
   - vendor/ruby
 
+stages:
+  - test
+  - deploy
+
+before-script:
+  - bundle install --jobs 4 --path vendor
+
 verify_compile:
+  stage: test
   script:
-    - bundle install --path vendor
     - rake pull_repos
     - nanoc
   except:
     - master
 
+scss_lint:
+  stage: test
+  script:
+    - bundle exec scss-lint
+
 pages:
   stage: deploy
   environment:
     name: production
   script:
-  - bundle install --path vendor
-  - rake pull_repos
-  - nanoc
+    - rake pull_repos
+    - nanoc
   artifacts:
     paths:
     - public
diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 00000000..0d493b16
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,40 @@
+scss_files: "./content/assets/stylesheets/**"
+
+exclude:
+  - "./content/assets/stylesheets/highlight.scss"
+
+linters:
+  BorderZero:
+    severity: error
+  ColorKeyword:
+    severity: error
+  DuplicateProperty:
+    severity: error
+  EmptyLineBetweenBlocks:
+    enabled: false
+  EmptyRule:
+    severity: error
+  Indentation:
+    severity: error
+  ImportantRule:
+    severity: error
+  MergeableSelector:
+    severity: error
+  NestingDepth:
+    max_depth: 4
+  PropertySortOrder:
+    enabled: false
+  SingleLinePerSelector:
+    enabled: false
+  SelectorDepth:
+    max_depth: 4
+  StringQuotes:
+    style: double_quotes
+  TrailingSemicolon:
+    severity: error
+  TrailingWhitespace:
+    enabled: false
+  UrlFormat:
+    enabled: false
+  QualifyingElement:
+    severity: error
diff --git a/Gemfile b/Gemfile
index 0ce9b5fa..447ed48d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -17,3 +17,7 @@ group :nanoc do
   # Needed to generate Sitemap
   gem 'builder'
 end
+
+group :test do
+  gem 'scss_lint', require: false
+end
diff --git a/Gemfile.lock b/Gemfile.lock
index b2a7f8a3..f19f812a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -60,6 +60,9 @@ GEM
     rouge (1.11.1)
     ruby_dep (1.5.0)
     sass (3.4.22)
+    scss_lint (0.49.0)
+      rake (>= 0.9, < 12)
+      sass (~> 3.4.20)
     shellany (0.0.1)
     slop (3.6.0)
     thor (0.19.1)
@@ -77,9 +80,10 @@ DEPENDENCIES
   redcarpet
   rouge (~> 1.11)
   sass
+  scss_lint
 
 RUBY VERSION
    ruby 2.3.1p112
 
 BUNDLED WITH
-   1.13.2
+   1.13.6
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index d26d5bd4..5aa6233a 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -9,7 +9,14 @@ $sans-font-family: "Source Sans Pro", sans-serif;
 $link-color: #3084bb;
 $link-color-hover: #20597e;
 
+// Inline code colors
+$code-color: #c7254e;
+$code-background-color: #f9f2f4;
+
 // Home page colors
+$landing-background: #f9f9f9;
+$landing-header-background: #34373c;
+$topic-border: rgb(215, 215, 215);
 $topic-ce-circle-color: rgb(1, 136, 101);
 $topic-ce-header-color: rgb(1, 120, 85);
 $topic-ee-circle-color: rgb(25, 112, 169);
@@ -19,16 +26,20 @@ $topic-omnibus-header-color: rgb(107, 79, 187);
 
 // Other colors
 $border-color: #e5e5e5;
+$border-color-light: #f0f0f0;
 $table-border-color: $border-color;
 $hr-border-color: $border-color;
 $blockquote-border-color: $border-color;
+$search-border: rgba(0, 0, 0, .25);
+$white: #fff;
+$black: #333;
 
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
 body {
-  background: #fff;
+  background: $white;
   margin: 0;
   padding: 0;
   line-height: 1.6;
@@ -79,8 +90,8 @@ code, code span {
 }
 
 p code, li code, table code {
-  color: #c7254e;
-  background-color: #f9f2f4;
+  color: $code-color;
+  background-color: $code-background-color;
   padding: 2px 4px;
 }
 
@@ -128,7 +139,7 @@ h1, h2, h3, h4, h5, h6 {
   img {
     max-width: calc(100% - 10px);
     max-height: 100vh;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $border-color-light;
     padding: 5px;
     margin: 5px;
   }
@@ -143,7 +154,7 @@ h1, h2, h3, h4, h5, h6 {
   height: 50px;
   width: 100%;
   padding: 0 25px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid $border-color;
   text-align: left;
   display: flex;
   justify-content: space-between;
@@ -157,7 +168,7 @@ h1, h2, h3, h4, h5, h6 {
 
   p {
     font-size: 20px;
-    color: #333;
+    color: $black;
     display: inline-block;
     padding: 10px 0;
     padding-left: 55px;
@@ -191,9 +202,9 @@ h1, h2, h3, h4, h5, h6 {
   // as the styles load.
   input {
     box-sizing: content-box;
-    border: 1px solid rgba(0,0,0,0.25);
+    border: 1px solid $search-border;
     border-radius: 2px;
-    background-color: #fff;
+    background-color: $white;
     -webkit-appearance: none;
     padding: 7px 11px 7px 28px;
     margin: -5px;
@@ -215,26 +226,25 @@ h1, h2, h3, h4, h5, h6 {
     overflow-x: hidden;
 
     &:not(:last-child)::after {
-      content: '/';
+      content: "/";
     }
 
-    &:after {
+    &::after {
       padding: 0 4px 0 6px;
     }
   }
 }
 
-
 // Home page //
 
-body.landing {
-  background-color: #f9f9f9;
+.landing {
+  background-color: $landing-background;
 
   .landing-header {
-    padding: 75px 35px 200px 35px;
-    background-color: #34373c;
+    padding: 75px 35px 200px;
+    background-color: $landing-header-background;
     text-align: center;
-    color: #fff;
+    color: $white;
 
     input {
       margin-top: 50px;
@@ -253,7 +263,7 @@ body.landing {
     margin-top: 20px;
    
     a {
-      color: #fff;
+      color: $white;
       text-decoration: none;
     }
   }
@@ -263,14 +273,14 @@ body.landing {
     height: 35px;
     padding: 15px 15px 15px 40px;
     width: auto;
-    border: 1px solid rgba(0,0,0,0.25);
+    border: 1px solid $search-border;
 
     @media all and (min-width: $mobile-width) {
       min-width: 300px;
     }
   }
 
-  .st-ui-search-input, .st-default-search-input, span.st-ui-search-icon {
+  .st-ui-search-input, .st-default-search-input, .st-ui-search-icon {
     background-size: 16px 16px;
     background-position: 15px 25px;
   }
@@ -288,8 +298,8 @@ body.landing {
 
   li {
     display: inline-block;
-    background-color: #fff;
-    border: 1px solid rgb(215, 215, 215);
+    background-color: $white;
+    border: 1px solid $topic-border;
     border-radius: 2px;
     margin: 15px;
     flex: 1;
@@ -303,7 +313,7 @@ body.landing {
     }
 
     a p, a:visited p {
-      color: #553a3a;
+      color: $black;
       vertical-align: bottom;
     }
 
@@ -344,7 +354,7 @@ body.landing {
   font-size: 24px;
   font-weight: 900;
   line-height: 2.35;
-  color: #fff;
+  color: $white;
   position: relative;
   margin: auto;
   top: -28px;