theme/assets/sass/components/_prose.scss (84 lines of code) (raw):
@use '/assets/sass/protocol/includes/lib' as *;
/* stylelint-disable selector-class-pattern */
.Prose {
width: 100%;
.Document-content & {
max-width: 55em;
}
:link {
color: $link-color;
text-decoration: underline;
&:hover,
&:focus,
&:active {
color: $link-color-hover;
text-decoration: none;
}
&:active {
background-color: rgba(0, 0, 0, 0.05);
}
@supports (--css: variables) {
color: var(--link-color);
&:hover,
&:focus,
&:active {
color: var(--link-color-hover);
}
}
}
:visited {
color: $link-color-visited;
&:hover,
&:focus,
&:active {
color: $link-color-visited-hover;
}
@supports (--css: variables) {
color: var(--link-color-visited);
&:hover,
&:focus,
&:active {
color: var(--link-color-visited-hover);
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $title-font-family;
color: $title-text-color;
font-weight: bold;
margin: 1em 0 0.5em;
opacity: 1;
@supports (--css: variables) {
color: var(--title-text-color);
font-family: var(--title-font-family);
}
}
h1 {
@include text-title-sm;
}
h2 {
@include text-title-xs;
}
h3 {
@include text-title-2xs;
}
h4,
h5,
h6 {
@include text-title-3xs;
}
& :not(hr) + h2 {
margin-top: 1em;
}
code:not([class*='hljs']) {
background-color: #f8f8f8;
border-radius: $border-radius-xs;
color: #000080;
outline: 1px solid rgba(0, 0, 0, 0.05);
padding: 0 0.5ch;
}
}