Add stylelint

.stylelintrc

@@ -0,0 +1,91 @@
+{
+  "rules": {
+    "color-hex-case": "lower",
+    "color-no-invalid-hex": true,
+
+    "font-family-no-duplicate-names": true,
+    "font-family-name-quotes": "always-where-recommended",
+
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
+    "function-name-case": "lower",
+    "function-parentheses-space-inside": "never",
+    "function-whitespace-after": "always",
+    "function-url-no-scheme-relative": true,
+    "function-url-quotes": "always",
+
+    "number-no-trailing-zeros": true,
+
+    "string-no-newline": true,
+    "string-quotes": "single",
+
+    "length-zero-no-unit": true,
+
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+
+    "value-keyword-case": lower,
+
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+
+    "property-case": "lower",
+    "property-no-unknown": true,
+
+    "keyframe-declaration-no-important": true,
+
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "declaration-no-important": true,
+
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-no-duplicate-properties": true,
+
+    "block-no-empty": true,
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-element-no-unknown": true,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-element-case": "lower",
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "selector-max-empty-lines": 0,
+
+    "rule-empty-line-before": "always-multi-line",
+
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-parentheses-space-inside": "never",
+
+    "comment-no-empty": true,
+
+    "indentation": 4,
+    "max-nesting-depth": 6,
+    "no-duplicate-selectors": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-unknown-animations": true,
+    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "max-empty-lines": 1
+  }
+}

.travis.yml

@@ -4,7 +4,8 @@ python:
   - "2.7"
 install:
   - pip install flake8
-  - npm install -g eslint
+  - npm install -g eslint stylelint
 script:
   - flake8 .
   - eslint 'db/static/js/*.js'
+  - stylelint 'db/static/css/*.css'

db/static/css/app.css

@@ -2,61 +2,56 @@
 ==================== */
 
 @font-face {
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     src: url('../fonts/ClearSans-Regular.eot');
     src: url('../fonts/ClearSans-Regular.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/ClearSans-Regular.woff') format('woff'),
+        url('../fonts/ClearSans-Regular.woff') format('woff'),
-         url('../fonts/ClearSans-Regular.ttf') format('truetype'),
+        url('../fonts/ClearSans-Regular.ttf') format('truetype'),
-         url('../fonts/ClearSans-Regular.svg#open_sans') format('svg');
+        url('../fonts/ClearSans-Regular.svg#open_sans') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     src: url('../fonts/ClearSans-Bold.eot');
     src: url('../fonts/ClearSans-Bold.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/ClearSans-Bold.woff') format('woff'),
+        url('../fonts/ClearSans-Bold.woff') format('woff'),
-         url('../fonts/ClearSans-Bold.ttf') format('truetype'),
+        url('../fonts/ClearSans-Bold.ttf') format('truetype'),
-         url('../fonts/ClearSans-Bold.svg#open_sansbold') format('svg');
+        url('../fonts/ClearSans-Bold.svg#open_sansbold') format('svg');
     font-weight: bold;
     font-style: normal;
-
 }
 
 @font-face {
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     src: url('../fonts/ClearSans-BoldItalic.eot');
     src: url('../fonts/ClearSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/ClearSans-BoldItalic.woff') format('woff'),
+        url('../fonts/ClearSans-BoldItalic.woff') format('woff'),
-         url('../fonts/ClearSans-BoldItalic.ttf') format('truetype'),
+        url('../fonts/ClearSans-BoldItalic.ttf') format('truetype'),
-         url('../fonts/ClearSans-BoldItalic.svg#open_sansbold_italic') format('svg');
+        url('../fonts/ClearSans-BoldItalic.svg#open_sansbold_italic') format('svg');
     font-weight: bold;
     font-style: italic;
-
 }
 
 @font-face {
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     src: url('../fonts/ClearSans-Italic.eot');
     src: url('../fonts/ClearSans-Italic.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/ClearSans-Italic.woff') format('woff'),
+        url('../fonts/ClearSans-Italic.woff') format('woff'),
-         url('../fonts/ClearSans-Italic.ttf') format('truetype'),
+        url('../fonts/ClearSans-Italic.ttf') format('truetype'),
-         url('../fonts/ClearSans-Italic.svg#open_sansitalic') format('svg');
+        url('../fonts/ClearSans-Italic.svg#open_sansitalic') format('svg');
     font-weight: normal;
     font-style: italic;
-
 }
 
