1 files changed, 137 insertions, 0 deletions
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..3e05831
--- /dev/null
+++ b/src/style.scss
@@ -0,0 +1,137 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono');
+
+$color_a: #a101a6;
+$color_b: #d9005b;
+$color_c: #84e900;
+$color_d: #cff700;
+$color_e: #aaa;
+$octet_lighten: 15%;
+
+body {
+  background: #eee;
+  font-family: 'Ubuntu', sans-serif;
+  header {
+    margin-bottom: 30px;
+    margin-left: 40px;
+    h1 {
+      font-size: modular-scale(2);
+      small {
+        text-transform: uppercase;
+        color: #669;
+        display: block;
+      }
+    }
+    p {
+      margin-right: 90px;
+      font-size: modular-scale(-1);
+    }
+  }
+
+  div.ip-address {
+    text-align: center;
+    font-family: 'Ubuntu Mono', monospace;
+    div {
+      margin-top: 65px;
+    }
+    div.address {
+      input {
+        width: 2.5em;
+        font-size: 2.7em;
+        text-align: center;
+        border: 0px;
+        border-radius: 3px;
+      }
+      span.octet {
+        span.dot {
+          font-size: 2.7em;
+          text-align: center;
+          padding: 0.1em 0.13em;
+        }
+        &:nth-child(1) input.octet {
+          background-color: $color_a;
+        }
+        &:nth-child(2) input.octet {
+          background-color: $color_b;
+        }
+        &:nth-child(3) input.octet {
+          background-color: $color_c;
+        }
+        &:nth-child(4) input.octet {
+          background-color: $color_d;
+        }
+      }
+      input.cidr {
+        background-color: $color_e;
+      }
+    }
+    div.bits {
+      ol {
+        display: inline;
+        padding-left: 0px;
+        padding-right: 15px;
+        li.octet {
+          display: inline;
+          ol {
+            li.bit {
+              display: inline;
+              padding: 0.4em 0.6em;
+              margin-left: -1px;
+              border: 1px black solid;
+            }
+          }
+          &:nth-child(1) ol li.bit.unmasked {
+            background-color: lighten($color_a, $octet_lighten);
+          }
+          &:nth-child(2) ol li.bit.unmasked {
+            background-color: lighten($color_b, $octet_lighten);
+          }
+          &:nth-child(3) ol li.bit.unmasked {
+            background-color: lighten($color_c, $octet_lighten);
+          }
+          &:nth-child(4) ol li.bit.unmasked {
+            background-color: lighten($color_d, $octet_lighten);
+          }
+          ol li.bit.masked {
+            background-color: lighten($color_e, $octet_lighten);
+            color: lighten($color_e, 22%);
+          }
+        }
+      }
+    }
+    div.details {
+      span.netmask {
+        display: inline-block;
+        width: 20%;
+      }
+      span.first {
+        display: inline-block;
+        width: 20%;
+      }
+      span.last {
+        display: inline-block;
+        width: 20%;
+      }
+      span.count {
+        display: inline-block;
+        width: 20%;
+      }
+      span.value {
+        font-size: modular-scale(1);
+      }
+      span.label {
+        display: block;
+        font-family: 'Ubuntu', sans-serif;
+        text-transform: uppercase;
+        font-size: modular-scale(2);
+        font-weight: bold;
+        color: #779;
+      }
+    }
+  }
+
+  footer {
+    margin-top: 50px;
+    text-align: center;
+    font-size: modular-scale(-1);
+  }
+}