109 lines
2.1 KiB
CSS
109 lines
2.1 KiB
CSS
@layer components.blocks {
|
|
.footnote-ref {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7em;
|
|
font-weight: var(--font-weight-emphasis);
|
|
line-height: 1;
|
|
|
|
& a {
|
|
@mixin px var(--size-1);
|
|
|
|
color: var(--color-text-primary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
&:focus-visible {
|
|
@mixin focus-ring;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footnotes {
|
|
--footnote-marker: 1.5rem;
|
|
|
|
@mixin mt var(--space-10);
|
|
@mixin pt var(--space-6);
|
|
@mixin border-t var(--border-boundary), solid, var(--color-border-strong);
|
|
|
|
counter-reset: fn;
|
|
|
|
& .footnotes__title {
|
|
@mixin typo_label;
|
|
@mixin mt var(--size-0);
|
|
@mixin mb var(--size-5);
|
|
}
|
|
|
|
& ol {
|
|
@mixin ma var(--size-0);
|
|
@mixin pl var(--size-0);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4);
|
|
list-style: none;
|
|
|
|
& li {
|
|
@mixin typo_body-small;
|
|
|
|
counter-increment: fn;
|
|
|
|
display: grid;
|
|
grid-template-columns: var(--footnote-marker) minmax(0, 1fr);
|
|
column-gap: var(--slot-prose-gap);
|
|
|
|
color: var(--color-text-secondary);
|
|
|
|
&::before {
|
|
content: counter(fn);
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-emphasis);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
&:target {
|
|
color: var(--color-text-primary);
|
|
|
|
&::before {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .footnotes__note {
|
|
@mixin ma var(--size-0);
|
|
}
|
|
|
|
& a {
|
|
color: var(--color-text-link);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: var(--size-1);
|
|
text-underline-offset: var(--size-2);
|
|
|
|
&:visited {
|
|
color: var(--color-text-link-visited);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--color-text-link-hover);
|
|
}
|
|
|
|
&:focus-visible {
|
|
@mixin focus-ring;
|
|
}
|
|
}
|
|
|
|
& a.footnotes__back {
|
|
color: var(--color-text-quiet);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|