82 lines
2.8 KiB
CSS
82 lines
2.8 KiB
CSS
:root {
|
|
--margin-min-width: var(--body-item-spacing);
|
|
--margin-max-width: 1fr;
|
|
}
|
|
|
|
@layer root {
|
|
main {
|
|
--content-columns: 5;
|
|
--gutter-width: 3rem;
|
|
|
|
display: grid;
|
|
grid-template-columns:
|
|
[margin-left]
|
|
minmax(var(--margin-min-width), var(--margin-max-width))
|
|
[wide-content-start wide-content-left-start]
|
|
1fr
|
|
[wide-content-left-end gutter-start gutter-left-start]
|
|
var(--gutter-width)
|
|
[gutter-left-end content-start]
|
|
repeat(var(--content-columns),
|
|
min(
|
|
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
|
|
calc(var(--content-width) / var(--content-columns))
|
|
)
|
|
)
|
|
[content-end gutter-right-start]
|
|
var(--gutter-width)
|
|
[gutter-right-end gutter-end wide-content-right-start]
|
|
1fr
|
|
[wide-content-right-end wide-content-end]
|
|
minmax(var(--margin-min-width), var(--margin-max-width))
|
|
[margin-right];
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
main {
|
|
--margin-min-width: 0;
|
|
--margin-max-width: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 519px) {
|
|
/* Collapse the margin and wide content tracks */
|
|
main {
|
|
--content-columns: 3;
|
|
|
|
grid-template-columns:
|
|
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
|
var(--gutter-width)
|
|
[gutter-left-end content-start]
|
|
repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
|
|
[content-end gutter-right-start]
|
|
var(--gutter-width)
|
|
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
|
}
|
|
}
|
|
|
|
@media (max-width: 415px) {
|
|
main {
|
|
--content-columns: 1;
|
|
|
|
display: grid;
|
|
grid-template-columns:
|
|
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
|
var(--gutter-width)
|
|
[gutter-left-end content-start]
|
|
calc(100% - 2 * var(--gutter-width))
|
|
[content-end gutter-right-start]
|
|
var(--gutter-width)
|
|
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
|
}
|
|
}
|
|
|
|
main > * {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
main > figure,
|
|
main > a.to-photo-post {
|
|
grid-column: wide-content-start / wide-content-end;
|
|
}
|
|
}
|