59 lines
1,017 B
CSS
59 lines
1,017 B
CSS
/* v.1.1.1 */
|
|
|
|
#result { text-align: center; font-size: 1.5rem; font-weight: bold; }
|
|
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 20px 1fr 1fr 20px 1fr 1fr;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.grid div {
|
|
display: block;
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
margin: 1px;
|
|
}
|
|
|
|
@media(max-width: 385px) {
|
|
#result { font-size: 1em; }
|
|
.grid {
|
|
grid-template-columns: 1fr 1fr 15px 1fr 1fr 15px 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 254px) {
|
|
#result { font-size: 1em; }
|
|
.grid div {
|
|
min-width: 1em;
|
|
min-height: 1em;
|
|
}
|
|
.grid {
|
|
grid-template-columns: 1fr 1fr 10px 1fr 1fr 10px 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 170px) {
|
|
.grid div { font-size: 0.8em; }
|
|
.grid {
|
|
grid-gap: 0;
|
|
grid-template-columns: 1fr 1fr 2px 1fr 1fr 2px 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 120px) {
|
|
.grid div { font-size: 0.8em; }
|
|
.grid {
|
|
grid-gap: 0;
|
|
grid-template-columns: 1fr 1fr 0;
|
|
}
|
|
}
|
|
|
|
|
|
.gridColumn { margin: 3px; }
|
|
|
|
.block0, .block1 { border: 1px solid var(--cOp); }
|
|
.block0 { background-color: var(--d2); }
|
|
.block1 { background-color: var(--l4); }
|