diff options
| author | Yuval Adam <yuval@y3xz.com> | 2015-12-09 13:49:04 +0200 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2015-12-09 13:49:04 +0200 |
| commit | 731ed3db3812a7de1d05a42f3ed91d2d5f556720 (patch) | |
| tree | b5d5e35b84b5877fbcbc671ab29a9fb7bd75f265 | |
| parent | 41ae79e2699118120b976eb657782d614089aec4 (diff) | |
Design cleanup
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | index.js | 7 | ||||
| -rw-r--r-- | style.scss | 18 |
3 files changed, 25 insertions, 3 deletions
@@ -14,8 +14,7 @@ </head> <body> <header> - <h1>CIDR.xyz</h1> - <h2>An interactive IP address and CIDR range visualizer</h2> + <h1>CIDR.xyz<small>An interactive IP address and CIDR range visualizer</small></h1> </header> <section id="app"></section> <footer> @@ -83,7 +83,12 @@ class IPAddress extends React.Component { </div> <div className="details"> - <span className="netmask">Netmask: {this.getNetmask()}</span>, <span className="count">Address Count: {this.getCount()}</span> + <span className="netmask"> + <span className="label">Netmask:</span> {this.getNetmask()} + </span> + <span className="count"> + <span className="label">Available addresses:</span> {this.getCount()} + </span> </div> </div> @@ -14,10 +14,20 @@ body { header { margin-bottom: 30px; + h1 { + font-size: 1.7em; + margin-left: 40px; + small { + text-transform: uppercase; + color: #bbb; + display: block; + } + } } div.ip-address { text-align: center; + font-family: $monospace; div { margin-top: 65px; } @@ -70,6 +80,14 @@ body { } } } + div.details { + span.label { + font-family: $lucida-grande; + } + span.count { + margin-left: 2em; + } + } } footer { |