Eryn Wells
bfee27e7c5
Add a section shortcode to enable wrapping a chunk of a post in a <section> Add a section.flow class that removes grid from the section Fix up the about styles so that the paragraph that Hugo wraps the <img> in behaves sensibly when floated Fix the alt text in the circular_image shortcode
429 lines
8.8 KiB
CSS
429 lines
8.8 KiB
CSS
:root {
|
|
--body-item-spacing: 2rem;
|
|
--content-width: 80rem;
|
|
--content-columns: 5;
|
|
--gutter-width: 3rem;
|
|
--list-item-block-gap: var(--body-item-spacing);
|
|
--margin-min-width: var(--body-item-spacing);
|
|
--margin-max-width: 1fr;
|
|
--menu-icon-size: 20px;
|
|
--nav-bulleted-spacing: 0.75rem;
|
|
}
|
|
|
|
@layer root {
|
|
main {
|
|
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];
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer layout {
|
|
blockquote {
|
|
--line-width: 4px;
|
|
|
|
border-inline-start: var(--line-width) solid var(--separator-color);
|
|
padding-inline-start: calc(3rem - var(--line-width));
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
code.nobg {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
details {
|
|
width: 100%;
|
|
}
|
|
|
|
details:has(#TableOfContents) {
|
|
box-sizing: border-box;
|
|
padding: var(--body-item-spacing);
|
|
}
|
|
|
|
fieldset {
|
|
box-sizing: border-box;
|
|
padding: var(--body-item-spacing);
|
|
padding-top: calc(var(--body-item-spacing) / 10);
|
|
}
|
|
|
|
figcaption:not(:empty) {
|
|
margin-block-start: 0.2em;
|
|
}
|
|
|
|
figure {
|
|
grid-column: gutter-start / gutter-end;
|
|
margin: 0;
|
|
margin-inline: 0;
|
|
min-width: fit-content;
|
|
overflow: hidden;
|
|
}
|
|
@media (max-width: 415px) {
|
|
figure {
|
|
grid-column: wide-content-start / wide-content-end;
|
|
}
|
|
}
|
|
|
|
figure.code .line > .ln {
|
|
grid-column: gutter-start;
|
|
}
|
|
|
|
figure.code .line > .cl {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
figure > .container {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: var(--body-item-spacing);
|
|
justify-content: center;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
figure img {
|
|
display: block;
|
|
}
|
|
@media (max-width: 414px) {
|
|
figure img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
figure svg {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
figure .youtube {
|
|
overflow: hidden;
|
|
max-width: var(--content-width);
|
|
width: 100%;
|
|
}
|
|
|
|
header.site {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
header.site h1 {
|
|
margin: 0;
|
|
order: 1;
|
|
}
|
|
|
|
header.site > .grid {
|
|
align-items: baseline;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 0.5em;
|
|
margin: 0 auto;
|
|
max-width: var(--content-width);
|
|
padding: 1.5rem 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
header.site > .grid > nav {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: start;
|
|
list-style: none;
|
|
}
|
|
|
|
header.site nav > li { display: block; }
|
|
|
|
header.site nav:first-of-type {
|
|
justify-content: start;
|
|
order: 2;
|
|
}
|
|
@media (max-width: 435px) {
|
|
header.site nav:first-of-type { order: 5; }
|
|
}
|
|
|
|
header.site nav:last-of-type {
|
|
justify-content: end;
|
|
order: 3;
|
|
}
|
|
|
|
@media (max-width: 516px) {
|
|
header.site > .platter {
|
|
border-left: none;
|
|
border-radius: 0;
|
|
border-right: none;
|
|
border-top: none;
|
|
}
|
|
|
|
header.site > .grid { max-width: none; }
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
main {
|
|
box-sizing: border-box;
|
|
margin-block-start: var(--body-item-spacing);
|
|
width: 100%;
|
|
}
|
|
|
|
main > * {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
main > figure:not(.code),
|
|
main > a.to-photo-post {
|
|
grid-column: wide-content-start / wide-content-end;
|
|
}
|
|
|
|
main > header > .series {
|
|
margin-inline-start: 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
main > header > .series::before {
|
|
margin-inline-end: 0.25em;
|
|
}
|
|
|
|
main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
|
|
padding-block-start: 0.5em;
|
|
}
|
|
|
|
nav.bulleted > li:not(:first-child)::before {
|
|
margin-inline-start: var(--nav-bulleted-spacing);
|
|
}
|
|
|
|
nav.social > li {
|
|
margin-inline-start: var(--nav-bulleted-spacing);
|
|
}
|
|
|
|
nav.social > li:first-child {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
section.flow {
|
|
display: block flow;
|
|
}
|
|
|
|
ul, ol {
|
|
list-style-position: inside;
|
|
}
|
|
|
|
ul,
|
|
ol,
|
|
dl,
|
|
:is(ul, ol) > li,
|
|
dl > dt {
|
|
margin-inline-start: var(--body-item-spacing);
|
|
}
|
|
|
|
:is(ul, ol) > li:not(:last-child) {
|
|
margin-block-end: calc(var(--body-item-spacing) / 2);
|
|
}
|
|
|
|
:is(ul, ol) > li > :is(ul, ol) {
|
|
margin-inline-start: 0;
|
|
margin-block-start: calc(var(--body-item-spacing) / 2);
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
margin-inline: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.list .post header {
|
|
grid-column: wide-content-start / content-end;
|
|
}
|
|
@supports (grid-template-columns: subgrid) {
|
|
.list .post header {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
}
|
|
|
|
.list .post header h1 {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
}
|
|
|
|
.list .post time {
|
|
grid-column: wide-content-start;
|
|
justify-self: end;
|
|
}
|
|
@media (max-width: 960px) {
|
|
.list .post time {
|
|
grid-column: content-start / content-end;
|
|
justify-self: start;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
gap: var(--list-item-block-gap) 0;
|
|
}
|
|
|
|
.list > h1,
|
|
.list > header {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
.list > .post {
|
|
grid-column: wide-content-start / wide-content-end;
|
|
}
|
|
|
|
@supports (grid-template-columns: subgrid) {
|
|
.list > .post {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
gap: var(--body-item-spacing) 0;
|
|
}
|
|
}
|
|
|
|
.list .post time {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.list .post time {
|
|
line-height: var(--line-height);
|
|
}
|
|
}
|
|
|
|
.p5-sketch {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.page {
|
|
gap: var(--body-item-spacing) 0;
|
|
}
|
|
|
|
.page > header {
|
|
align-items: first baseline;
|
|
column-gap: 4rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 539px) {
|
|
.page > header {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
.page > header,
|
|
.page > footer {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
.page > article > * {
|
|
grid-column: gutter-start / gutter-end;
|
|
}
|
|
|
|
.page > :not(blockquote, figure, :has(> img)) {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
.page > article > :not(:last-child) {
|
|
margin-block-end: var(--body-item-spacing);
|
|
}
|
|
|
|
.post {
|
|
grid-column: gutter-start / gutter-end;
|
|
}
|
|
|
|
.post > * {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
.social {
|
|
display: block flex;
|
|
margin-left: auto;
|
|
order: 2;
|
|
}
|
|
|
|
.social > li > a {
|
|
display: block;
|
|
height: var(--menu-icon-size);
|
|
width: var(--menu-icon-size);
|
|
}
|
|
|
|
.social > li > a > span {
|
|
display: none;
|
|
}
|
|
|
|
.social > li + li:before {
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.youtube iframe {
|
|
aspect-ratio: 16 / 9;
|
|
margin-bottom: -3px;
|
|
width: 100%;
|
|
}
|
|
}
|