Style heading wrapper and anchors

This commit is contained in:
Helen Chong 2024-04-13 02:19:37 +08:00
parent 89af94dbf8
commit c75815db29
1 changed files with 33 additions and 8 deletions

View File

@ -138,7 +138,7 @@ h1 {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }
h2, h3 { h2, h3, h4, h5, h6 {
color: var(--clr-sub-heading); color: var(--clr-sub-heading);
} }
@ -151,12 +151,6 @@ h2 {
font-size: 1.7rem; font-size: 1.7rem;
} }
article:not(.divided-article) h2,
article h3,
.content-section h3 {
margin-top: 1.5rem;
}
p { p {
padding: 0.5rem 0; 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 { .inline-code {
font-family: monospace; font-family: monospace;
border: 0.07rem solid var(--clr-code-border); border: 0.07rem solid var(--clr-code-border);