html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
font: @@FONT@@;
max-width: 700px;
width: auto;
margin: 0 auto;
padding: 1.5em;
position: relative;
}
/* HEADER/NAV --------------------------------------------- */
h1 {
margin: 3em 0 2em;
font-size: 28px;
font-weight: bold;
}
.prev, .next, .home, .settings {
text-decoration: none;
color: silver;
-webkit-font-smoothing: antialiased;
}
.prev {
position: absolute;
left: -3.3em;
width: 4em;
text-align: right;
}
@media all and (max-width: 820px) {
.prev {
position: relative;
left: 0;
}
.home, .settings {
margin-right: 1em;
}
}
.next {
position: absolute;
margin-left: .5em;
width: 4em;
text-align: left;
}
.home {
position: absolute;
right: 0;
}
.settings {
position: absolute;
right: 0;
font-weight: bold;
font-size: 38px;
-webkit-font-smoothing: subpixel-antialiased;
}
/* LIST ----------------------------------------------------- */
.list {
padding: 0 0 2em;
list-style: none;
}
.list a {
color: black;
display: inline-block;
width: 230px;
}
.list a:hover {
text-decoration: none;
}
.list .count {
margin-left: .2em;
color: silver;
}
/* CONTENT -------------------------------------------------- */
textarea, .content {
font: @@FONT@@;
}
.content {
margin: 3em 0;
}
.content.empty {
color: silver;
}
textarea {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}
.padding {
height: 10em;
}
#meta {
font-size: 18px;
font-family: 'Courier New';
position: absolute;
bottom: -3em;
right: 0em;
color: silver;
}
#count.passed, #message {
color: hsl(100, 50%, 60%);
text-decoration: underline;
}
/* TEXTAREA ----------------------------------------------- */
#container {
margin: 3em auto;
position: relative;
border: none;
background: transparent;
}
textarea {
height: 100%;
width: 100%;
margin: 0 0 1.4em;
padding: 0;
background: transparent;
white-space: pre-wrap;
word-wrap: break-word;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
resize: none;
}
/* FORMS --------------------------------------------- */
form label, form input {
font: @@FONT@@;
position: relative;
display: block;
}
form label {
font-size: 16px;
}
form input {
font-size: 23px;
width: 500px;
border: none;
border-bottom: 1px solid black;
outline: none;
margin-bottom: 1em;
}
form input[type=submit] {
margin-top: 3em;
font-size: 18px;
width: 100px;
background: hsl(100, 50%, 55%);
border: 1px solid hsl(100, 50%, 50%);
-webkit-border-radius: 3px;
color: white;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
padding: .3em;
}
form input[type=submit]:hover {
background: hsl(100, 50%, 50%);
}