diff options
| author | Stan Lo <[email protected]> | 2024-08-26 23:02:29 +0100 |
|---|---|---|
| committer | git <[email protected]> | 2024-08-26 22:02:33 +0000 |
| commit | ec61dbd98ecaf153e941cbaecdb6ad36d5af4672 (patch) | |
| tree | 2bf81ff7878a55cbe50c154c8bd9e1c94ccedd3c /lib/rdoc/generator/template | |
| parent | 8c01dec8275739f247eedc505723c6585da13c4b (diff) | |
[ruby/rdoc] Make darkfish more responsive and readable on mobile
devices
(https://github.com/ruby/rdoc/pull/1162)
- Make the sidebar toggle fixed on all devices
- Prevent default zooming on mobile devices
- Improve sidebar opening on mobile devices
https://github.com/ruby/rdoc/commit/95b6cfb64f
Diffstat (limited to 'lib/rdoc/generator/template')
| -rw-r--r-- | lib/rdoc/generator/template/darkfish/css/rdoc.css | 38 |
1 files changed, 32 insertions, 6 deletions
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css index f8d1bc3df0..0032ac172a 100644 --- a/lib/rdoc/generator/template/darkfish/css/rdoc.css +++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css @@ -219,7 +219,10 @@ nav a:hover { #navigation-toggle { z-index: 1000; font-size: 2em; - position: absolute; + display: block; + position: fixed; + top: 10px; + left: 20px; } #navigation-toggle[aria-expanded="true"] { @@ -227,11 +230,6 @@ nav a:hover { left: 250px; } -#navigation-toggle[aria-expanded="false"] { - top: 10px; - left: 20px; -} - nav ul li details { position: relative; padding-right: 1.5em; /* Add space for the marker on the right */ @@ -265,6 +263,7 @@ main { font-size: 16px; line-height: 1.6; color: var(--text-color); + box-sizing: border-box; } @media (min-width: 1024px) { @@ -715,4 +714,31 @@ main .attribute-access-type { font-family: var(--font-code); } +@media (max-width: 480px) { + nav { + width: 100%; + } + + main { + margin: 1em auto; + padding: 0 1em; + max-width: 100%; + } + + #navigation-toggle { + right: 10px; + left: auto; + } + + #navigation-toggle[aria-expanded="true"] { + left: auto; + } + + table { + display: block; + overflow-x: auto; + white-space: nowrap; + } +} /* @end */ + |