Andy Smith
32 lines
658 B
CSS
32 lines
658 B
CSS
@layer components {
|
|
.heading__link {
|
|
--opacity: 0.5;
|
|
--size: 0.8em;
|
|
|
|
background: url(link.svg) no-repeat center bottom 0.2em;
|
|
background-size: var(--size);
|
|
block-size: 1em;
|
|
color: var(--color-link);
|
|
display: inline-flex;
|
|
font-size: var(--size);
|
|
inline-size: var(--size);
|
|
padding: 1em 0 0;
|
|
opacity: var(--opacity);
|
|
overflow: hidden;
|
|
transition: opacity 300ms ease;
|
|
vertical-align: middle;
|
|
|
|
@media (hover: hover) {
|
|
--opacity: 0;
|
|
|
|
:is(h1, h2, h3, h4, h5, h6):hover & {
|
|
--opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
}
|