Improve the styling of collapsible nav items (#10692)

I've been a bit unhappy with the collapsible project section. I think it
feels a little crowded and consequently hard to read. Here, we tweak the
styling to decrease the font size a little and increase the margins. I
aimed for a subtle change — we can change it more drastically later if
we want.

Before
<img width="1414" alt="Screenshot 2025-01-16 at 12 35 38 PM"
src="https://github.com/user-attachments/assets/820b87c6-2988-4170-87ae-cec9a0f3b4fb"
/>
After
<img width="1414" alt="Screenshot 2025-01-16 at 12 35 16 PM"
src="https://github.com/user-attachments/assets/0d0cdb6b-a6c6-4fe1-a7f2-48f6fd70d5bc"
/>
This commit is contained in:
Zanie Blue 2025-01-16 15:02:43 -06:00 committed by GitHub
parent 45455b33c0
commit 33446091d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 0 deletions

View File

@ -158,6 +158,18 @@ because the nav is in a hamburger menu anyway
margin-bottom: 0.75em; margin-bottom: 0.75em;
margin-top: 1em; margin-top: 1em;
} }
/* Decrease the font size of items in a collapsible section */
.md-nav__item--section> .md-nav > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list {
font-size: 0.725rem;
}
/* Increase top margin on the first item of a collapsible section */
.md-nav__item--section> .md-nav > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item:first-of-type {
margin-top: 0.5em;
}
/* Increase bottom margin on the last item of a collapsible section */
.md-nav__item--section> .md-nav > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item:last-of-type {
margin-bottom: 0.575em;
}
/* Increase the size of the first nav item to match the sections /* Increase the size of the first nav item to match the sections
It has no children, so it is not considered a section */ It has no children, so it is not considered a section */
.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type { .md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {