From 49ccd816548d0514693d471e990086d3a539fcb2 Mon Sep 17 00:00:00 2001
From: Hallaathrad <Hallaathrad@gmail.com>
Date: Thu, 28 Jan 2016 12:23:54 -0500
Subject: [PATCH] Change space in population table

From a <table> inside a single <h2> and spacing based on html encoded stuff, to an <ul> with light css styling.

-----
More cleanup changes for the rest of the page to come in next PR.
---
 client/less/main.less             | 19 +++++++++++++++++
 server/views/resources/about.jade | 35 ++++++++++++++-----------------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/client/less/main.less b/client/less/main.less
index 3eac391f5f..b2eab5e213 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -763,8 +763,27 @@ iframe.iphone {
 }
 
 .population-table {
+  font-size:30px;
+  width:460px;
+  margin:0 auto;
+  padding:0;
+  h2 {
+    margin:0;
+    text-align: left;
+  }
+  .tag {
+      width:165px;
+      display:inline-block;
+  }
+  .text-primary {
+      margin-right:5px;
+  }
   @media (max-width: 767px) {
     font-size: 16px;
+    width: 260px;
+    .tag {
+      width:95px;
+    }
   }
 }
 
diff --git a/server/views/resources/about.jade b/server/views/resources/about.jade
index 265a0f8d30..90cec78cf5 100644
--- a/server/views/resources/about.jade
+++ b/server/views/resources/about.jade
@@ -6,25 +6,22 @@ block content
             | who learn to code and help nonprofits.
         .spacer
         .row
-            .col-xs-12.col-sm-10.col-sm-offset-1.col-md-6.col-md-offset-3
-                h2
-                    table.population-table.img-center
-                        tr
-                            td Established:&thinsp;
-                            td
-                                span.text-primary #{daysRunning}&thinsp;
-                                | days ago
-                        tr
-                            td Population:&thinsp;&thinsp;&thinsp;
-                            td
-                                span.text-primary #{camperCount}&thinsp;
-                                | campers
-                        tr
-                            td Completed:&thinsp;&thinsp;&thinsp;
-                            td
-                                span.text-primary #{globalCompletedCount}&thinsp;
-                                | challenges
-
+            .col-xs-12.col-sm-10.col-sm-offset-1.col-md-6.col-md-offset-3                                
+                ul.population-table
+                    li 
+                        span.tag Established:&#9;
+                        span.text-primary #{daysRunning}
+                        | days ago
+                    li 
+                        span.tag Population:&#9;
+                        span.text-primary #{camperCount}
+                        | campers
+                    li
+                        span.tag Completed:&#9;
+                        span.text-primary #{globalCompletedCount}
+                        | challenges
+                        
+        .spacer
         .row
             .col-xs-12.col-sm-10.col-sm-offset-1.col-md-6.col-md-offset-3
                 h2 Free Code Camp around the web: