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