Merge pull request #5 from borkweb/styling

Styles courtesy of @borkweb!

index.php

@@ -52,12 +52,17 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
     <?php if( $action ) echo $action; ?>
 </div>
 
-<h2>Randomness</h2>
+<section class="randomness">
+    <h2>Randomness</h2>
+    <ul>
+        <li><label for="md5">MD5</label><input id="md5" class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
+        <li><label for="sha1">SHA1</label><input id="sha1" class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
+    </ul>
+</section>
 
-<ul>
+<footer>
-    <li>MD5: <input class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
+    <a href="https://github.com/abackstrom/php-tools">php-tools</a> by <a href="https://github.com/abackstrom">abackstrom</a>.
-    <li>SHA1: <input class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
+</footer>
-</ul>
 
 </body>
 </html>

style.css

@@ -1,28 +1,118 @@
+* {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 body {
+    color: #333;
     font-family: Verdana, Arial, sans-serif;
     font-size: 12px;
+    margin: 0;
+}
+
+a {
+    color: #54b4e8;
+}
+
+a:hover {
+    color: #44a0d2;
+}
+
+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;
+}
+
+footer {
+    border-top: 1px solid #eee;
+    color: #ccc;
+    opacity: 0.5;
+    padding: 1rem;
+}
+
+.randomness,
+.cols {
+    margin: 1rem;
+    overflow: hidden;
 }
 
 .col {
-    margin-right: 1.8%;
+    width: 50%;
-    width: 45%;
     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;
+}