Adjusting metrics dashboard style

assets/css/events/metrics.less

@@ -13,11 +13,14 @@ body#events.metrics {
       text-shadow: 1px 1px 1px #c9c9c9;
 
       em {
-        text-transform: uppercase;
-        font-weight: bold;
+        font-weight: 600;
         font-style: normal;
         line-height: 1;
         font-size: 1.1em;
+
+        &.huge  {
+          font-size: 2em;
+        }
       }
 
       .stat {
@@ -28,10 +31,9 @@ body#events.metrics {
 
       .value {
         font-weight: bold;
-        font-size: 2em;
+        font-size: 2.2em;
         display: block;
         line-height: 1;
-        text-transform: uppercase;
       }
 
       .value.inline {
@@ -47,8 +49,8 @@ body#events.metrics {
           height: 370px;
           margin-bottom: 20px;
 
-          &.blue {
-            background: rgba(39, 170, 225, .7);
+          &.red {
+            background: rgba(224, 54, 52, .7);
 
             .stat {
               &:first-of-type {
@@ -62,7 +64,7 @@ body#events.metrics {
 
             .stat {
               &:first-of-type {
-                padding-top: 30%;
+                padding-top: 40%;
               }
             }
           }
@@ -72,14 +74,23 @@ body#events.metrics {
       .rectangle {
         width: 66%;
         height: 760px;
-        background: rgba(224, 54, 52, .7);
+        background: rgba(39, 170, 225, .75);
         display: inline-block;
         margin-left: 20px;
 
+        .value {
+          vertical-align: middle;
+        }
         .stat {
           &:first-of-type {
-            padding-top: 40%;
+            padding-top: 36%;
           }
+          &:nth-of-type(2) {
+            margin-bottom: 0px;
+          }
+        }
+        em {
+          vertical-align: middle;
         }
       }
 

views/events/metrics.html

@@ -8,7 +8,7 @@
 <div class="dashboard">
   <div class="metrics">
     <div class="squares">
-      <div class="square blue">
+      <div class="square red">
         <span class="stat">
           <span class="value">{{ stats.total_events|intcomma }}</span>
           <em>Total Events</em>
@@ -26,13 +26,14 @@
     </div>
     <div class="rectangle">
       <span class="stat">
-        <span class="value">{{ stats.total_attendees|intcomma }} </span> <em>Attendees</em>
+        <span class="value">{{ stats.total_attendees|intcomma }} </span> <em class="huge">Attendees</em>
       </span>
       <span class="stat">
         in <span class="value inline">{{ stats.cities|intcomma }}</span> <em>Cities</em>
       </span>
+      Across
       <span class="stat">
-        Across <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
+      <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
       </span>
     </div>
   </div>