main.learn { --offset: 4rem; --content-width: 52rem; --heading-padding-bottom: 0.5rem; --topic-font-size: 2rem; --topic-padding-top: 4.5rem; --topic-sticky-size: calc( var(--topic-padding-top) + var(--topic-font-size) + var(--heading-padding-bottom) + 1px ); --detail-font-size: 1.5rem; --detail-padding-top: calc(var(--topic-sticky-size) + 0.75rem); --detail-padding-bottom: 0.375rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; padding: 0 var(--page-x); article { counter-reset: theme; padding-block: var(--offset); &::before { content: ""; position: sticky; top: 0; z-index: 4; display: block; height: var(--offset); margin-top: calc(-1 * var(--offset)); margin-inline: auto; margin-bottom: calc(-1 * var(--offset)); background: var(--black); pointer-events: none; } > section { counter-increment: theme; counter-reset: topic; width: min(100%, var(--content-width)); margin-inline: auto; scroll-margin-top: var(--offset); } > section:first-of-type { margin-top: calc(-1 * var(--offset)); padding-top: var(--offset); } > section + section { margin-top: 8rem; } > section > section { counter-increment: topic; counter-reset: detail; scroll-margin-top: var(--offset); } > section > section > section { counter-increment: detail; scroll-margin-top: var(--offset); } } h1, h2, h3 { line-height: 1; a { position: relative; display: inline-block; color: var(--white); text-decoration: none; &::before { position: absolute; top: 50%; right: 100%; translate: 0 -50%; opacity: 0; user-select: none; text-decoration: none; } &:hover::before { opacity: 0.5; } &:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.125em; } &:active { color: var(--orange); } } } h1, h2, h3 { position: sticky; top: var(--offset); background: var(--black); } h1 { z-index: 3; padding-bottom: var(--heading-padding-bottom); border-bottom: 1px solid var(--dark-gray); font-size: 3rem; a::before { content: counter(theme, upper-roman) ". "; } } h2 { z-index: 2; padding-top: var(--topic-padding-top); padding-bottom: var(--heading-padding-bottom); border-bottom: 1px dashed var(--dark-gray); font-size: var(--topic-font-size); a::before { content: counter(topic) ". "; } } h3 { z-index: 1; padding-top: var(--detail-padding-top); padding-bottom: var(--detail-padding-bottom); border-bottom: 1px dotted var(--dark-gray); font-size: var(--detail-font-size); a::before { content: counter(detail, lower-alpha) ". "; } } p { margin-top: 1rem; color: var(--dark-white); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } figure { margin-top: 2rem; color: var(--gray); font-size: var(--font-size-xs); &:not([data-chart]) { text-transform: uppercase; } > div { height: 18rem; display: grid; place-items: center; border: 1px solid var(--dark-gray); font-size: var(--font-size-sm); } figcaption { margin-top: 0.75rem; } } }