67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
.gh-site {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.gh-main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.gh-outer {
|
|
padding-right: var(--gap);
|
|
padding-left: var(--gap);
|
|
}
|
|
|
|
.gh-outer .gh-outer {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.gh-inner {
|
|
width: 100%;
|
|
max-width: var(--container-width, 1200px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.gh-inner .gh-inner {
|
|
max-width: unset;
|
|
margin: unset;
|
|
}
|
|
|
|
/* Canvas creates a multi-column, centered grid which the post
|
|
is laid out on top of. Canvas just defines the grid, we don't
|
|
use it for applying any other styles. */
|
|
|
|
.gh-canvas,
|
|
.kg-width-full.kg-content-wide {
|
|
--main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
|
|
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
|
|
--full: minmax(var(--gap), 1fr);
|
|
|
|
display: grid;
|
|
grid-template-columns:
|
|
[full-start] var(--full)
|
|
[wide-start] var(--wide)
|
|
[main-start] var(--main) [main-end]
|
|
var(--wide) [wide-end]
|
|
var(--full) [full-end];
|
|
}
|
|
|
|
.gh-canvas > * {
|
|
grid-column: main;
|
|
}
|
|
|
|
.kg-width-wide,
|
|
.kg-content-wide > div {
|
|
grid-column: wide;
|
|
}
|
|
|
|
.kg-width-full {
|
|
grid-column: full;
|
|
}
|
|
|
|
.kg-width-full img {
|
|
width: 100%;
|
|
}
|