diff --git a/src/assets/css/main.css b/src/assets/css/main.css index ce7a3c01..463c4ab3 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -138,7 +138,7 @@ h1 { margin-bottom: 1.2rem; } -h2, h3 { +h2, h3, h4, h5, h6 { color: var(--clr-sub-heading); } @@ -151,12 +151,6 @@ h2 { font-size: 1.7rem; } -article:not(.divided-article) h2, -article h3, -.content-section h3 { - margin-top: 1.5rem; -} - p { padding: 0.5rem 0; } @@ -327,7 +321,38 @@ article, .content-container { } } -/* CUSTOM CLASSES FOR SPECIAL ELEMENTS */ +/* HEADING WRAPPER AND ANCHOR */ +.heading-wrapper { + display: flex; + gap: 0.5em; + margin-top: 1.5rem; + align-items: baseline; +} + +.heading-anchor { + font-size: max(0.75em, 1.75rem); + line-height: 1; + opacity: 0.75; + order: -1; + text-decoration: none; +} + +.heading-anchor:hover { + text-decoration: underline; + text-underline-offset: 0.1em; + opacity: 1; +} + +.heading-anchor:focus { + outline: 2px solid currentColor; + outline-offset: 0.15em; +} + +.heading-anchor [hidden] { + display: block; +} + +/* SPECIAL ELEMENTS */ .inline-code { font-family: monospace; border: 0.07rem solid var(--clr-code-border);