@mixin border-radius($size) {
border-radius: $size; -webkit-border-radius: $size; -moz-border-radius: $size;
}
@mixin box-shadow($x, $y, $size, $colour) {
-webkit-box-shadow: $x $y $size $colour; -moz-box-shadow: $x $y $size $colour;
}
body {
background-color: #e3e3e3; color: #595959; font: 12pt / 1.6em "Helvetica Neue", Helvetica, sans-serif; margin: 2em auto; width: 600px;
}
a {
text-decoration: none; &:link, &:visited { color: #2960aa; }
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
.event {
background-color: #efefef; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#efefef)); background: -moz-linear-gradient(top, #f9f9f9, #efefef); border-top: 1px solid white; @include border-radius(4px); overflow: hidden; padding: 20px; margin-bottom: 1em; @include box-shadow(0, 1px, 3px, rgba(0, 0, 0, 0.3)); &.today { background-color: #ebe4de; background: -webkit-gradient(linear, left top, left bottom, from(#f3ebe3), to(#e9d6c1)); } .details { float: right; width: 480px; } dl { color: #777777; font-size: 0.9em; } dt { font-weight: bold; float: left; } dd { float: right; margin: 0; width: 420px; }
}
header, footer {
// display: block for browsers with poor HTML5 support display: block;
}
header {
border-bottom: 1px solid #cccccc; overflow: hidden; padding-bottom: 0.5em; margin-bottom: 1em; @include box-shadow(0, 1px, 0, #f6f6f6);
}
footer {
border-top: 1px solid #cccccc; color: #999999; font-size: 0.9em; padding: 1em; .subscribe { float: left; a { margin-right: 1em; } } .add { float: right; } .fork { clear: both; font-size: 0.8em; } a:link, a:visited { color: #8aa0b6; }
}
h1, h2, h3, h4 {
margin: 0; text-shadow: 0 1px 0 white;
}
h1 {
color: #666666; font-size: 1.8em; float: left; a:link, a:visited { color: #666666; } a:hover { color: black; }
}
h2 {
color: #999999; font-size: 1em; float: right; text-transform: uppercase;
}
h3 {
color: #333333;
}
h4 {
display: inline; font-size: 1em; margin-right: 1em;
}
.date {
background-color: #cc0000; @include border-radius(4px); color: white; float: left; text-align: center; padding: 2px; width: 60px; .day { background-color: white; color: #333333; font-size: 1.6em; padding: 0.2em; }
}
error {
background: white; @include border-radius(4px); padding: 2em; margin: 1em 0; text-align: center; h1 { float: none; margin: 0.5em 0; }
}