Add colors to the mobile desktop usage

codeforamerica · Aug 26, 2015 · 91f8c75 · 91f8c75
1 parent 4652e07
commit 91f8c75
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -18,13 +18,16 @@
             </div>
             <div id="graph-text">visitors over the last 48 hours (30 minute interval)</div>
           </div>
-          <span id="traffic" class="count" style="float:left">
-            <span class="text-feature" id="traffic-count-mobile">&nbsp;</span>
-            mobile
-            <span class="text-feature" id="traffic-count">&nbsp;</span>
-            desktop
-            <br/>
-            visitors online
+          <span id="traffic" class="count">
+            <div class="visitor-count" id="mobile-count">
+              <span class="text-feature" id="traffic-count-mobile">&nbsp;</span>
+              mobile
+            </div>
+            <div class="visitor-count" id="desktop-count">
+              <span class="text-feature" id="traffic-count">&nbsp;</span>
+              desktop
+            </div>
+            <span>visitors online</span>
           </span>
         </div>
 

diff --git a/public/stylesheets/base.css b/public/stylesheets/base.css
diff --git a/public/stylesheets/base.scss b/public/stylesheets/base.scss
@@ -22,6 +22,8 @@ mid teal: 78BFBF
 teal: 60BFB6
 */
 
+$desktop-color: #1b406d;
+$mobile-color: #265c8d;
 
 html {
   width: 100%;
@@ -254,6 +256,21 @@ h2{
     fill: $secondary;
     font-size: 16px;
   }
+  #traffic {
+    float: left;
+    .visitor-count {
+      width: 90px;
+      height: 90px;
+      margin: 0 auto;
+      &#mobile-count{
+        background: $mobile-color;
+      }
+      &#desktop-count{
+        background: $desktop-color;
+        margin-bottom: 5px;
+      }
+    }
+  }
 }
 .sparkline path{
   stroke:white;