Eryn Wells
502aa408d9
There are two main sizes of figures: fullwidth and small. Full width figures take the full content width. Usually they spread into the "wide" content area too. Main size figures are also full width figures, but they stop at the edges of the main content area. Small figures shrink to fit and are generally 480pts wide. Break all these different types of figures down into separate templates for each variant. Add the ability for resources to specify a "source" with a link and title.
144 lines
2.4 KiB
CSS
144 lines
2.4 KiB
CSS
|
|
|
|
|
|
|
|
|
|
/*************************
|
|
# CONTENT AREA STRUCTURE
|
|
************************/
|
|
|
|
:root {
|
|
--content-width: 45rem;
|
|
--gutter-width: var(--space-m);
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
gap: 0;
|
|
grid-template-columns:
|
|
[full-start]
|
|
1fr
|
|
[wide-start]
|
|
1fr
|
|
[wide-gutter-start wide-gutter-left-start]
|
|
var(--gutter-width)
|
|
[wide-gutter-left-end gutter-start gutter-left-start]
|
|
var(--gutter-width)
|
|
[gutter-left-end main-start]
|
|
minmax(auto, var(--content-width))
|
|
[main-end gutter-right-start]
|
|
var(--gutter-width)
|
|
[gutter-right-end gutter-end wide-gutter-right-start]
|
|
var(--gutter-width)
|
|
[wide-gutter-right-end wide-gutter-end]
|
|
1fr
|
|
[wide-end]
|
|
1fr
|
|
[full-end];
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
:root {
|
|
--gutter-width: var(--space-s);
|
|
}
|
|
|
|
body {
|
|
grid-template-columns:
|
|
[
|
|
full-start
|
|
wide-start
|
|
wide-gutter-start
|
|
wide-gutter-left-start
|
|
wide-gutter-left-end
|
|
gutter-start
|
|
gutter-left-start
|
|
]
|
|
var(--gutter-width)
|
|
[gutter-left-end main-start]
|
|
minmax(auto, var(--content-width))
|
|
[main-end gutter-right-start]
|
|
var(--gutter-width)
|
|
[
|
|
gutter-right-end
|
|
gutter-end
|
|
wide-gutter-right-start
|
|
wide-gutter-right-end
|
|
wide-gutter-end
|
|
wide-end
|
|
full-end
|
|
];
|
|
}
|
|
}
|
|
|
|
.body__container,
|
|
.site-header,
|
|
.main--list,
|
|
.main--single,
|
|
.content
|
|
{
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: full-start / full-end;
|
|
}
|
|
|
|
.main--list {
|
|
.page-header {
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
.page-header,
|
|
.main__content
|
|
{
|
|
margin-block-end: var(--space-xl);
|
|
}
|
|
}
|
|
|
|
.body__container {
|
|
gap: var(--space-xl) 0;
|
|
}
|
|
|
|
:is(.list-header, p) {
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
.content > :not(figure, pre) {
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
.content > .codeblock) {
|
|
grid-column: wide-gutter-start / wide-gutter-end;
|
|
}
|
|
|
|
figure, img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.content-term-list {
|
|
display: flex;
|
|
list-style: none;
|
|
padding-inline: 0;
|
|
|
|
li:not(:last-child) {
|
|
margin-inline-end: var(--space-s);
|
|
}
|
|
}
|
|
|
|
section.content--small-right-column {
|
|
display: block flow;
|
|
grid-column: main-start / main-end;
|
|
|
|
p {
|
|
grid-column: unset;
|
|
}
|
|
|
|
.content--right-column,
|
|
:has(.content--right-column) {
|
|
float: inline-end;
|
|
margin-block: 0;
|
|
}
|
|
}
|