Skip to content

Commit

Permalink
doc: make version picker usable on mobile
Browse files Browse the repository at this point in the history
This makes the version picker usable on mobile devices.
Previously, the version picker was difficult to select from. This
change makes the #gtoc > ul > li elements have a display
of `block` instead of `inline`.

PR-URL: #39958
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
  • Loading branch information
evanlucas authored and nodejs-github-bot committed Sep 22, 2021
1 parent 24cc239 commit c89d519
Showing 1 changed file with 15 additions and 13 deletions.
28 changes: 15 additions & 13 deletions doc/api_assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -165,19 +165,6 @@ em code {
line-height: 1.5rem;
}

#gtoc > ul > li {
display: inline;
border-right: 1px currentColor solid;
margin-right: .4rem;
padding-right: .4rem;
}

#gtoc > ul > li:last-child {
border-right: none;
margin-right: 0;
padding-right: 0;
}

li.version-picker {
position: relative;
}
Expand Down Expand Up @@ -741,6 +728,21 @@ kbd {
outline: var(--brand3) dotted 2px;
}

@media only screen and (min-width: 577px) {
#gtoc > ul > li {
display: inline;
border-right: 1px currentColor solid;
margin-right: .4rem;
padding-right: .4rem;
}

#gtoc > ul > li:last-child {
border-right: none;
margin-right: 0;
padding-right: 0;
}
}

@media only screen and (max-width: 1024px) {
#content {
overflow: visible;
Expand Down

0 comments on commit c89d519

Please sign in to comment.