._sanctuary { @extend %simple; --base-font-size: 14px; --h2-padding-top: 0.5em; --h2-line-height: 1.25rem; --h2-padding-bottom: 0.5em; --h2-border-bottom-width: 1px; --h2-margin-bottom: 1em; --h3-padding-top: 1px; --h3-line-height: 1.375rem; --h3-padding-bottom: 2px; --h3-border-bottom-width: 1px; --h3-margin-bottom: 1em; --h4-padding-top: 0px; --h4-line-height: calc(1.3 * var(--base-font-size)); --h4-padding-bottom: 0px; --h4-margin-bottom: 1em; padding-left: 32px; .pilcrow { position: absolute; display: block; width: 24px; text-align: center; text-decoration: none; font-weight: var(--bolderFontWeight); color: #eee; } .pilcrow:hover { color: var(--linkColor); } .pilcrow.h2 { margin-left: -40px; margin-top: calc(0px - (var(--h2-padding-top) + var(--h2-line-height) + var(--h2-padding-bottom) + var(--h2-border-bottom-width) + var(--h2-margin-bottom))); padding: var(--h2-padding-top) 0 var(--h2-padding-bottom); font-size: 1rem; line-height: var(--h2-line-height); } .pilcrow.h3 { margin-left: -40px; margin-top: calc(0px - (var(--h3-padding-top) + var(--h3-line-height) + var(--h3-padding-bottom) + var(--h3-border-bottom-width) + var(--h3-margin-bottom))); padding: var(--h3-padding-top) 0 var(--h3-padding-bottom); font-size: inherit; line-height: var(--h3-line-height); } .pilcrow.h4 { margin-left: -24px; margin-top: calc(0px - (var(--h4-padding-top) + var(--h4-line-height) + var(--h4-padding-bottom) + var(--h4-margin-bottom))); padding: var(--h4-padding-top) 0 var(--h4-padding-bottom); font-size: inherit; line-height: var(--h4-line-height); } pre > code { font-size: inherit; } }