Design/blocks layout #60
@@ -521,19 +521,18 @@ main:focus {
|
|||||||
background: var(--color-accent);
|
background: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile: the stacked links in the open menu become full-width rows with a
|
/* Mobile: the open menu stacks the links centred, each as wide as its text -- so
|
||||||
rounded highlight instead of pills, and the green stroke shrinks to a short
|
they stay the same pills as on the desktop, with the stroke under the whole word.
|
||||||
mark at the start, so a long row does not get a long line. Same global
|
Only taller, for a comfortable tap target; the stroke moves up with the extra
|
||||||
placement, same NavLink reason as above. */
|
padding so it still sits right under the text, not at the pill's edge. Same
|
||||||
|
global placement, same NavLink reason as above. */
|
||||||
@media (max-width: 40rem) {
|
@media (max-width: 40rem) {
|
||||||
.main-nav a {
|
.main-nav a {
|
||||||
padding: 0.6rem var(--space-3);
|
padding: 0.6rem var(--space-3);
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav a.active::after {
|
.main-nav a.active::after {
|
||||||
right: auto;
|
bottom: 0.55rem;
|
||||||
width: 1.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user