88 lines
1.4 KiB
CSS
88 lines
1.4 KiB
CSS
/* MAIN CONTENT */
|
|
main,
|
|
.content__wrapper,
|
|
.content--divided {
|
|
display: grid;
|
|
}
|
|
|
|
main,
|
|
.content__wrapper {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
}
|
|
|
|
.content__wrapper,
|
|
.content--divided {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.content__wrapper {
|
|
justify-self: center;
|
|
}
|
|
|
|
.article,
|
|
.content:not(.content--divided),
|
|
.content__section {
|
|
padding: 1.5rem var(--sz-main-padding);
|
|
}
|
|
|
|
.main__header {
|
|
padding: 2.5rem var(--sz-main-padding);
|
|
text-align: center;
|
|
display: grid;
|
|
}
|
|
|
|
.article,
|
|
.content:not(.content--divided),
|
|
.content__section {
|
|
background-color: var(--clr-content-bg);
|
|
}
|
|
|
|
.article__info {
|
|
text-align: center;
|
|
display: grid;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
.content > * + .h2,
|
|
.content__section > * + .h2,
|
|
.article > * + .h2 {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.content > * + :not([class]),
|
|
.content__section > * + :not([class]),
|
|
.article > * + :not([class]) {
|
|
margin-top: var(--sz-paragraph-margin);
|
|
}
|
|
|
|
.sidebar--sticky {
|
|
position: sticky;
|
|
top: 4rem;
|
|
}
|
|
|
|
/* Desktop main content layout */
|
|
@media only screen and (min-width: 60rem) {
|
|
.content__wrapper {
|
|
padding: 0 var(--sz-main-padding);
|
|
grid-template-areas: 'leftbar article rightbar';
|
|
grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
|
|
}
|
|
|
|
.article,
|
|
.content {
|
|
grid-area: article;
|
|
}
|
|
|
|
.left-sidebar {
|
|
grid-area: leftbar;
|
|
}
|
|
|
|
.right-sidebar {
|
|
grid-area: rightbar;
|
|
}
|
|
}
|