:root {
--square-size: 10px;
--square-gap: 5px;
--week-width: calc(var(--square-size) + var(--square-gap));
}
.graph .days {
grid-area: days;
margin-top: -9px;
}
.graph .squares {
grid-area: squares;
}
.graph {
display: inline-grid;
grid-template-areas: "empty months"
"days squares";
grid-template-columns: auto 1fr;
grid-gap: 10px;
color: #777;
font-size: 12px;
margin-top: 10px;
padding: 20px;
border: 1px #e1e4e8 solid;
background-color: #f2f2f2;
overflow-x: auto;
}
.graph .months {
display: grid;
grid-area: months;
grid-template-columns: calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 5) ;
}
@media screen and (max-width: 500px) {
.graph {
display: none;
}
}
.graph .days,
.graph .squares {
display: grid;
grid-gap: var(--square-gap);
grid-template-rows: repeat(7, var(--square-size));
}
.graph .squares {
grid-auto-flow: column;
grid-auto-columns: var(--square-size);
}
.graph .days li:nth-child(odd) {
visibility: hidden;
}
.graph .squares li {
background-color: #ebedf0;
outline: 1px solid rgba(27, 31, 35, 0.06);
outline-offset: -1px;
}
#archives:after {
clear: both;
display: block;
visibility: hidden;
height: 0!important;
content: " ";
font-size: 0!important;
line-height: 0!important;
}
#archives {
zoom: 1;
}
#archives-content {
float: right;
text-align: left;
margin: 0 0 0 150px;
}
#archive-nav {
float: left;
font-size: 0.8em;
}
.archive-nav {
display: block;
position: fixed;
background: #f9f9f9;
width: 100px;
padding: 5px;
border: 1px solid #eee;
text-align: center;
margin-left:10px;
}
.year {
border-top: 1px solid #ddd;
}
.month {
color: #ccc;
cursor: pointer;
background: #f9f9f9;
}
.month.monthed {
color: #777;
}
.month.selected,
.month:hover {
background: #f2f2f2;
}
.monthall {
display: none;
}
.year.selected .monthall {
display: block;
}
.year-toogle {
display: block;
text-decoration: none;
background: #eee;
color: #333;
font-weight: bold;
}
.archive-title {
padding-bottom: 40px;
}
.brick {
margin-bottom: 10px;
}
.archives a {
position: relative;
display: block;
padding: 10px;
background-color: #e0e0e0;
color: #333;
font-style: normal;
line-height: 18px;
}
.time {
color: #888;
padding-right: 10px;
}
.archives a:hover {
background: #eee;
}
#archives h3 {
padding-bottom: 10px;
}
.brick em {
color: #aaa;
padding-left: 10px;
}