@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
$link: #2C93AD;
$link-hover: #DF9230;
html {
font-size: 62.5%;
}
body {
background: #f7f7f7;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: 'Lato', sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
padding: 20px;
font-size: 1.8rem;
}
h1 {
text-align: center;
font-weight: 300;
}
table,tr,td,tbody {
display: block;
}
thead {
display: none;
}
td {
margin-bottom: 20px;
background: rgba(255,255,255,.2);
padding: 20px;
border-bottom: 2px solid #eee;
display: none;
&.has-event {
display: block;
}
}
.calendar-date {
font-size: 2rem;
font-weight: 700;
width: 42px;
height: 42px;
line-height: 42px;
text-align: center;
background: $link-hover;
color: #fff;
border-radius: 50%;
display: inline-block;
position: relative;
&:before {
content: attr(data-week-day) " ";
position: absolute;
left: 48px;
top: 2px;
color: #666;
font-size: 1.4rem;
}
}
.event-link {
text-decoration: none;
padding: 5px;
display: block;
color: $link;
transition: border-radius .2s linear;
font-weight: 700;
&:hover, &:focus {
border-radius: 10px;
background: rgba(0,0,0,.01);
color: $link-hover;
}
}
@media (min-width: 960px) {
table {
display: table;
border: 1px solid #ccc;
table-layout: fixed;
width: 100%;
}
tr {