Some style cleanup

3 files changed, 34 insertions, 5 deletions

diff --git a/README.md b/README.md
index 4c85bee..ef771c9 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,10 @@
 # cidr.xyz
 
 Web-based CIDR / netmask / IP address visualizer
+
+## Dev
+
+```bash
+$ npm install
+$ webpack-dev-server --progress --colors
+```
diff --git a/index.js b/index.js
index f117f65..fcca766 100644
--- a/index.js
+++ b/index.js
@@ -36,19 +36,19 @@ class IPAddress extends React.Component {
 
   render() {
     var pretty = this.state.octets.join('.') + '/' + this.state.cidr
-    return <form>
+    return <form class="ip-address">
       {[...Array(4)].map((x, octet) =>
-        <input type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
+        <input class="octet" type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
       )}
-      <input type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
+      <input class="cidr" type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
       <h2>Result: {pretty}</h2>
 
       <ol>
         {[...Array(4)].map((x, octet) =>
-          <li>
+          <li class="octet">
             <ol>
               {[...Array(8)].map((x, bit) =>
-                <li>{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
+                <li class="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
               )}
             </ol>
           </li>
diff --git a/style.scss b/style.scss
index 9896856..446f24c 100644
--- a/style.scss
+++ b/style.scss
@@ -1,12 +1,34 @@
 @import 'bourbon';
 
 body {
+
   background: #eee;
   font-family: $lucida-grande;
+
+  header {
+    margin-bottom: 30px;
+  }
+
+  form {
+    input {
+      width: 3em;
+      text-align: center;
+      border: 0px;
+      background: transparent;
+    }
+  }
+
   ol {
     display: inline;
     li {
       display: inline;
     }
   }
+
+  footer {
+    margin-top: 50px;
+    text-align: center;
+    font-size: 0.7em;
+  }
+
 }