55 lines
970 B
CSS
55 lines
970 B
CSS
|
|
.heading,
|
|
.heading__content
|
|
{
|
|
grid-column: main-start / main-end;
|
|
}
|
|
|
|
.heading.with-anchor {
|
|
display: block grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: gutter-left-start / main-end;
|
|
|
|
a {
|
|
transition: 0.3s color;
|
|
}
|
|
|
|
.heading__anchor a {
|
|
color: transparent;
|
|
}
|
|
|
|
&:hover .heading__anchor a {
|
|
color: var(--text-color-secondary);
|
|
}
|
|
|
|
.heading__anchor {
|
|
align-self: center;
|
|
font-size: max(var(--text-m), 80%);
|
|
grid-column: gutter-left-start / gutter-left-end;
|
|
justify-content: center;
|
|
|
|
a:hover {
|
|
color: var(--text-color-link);
|
|
text-decoration: none;
|
|
transition: 0.3s color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.heading.with-anchor {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
grid-column: main-start / main-end;
|
|
|
|
.heading__anchor {
|
|
grid-column: auto;
|
|
font-weight: normal;
|
|
order: 99;
|
|
|
|
a {
|
|
color: var(--text-color-light);
|
|
}
|
|
}
|
|
}
|
|
}
|