annika/php-tools
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #5 from borkweb/styling

Browse Source 
Styles courtesy of @borkweb!
This commit is contained in:
Adam Backstrom 2013-07-25 14:11:24 -07:00
commit 6411207e3e
2 changed files with 105 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.php
View File

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

100
style.css
View File

@ -1,28 +1,118 @@
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { body {
color: #333;
font-family: Verdana, Arial, sans-serif; font-family: Verdana, Arial, sans-serif;
font-size: 12px; 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 { textarea {
font-family: Inconsolata, Consolas, Monaco, monospace;
font-size: 1.2em;
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
height: 200px; height: 200px;
width: 100%; 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 { h2 {
border-bottom: 1px solid #f8f8f8;
color: #555;
clear: both; 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 { .col {
margin-right: 1.8%; width: 50%;
width: 45%;
float: left; float: left;
padding: 10px; padding: 0.5rem;
}
.col:first-child {
padding-left: 0;
}
.col:last-child {
padding-right: 0;
} }
.randomness-box { .randomness-box {
width: 30em; width: 30em;
} }
.randomness ul {
list-style-type: none;
margin: 0;
padding: 0;
}