Eryn Wells
cb8ad426d5
Draw only one hash for headings, and place them in the gutter in wide layouts, or trailing the heading text in narrow layouts. Do this with grid in the wide version, and flexbox in the narrow layout. Add a --text-color-light CSS variable for content that should be lighter than --text-color-secondary.
55 lines
950 B
CSS
55 lines
950 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: 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);
|
|
}
|
|
}
|
|
}
|
|
}
|