57 lines
1.4 KiB
CSS
57 lines
1.4 KiB
CSS
|
/* MAIN CONTENT */
|
||
|
|
content-wrapper,
|
||
|
|
.content--divided { display: grid; }
|
||
|
|
|
||
|
|
content-wrapper,
|
||
|
|
.content--divided { gap: 1rem; }
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 { margin-top: 2em; }
|
||
|
|
|
||
|
|
.content > * + :not([class]),
|
||
|
|
.content__section > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
|
||
|
|
|
||
|
|
.content ul:not([class]), .content ol:not([class]) {
|
||
|
|
display: grid;
|
||
|
|
gap: var(--sz-content-list-gap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content ul ul, .content ol ol,
|
||
|
|
.content ul ol, .content ol ul { margin-top: var(--sz-content-list-gap); }
|
||
|
|
|
||
|
|
.sidebar--sticky {
|
||
|
|
position: sticky;
|
||
|
|
top: var(--sz-navbar-ht);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Desktop main content layout */
|
||
|
|
@media only screen and (min-width: 60rem) {
|
||
|
|
content-wrapper {
|
||
|
|
padding: 0 var(--sz-main-padding);
|
||
|
|
grid-template-areas: 'leftbar content rightbar';
|
||
|
|
grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content { grid-area: content; }
|
||
|
|
.left-sidebar { grid-area: leftbar; }
|
||
|
|
.right-sidebar { grid-area: rightbar; }
|
||
|
|
}
|