diff --git a/index.php b/index.php index b15c4db..70cb27a 100644 --- a/index.php +++ b/index.php @@ -51,12 +51,13 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) { -

Randomness

- - +
+

Randomness

+ +
diff --git a/style.css b/style.css index 2d08a29..da7503f 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,102 @@ +* { + box-sizing: border-box; +} + body { + color: #333; font-family: Verdana, Arial, sans-serif; font-size: 12px; + margin: 0; +} + +label { + display: inline-block; + margin-right: 0.5rem; + text-align: right; + width: 3rem; +} + +label:after { + content: ':'; +} + +input, +select, +textarea { + border: 1px solid #ccc; + border-radius: 3px; + padding: .5em; + font-family: Inconsolata, Consolas, Monaco, monospace; + font-size: 1.2em; +} + +select { + height: 32px; } textarea { - font-family: Inconsolata, Consolas, Monaco, monospace; - font-size: 1.2em; white-space: pre; word-wrap: normal; height: 200px; width: 100%; } +input[type="submit"] { + background-color: #f8f8f8; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#eee)); + background-image: -webkit-linear-gradient(top, #f8f8f8, #eee); + background-image: -o-linear-gradient(top, #f8f8f8, #eee); + background-image: linear-gradient(to bottom, #f8f8f8,#eee); + background-image: -moz-linear-gradient(top, #f8f8f8, #eee); + border: 1px solid #ccc; + color: #333; + cursor: pointer; + text-shadow: 1px 1px 0 rgba( 255, 255, 255, .8 ); +} + +h1 { + background: #f5f5f5; + border-bottom: 1px solid #eee; + color: #555; + margin: 0; + padding: 1rem; + text-shadow: 1px 1px 0 rgba( 255, 255, 255, .8 ); +} + h2 { + border-bottom: 1px solid #f8f8f8; + color: #555; clear: both; + letter-spacing: 0.05em; + padding: 0.5rem 0; +} + +.randomness, +.cols { + margin: 1rem; + overflow: hidden; } .col { - margin-right: 1.8%; - width: 45%; + width: 50%; float: left; - padding: 10px; + padding: 0.5rem; +} + +.col:first-child { + padding-left: 0; +} + +.col:last-child { + padding-right: 0; } .randomness-box { width: 30em; } + +.randomness ul { + list-style-type: none; + margin: 0; + padding: 0; +}