[html]<style>
a {
text-decoration: none;
color: #58844d;
}
/* далее все нужное */
:root {
/* ширина поста, возможно меняется с дизайном по необходимости, нужно для расчета размера клеток */
--post-width: 668px;
/* цвета для фона клеток */
--mc-color1: white;
--mc-color2: #f3f3f3;
/* цвет обводки */
--mc-border: #e7e7e7;
/* цвет фона и текста заголовка */
--mc-title-bg: #a9a9a9;
--mc-title-text: white;
--mc-error: #fbf0cf;
}
.mem-challenge {
margin: 0 auto;
width: var(--post-width);
background: var(--mc-color1);
outline: 1px solid var(--mc-border);
display: grid;
grid-template-columns: repeat(5, 1fr);
box-sizing: border-box;
}
/* шахматный фон */
.mc-cell:nth-child(2n) {
background-color: var(--mc-color2);
}
.mem-challenge::before {
content: "Challenge Title";
font-size: 1.1rem;
color: var(--mc-title-text);
font-family: var(--mem-font-v1);
text-align: center;
font-weight: 400;
background-color: var(--mc-title-bg);
width: var(--post-width);
padding: 8px;
grid-column: span 5;
box-sizing: border-box;
}
.mc-cell {
width: calc(var(--post-width) / 5);
height: calc(var(--post-width) / 5);
padding: 0 0 25px;
box-sizing: border-box;
border: 1px solid var(--mc-border);
border-left: none;
border-top: none;
}
.mc-cell:nth-child(5n) {
border-right: none;
}
.mc-cell:nth-child(n + 26) {
border-bottom: none;
}
.mc-cell.done {
background: url(letter-x.png);
}
.mc-cell.error {
background: var(--mc-error);
}
.mc-date {
font-weight: bold;
padding: 5px;
text-align: center;
}
.mc-task {
height: 100%;
word-break: break-all;
overflow-y: auto;
box-sizing: border-box;
padding: 0 7px 7px;
}
.mc-task::-webkit-scrollbar {
width: 2px;
background-color: var(--mc-border);
}
</style>[/html]
