81 lines
1.6 KiB
CSS
81 lines
1.6 KiB
CSS
@layer components.blocks {
|
|
.sidenote-ref {
|
|
@mixin px var(--size-1);
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75em;
|
|
font-weight: var(--font-weight-emphasis);
|
|
color: var(--color-text-primary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
&:focus-visible {
|
|
@mixin focus-ring;
|
|
}
|
|
}
|
|
|
|
.sidenote {
|
|
@mixin typo_body-small;
|
|
@mixin pt var(--size-3);
|
|
@mixin border-t var(--border-card), solid, var(--color-border-strong);
|
|
|
|
scroll-margin-block-start: calc(var(--layout-header-height) + var(--size-8));
|
|
color: var(--color-text-secondary);
|
|
|
|
/* Hangs, so the first line starts against the marker. */
|
|
& .sidenote__marker {
|
|
@mixin me var(--size-4);
|
|
|
|
float: inline-start;
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-emphasis);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
&:target {
|
|
color: var(--color-text-primary);
|
|
|
|
& .sidenote__marker {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidenote--optional {
|
|
@mixin border-t var(--border-hairline), solid, var(--color-border-normal);
|
|
|
|
color: var(--color-text-tertiary);
|
|
|
|
& .sidenote__marker {
|
|
color: var(--color-text-quiet);
|
|
}
|
|
}
|
|
|
|
.sidenote--example {
|
|
& .sidenote__marker {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
@media (--bp-tablet-down) {
|
|
.sidenote {
|
|
@mixin my var(--space-6);
|
|
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (--bp-desktop) {
|
|
.sidenote {
|
|
@mixin my var(--size-0);
|
|
|
|
position: absolute;
|
|
inset-inline-start: calc(100% + var(--layout-gutter));
|
|
width: var(--layout-margin-width);
|
|
}
|
|
}
|
|
}
|