main.blog.single { --max-container-width: 80ch; line-height: 1.6; padding-bottom: 2rem; article.h-entry { > header { background: var(--color-card-background); color: var(--color-card-text); padding-block: 1rem; .entry-title { margin-block-start: 1rem; font-family: serif; } .entry-summary { font-family: serif; } .h-card { font-style: normal; display: inline-block; a { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: center; text-decoration: none; } img.logo { width: 2rem; height: 2rem; border-radius: 100rem; } } time.dt-published { display: block; } #TableOfContents > ul { padding-left: 1rem; } } section.e-content { display: grid; grid-template-columns: 1em 1fr 1em; padding-block: 1rem; gap: 1rem 0; max-width: 80ch; margin: 0 auto; @media (min-width: 55ch) { grid-template-columns: minmax(1em, 1fr) minmax(45ch, 70ch) minmax(1em, 1fr); } > * { grid-column: 2; margin: 0; } > img, > figure { grid-column: 1 / span 3; width: 100%; img { width: 100%; display: block; } figcaption { padding: 1rem; background: var(--color-card-background); color: var(--color-card-text); font-size: 0.8em; } } > blockquote { padding-inline-start: 0.25rem; border-inline-start: 0.25rem solid var(--color-highlight); p:only-child {margin: 0;} } .has-pullquote { @mixin pullquote { content: attr(data-pullquote); font-family: serif; display: block; margin-block-end: 1rem; font-size: 1.2rem; color: var(--color-highlight); } &.left { &.before:before, &.after:after { @include pullquote; } } &.right { &.before:before, &.after:after { @include pullquote; } } @media (min-width: 40rem) { &.left { &.before:before, &.after:after { float: left; margin-inline-end: 1rem; max-width: 24ch; } } &.right { &.before:before, &.after:after { float: right; margin-inline-start: 1rem; max-width: 24ch; } } } } } } }