Browse Source

Some styling

master
Matthew Batchelder 8 years ago
parent
commit
56ec829342
  1. 13
      index.php
  2. 80
      style.css

13
index.php

@ -51,12 +51,13 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<?php if( $action ) echo $action; ?>
</div>
<h2>Randomness</h2>
<ul>
<li>MD5: <input class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
<li>SHA1: <input class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
</ul>
<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>
</body>
</html>

80
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 {
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;
}

Loading…
Cancel
Save