Details styling

2 files changed, 21 insertions, 7 deletions

diff --git a/index.js b/index.js
index 631c12b..287c636 100644
--- a/index.js
+++ b/index.js
@@ -84,10 +84,12 @@ class IPAddress extends React.Component {
 
       <div className="details">
         <span className="netmask">
-          <span className="label">Netmask:</span> {this.getNetmask()}
+          <span className="value">{this.getNetmask()}</span>
+          <span className="label">Netmask</span>
         </span>
         <span className="count">
-          <span className="label">Available addresses:</span> {this.getCount()}
+          <span className="value">{this.getCount()}</span>
+          <span className="label">Addresses</span>
         </span>
       </div>
 
diff --git a/style.scss b/style.scss
index 3695f5e..983c872 100644
--- a/style.scss
+++ b/style.scss
@@ -19,7 +19,7 @@ body {
       font-size: modular-scale(2);
       small {
         text-transform: uppercase;
-        color: #bbb;
+        color: #669;
         display: block;
       }
     }
@@ -85,11 +85,23 @@ body {
       }
     }
     div.details {
-      span.label {
-        font-family: $lucida-grande;
+      span.netmask {
+        display: inline-block;
       }
       span.count {
-        margin-left: 2em;
+        display: inline-block;
+        margin-left: 3em;
+      }
+      span.value {
+        font-size: modular-scale(1);
+      }
+      span.label {
+        display: block;
+        font-family: $lucida-grande;
+        text-transform: uppercase;
+        font-size: modular-scale(2);
+        font-weight: bold;
+        color: #779;
       }
     }
   }
@@ -97,7 +109,7 @@ body {
   footer {
     margin-top: 50px;
     text-align: center;
-    font-size: 0.7em;
+    font-size: modular-scale(-1);
   }
 
 }