body {
background: #370017;
color: #FFE1ED;
max-width: 35em;
padding: 1em;
margin: auto;
font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
font-size: 15pt;
}
$widget-accent:#610028;
%widget {
font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
font-size: 14pt;
border: 1px inset darken($widget-accent,8);
background: $widget-accent;
color: white;
padding: 0.3em;
flex-grow: 2;
text-shadow: 0 0 10px #E84B8C;
box-sizing: border-box;
&:focus {
outline: none;
background: lighten($widget-accent,5);
}
}
textarea { @extend %widget; }
input {
@extend %widget;
&[type=submit] {
position: absolute;
flex-grow: 0;
width: 30%;
right: 0;
top: 1em;
text-shadow: 0 0 10px #E84B8C;
border: 1px solid black;
&:hover {
background-color: #E31E6F;
color: black;
}
&:active {
background-color: darken($widget-accent,9);
color: lighten($widget-accent,60);
padding-bottom: calc(0.3em - 2px);
padding-top: calc(0.3em + 2px);
}
}
}
code {
font-family: Inconsolata, Monaco, monocode;
padding: 0.2em 0.3em;
background: #740C38;
border: 1px solid #260010;
}
textarea {
height: 6em;
}
form {
> div {
position: relative;
display: flex;
width: 100%;
align-items: center;
}
label {
margin-right: 0.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
font-weight: bold;
}
}
a, a[href] { /* a for dillo's benefit */
$a-color: #FF2E84;
color: $a-color;
text-decoration-color: darken($a-color,30);
&:hover {
color: lighten($a-color,40);
text-decoration-color: lighten($a-color,20);
}
}
h1 {
font-weight: 100;
margin-bottom: 0.0em;
border-bottom: 1px solid #FF7AB1;
a, a[href] {
color: #FF7AB1;
text-decoration: none;
}
}