-
 /* Generic
 ==================== */
 
 body {
-    font-size:14px;
+    font-size: 14px;
     line-height: 1.3;
-    font-family:'ClearSans';
+    font-family: ClearSans;
 }
 
 .alert-debug {
@@ -90,9 +85,8 @@ body {
 }
 
 .error {
-    margin-top: 40px;
+    margin-top: 40px auto 0 auto;
     width: 500px;
-    margin: auto;
     text-align: center;
 }
 
@@ -117,13 +111,13 @@ body {
     width: 80px;
 }
 
-.stats {
+.statistics {
     text-align: center;
-    text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.77) !important;
+    text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.77);
     margin-top: 12px;
 }
 
-.stats > img {
+.statistics > img {
     max-width: 20px;
 }
 
@@ -146,19 +140,18 @@ body {
 a.satellite-item {
     min-height: 120px;
     padding: 10px;
-    border: 1px solid #FFF;
+    border: 1px solid #ffffff;
     cursor: pointer;
     display: block;
-    background-image: linear-gradient(to bottom, #FFF 0px, #F4F4F4 100%);
+    background-image: linear-gradient(to bottom, #ffffff 0, #f4f4f4 100%);
     color: black;
     text-decoration: none;
-    border: medium none;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
     border-radius: 5px;
 }
 
 a.satellite-item:hover {
-    box-shadow: 0px 2px 5px #808080;
+    box-shadow: 0 2px 5px #808080;
     transition: all 0.3s ease-out 0s;
 }
 
@@ -215,7 +208,7 @@ a.satellite-item:hover {
 
 .satellite-transmitters {
     position: absolute;
-    bottom: 0px;
+    bottom: 0;
 }
 
 .satellite-transmitters > span {
@@ -226,7 +219,7 @@ a.satellite-item:hover {
 }
 
 .panel-transmitter {
-    margin: 20px 0px;
+    margin: 20px 0;
 }
 
 .panel-first {
@@ -273,7 +266,7 @@ footer {
 }
 
 .stage-notice {
-    background-color: #D74545;
+    background-color: #d74545;
     color: white;
     padding: 5px;
     text-align: center;
@@ -281,15 +274,16 @@ footer {
     z-index: 20;
     width: 100%;
     position: fixed;
-    top: 0px;
+    top: 0;
-    left: 0px;
+    left: 0;
 }
 
 .stage-notice a {
     color: #ffff00;
 }
 
-@media screen and (max-width:768px) {
+@media screen and (max-width: 768px) {
+
     #map {
         margin-top: 10px;
     }
@@ -299,25 +293,24 @@ footer {
     }
 }
 
-
 /* Statistics page
 ==================== */
+
 .stats {
     padding-top: 20px;
     padding-bottom: 20px;
 }
 
 .stats-hud {
-  padding: 15px;
+    padding: 15px;
 }
 
 .stats-hud-num {
     display: block;
-    font-size:  2em;
+    font-size: 2em;
     font-weight: bold;
 }
 
-
 /* Telemetry D3 visualisation
 ============================= */
 
@@ -351,17 +344,17 @@ svg.chart {
     position: absolute;
     background: #286090;
     color: #fff;
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     font-size: 12px;
     text-align: center;
     padding: 5px 5px 6px 5px;
-    border: 0px;
+    border: 0;
     border-radius: 3px;
 }
 
 .tick line, .domain {
-  fill: none;
+    fill: none;
-  stroke: #ddd;
+    stroke: #ddd;
 }
 
 .line {
@@ -378,11 +371,11 @@ svg.chart {
 }
 
 .datepicker input {
-    font-family: 'ClearSans';
+    font-family: ClearSans;
     font-size: 13px;
     padding: 5px 10px;
     border: none;
-    box-shadow: inset 0px 0px 8px rgba(0,0,0,0.3);
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
     border-bottom-right-radius: 3px;
     border-top-right-radius: 3px;
     cursor: pointer;

db/templates/base/home.html

@@ -14,27 +14,27 @@
     <div class="col-md-4">
       <div class="row hidden-xs hidden-sm">
         <div class="{% if suggestions %}col-md-3{% else %}col-md-4{% endif %}">
-          <p class="stats">
+          <p class="statistics">
             <img src="{% static 'img/satellites.png' %}">
             {{ satellites.count }}
           </p>
         </div>
         <div class="{% if suggestions %}col-md-3{% else %}col-md-4{% endif %}">
-          <p class="stats">
+          <p class="statistics">
             <img src="{% static 'img/transmitters.png' %}">
             {{ transmitters }}
           </p>
         </div>
         {% if suggestions %}
           <div class="col-md-3">
-            <p class="stats">
+            <p class="statistics">
               <img src="{% static 'img/suggestions.png' %}">
               {{ suggestions }}
             </p>
           </div>
         {% endif %}
         <div class="{% if suggestions %}col-md-3{% else %}col-md-4{% endif %}">
-          <p class="stats">
+          <p class="statistics">
             <img src="{% static 'img/contributors.png' %}">
             {{ contributors }}
           </p>