Reduce old srcs

1 files changed, 167 insertions, 0 deletions

diff --git a/old/style.scss b/old/style.scss
new file mode 100644
index 0000000..0476a3e
--- /dev/null
+++ b/old/style.scss
@@ -0,0 +1,167 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono');
+
+$xl: 87.5em; // 4k and hi-res desktop
+$lg: 60em; // 1080 and hi-res laptops
+$med: 40em; // hi-res tablets and low-res laptops
+$sm: 28em; // mobile and low-res tablets
+$xs: 20em; // mobile only
+
+$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 {
+      small {
+        text-transform: uppercase;
+        color: #669;
+        display: block;
+      }
+    }
+    p {
+      margin-right: 30px;
+      @media ( min-width: $med ) {
+        margin-right: 60px;
+      }
+    }
+  }
+
+  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;
+        @media (max-width: $xl) {
+          font-size: calc(1em + 1.9vw);
+        }
+        text-align: center;
+        border: 0px;
+        border-radius: 3px;
+      }
+      span.octet {
+        span.dot {
+          text-align: center;
+          padding: 0.1em 0.13em;
+          font-size: 2.7em;
+          @media (max-width: $xl) {
+            font-size: calc(1em + 1.7vw);
+          }
+        }
+        &: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.6em;
+              @media (max-width: $xl) {
+                padding: calc(-0.1em + 0.7vw);
+              }
+              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);
+          }
+        }
+      }
+    }
+    div.details {
+      display: inline-flex;
+      justify-content: space-around;
+      width: 100%;
+      @media (min-width: 640px) {
+        width: 640px;
+      }
+      span {
+        display: block;
+      }
+    }
+    div.break {
+      width: 100%;
+      height: 0px;
+      margin: 0px;
+    }
+    div.usable {
+      display: inline-flex;
+      justify-content: space-around;
+      margin-top: 30px;
+      width: 100%;
+      @media (min-width: 640px) {
+        width: 640px;
+      }
+      span {
+        display: block;
+      }
+    }
+    span.value {
+      font-size: 1.22em;
+      @media (max-width: $xl) {
+        font-size: calc(0.7em + 0.6vw);
+      }
+    }
+    span.label {
+      display: block;
+      font-family: 'Ubuntu', sans-serif;
+      text-transform: uppercase;
+      font-size: 1.22em;
+      @media (max-width: $xl) {
+        font-size: calc(0.7em + 0.6vw);
+      }
+      font-weight: bold;
+      color: #656582;
+    }
+  }
+
+  footer {
+    margin-top: 30px;
+    text-align: center;
+  }
+}