doc: make version picker usable on mobile

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 <[email protected]> Reviewed-By: Antoine du Hamel <[email protected]> Reviewed-By: Tobias Nießen <[email protected]> Reviewed-By: James M Snell <[email protected]> Reviewed-By: Derek Lewis <[email protected]>
nodejs · Oct 4, 2021 · 779dfd1 · 779dfd1
1 parent 80fdedd
commit 779dfd1
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -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;
 }
@@ -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;