diff options
| -rw-r--r-- | src/index.html | 18 | ||||
| -rw-r--r-- | src/style.scss | 217 |
2 files changed, 122 insertions, 113 deletions
diff --git a/src/index.html b/src/index.html index 23b15c1..0e97bd2 100644 --- a/src/index.html +++ b/src/index.html @@ -23,13 +23,15 @@ </script> </head> <body> - <header> - <h1>CIDR.xyz<small>An interactive IP address and CIDR range visualizer</small></h1> - <p><a href="https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing">CIDR</a> is a notation for describing blocks of IP addresses and is used heavily in various networking configurations. IP addresses contain 4 octets, each consisting of 8 bits giving values between 0 and 255. The decimal value that comes after the slash is the number of bits consisting of the routing prefix. This in turn can be translated into a netmask, and also designates how many available addresses are in the block.</p> - </header> - <section id="app"></section> - <footer> - Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/cidr.xyz">Github</a>. - </footer> + <div id="container"> + <header> + <h1>CIDR.xyz <small>An interactive IP address and CIDR range visualizer</small></h1> + <p><a href="https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing">CIDR</a> is a notation for describing blocks of IP addresses and is used heavily in various networking configurations. IP addresses contain 4 octets, each consisting of 8 bits giving values between 0 and 255. The decimal value that comes after the slash is the number of bits consisting of the routing prefix. This in turn can be translated into a netmask, and also designates how many available addresses are in the block.</p> + </header> + <section id="app"></section> + <footer> + Created by <a href="https://yuv.al">Yuval Adam</a>. Source available on <a href="https://github.com/yuvadm/cidr.xyz">Github</a>. + </footer> + </div> </body> </html> diff --git a/src/style.scss b/src/style.scss index 3e05831..c974c97 100644 --- a/src/style.scss +++ b/src/style.scss @@ -10,128 +10,135 @@ $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; + #container { + width: 50vw; + position: fixed; + top: 20%; + left: 50%; + transform: translate(-50%, -20%); + 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(3); } } - 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; + div.ip-address { + text-align: center; + font-family: 'Ubuntu Mono', monospace; + div { + margin-top: 65px; } - span.octet { - span.dot { + div.address { + input { + width: 2.5em; 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; + border: 0px; + border-radius: 3px; } - } - 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; - } + span.octet { + span.dot { + font-size: 2.7em; + text-align: center; + padding: 0.1em 0.13em; } - &:nth-child(1) ol li.bit.unmasked { - background-color: lighten($color_a, $octet_lighten); + &:nth-child(1) input.octet { + background-color: $color_a; } - &:nth-child(2) ol li.bit.unmasked { - background-color: lighten($color_b, $octet_lighten); + &:nth-child(2) input.octet { + background-color: $color_b; } - &:nth-child(3) ol li.bit.unmasked { - background-color: lighten($color_c, $octet_lighten); + &:nth-child(3) input.octet { + background-color: $color_c; } - &: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%); + &:nth-child(4) input.octet { + background-color: $color_d; } } + input.cidr { + background-color: $color_e; + } } - } - 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); + 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%); + } + } + } } - span.label { - display: block; - font-family: 'Ubuntu', sans-serif; - text-transform: uppercase; - font-size: modular-scale(2); - font-weight: bold; - color: #779; + 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); + footer { + margin-top: 50px; + text-align: center; + font-size: modular-scale(-1); + } } } |