New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Increase landscape width of refguide content for readability #3009
Increase landscape width of refguide content for readability #3009
Conversation
The reference guide #content div has `max-width: 62.5em`. This is a bit small for large screens in landscape mode. So, this commit increases the width. For landscape, in FHD window, ideally, `1920px` * `60%` + `8em (div's padding)` = `80em` is a required width for readability. For more wide window, the constant will be smaller than `60%` of the window's width. Thus, `max-width` is desirable to be maximum of `80em` and `60%` of a window. For portrait (phone), the changes for landscape doesn't affect for portrait because it changes `max-width` only. So, this commit set `max-width` to `max(80em, 60%)`. Fixes reactor#2784.
983e92f
to
bd0afac
Compare
The reference guide #content div has `max-width: 62.5em`. This is a bit small for large screens in landscape mode. So, this commit increases the width. For landscape, in FHD window, ideally, `1920px` * `60%` + `8em (div's padding)` = `80em` is a required width for readability. For more wide window, the constant will be smaller than `60%` of the window's width. Thus, `max-width` is desirable to be maximum of `80em` and `60%` of a window. For portrait (phone), the changes for landscape doesn't affect for portrait because it changes `max-width` to be increase. So, this commit set `max-width` to `max(80em, 60%)`. Fixes reactor#2784.
bd0afac
to
4037bad
Compare
The reference guide #content div has `max-width: 62.5em`. This is a bit small for large screens in landscape mode. So, this commit increases the width. For landscape, in FHD (1920x1080) window, ideally, `1920px` * `60%` + `8em (div's padding)` = `80em` is a required width for readability. For more wide window, the constant will be smaller than `60%` of the window's width. Thus, `max-width` is desirable to be maximum of `80em` and `60%` of a window. For portrait (phone), the changes for landscape doesn't affect for portrait because it changes `max-width` to be increase. So, this commit set `max-width` to `max(80em, 60%)`. Fixes reactor#2784.
4037bad
to
d8bcc28
Compare
The mobile / portrait version will probably need a more in-depth investigation and separate issue... the width change in desktop / landscape mode looks good to me. if you want to try and investigate the above css issue in a separate PR, that will be greatly appreciated @tmyksj |
Thank you very much for your review and approval.
Yes, I will try it. Could you give me the #issue, please? |
Refs #2784
I attempted to increase width of refguide content for readability as below. Could you review this, please?
For landscape
At first,
we cannot set
max-width
to60%
because width may be smaller than62.5em
, e.g., FHD (1920x1080) window's width is (1920px
-20em (padding for header)
) *60%
=60em
<62.5em
.In FHD window, ideally,
1920px
*60%
+8em (div's padding)
=80em
is a required width for readability.For more wide window,
the constant will be smaller than
60%
of the window's width.Thus,
max-width
is desirable to be maximum of80em
and60%
of a window.For portrait (phone)
The changes for landscape doesn't affect for portrait because it changes
max-width
to be increase.---
So, I set
max-width
tomax(80em, 60%)
.Note:
max()
is supported by most popular browsers exclude Internet Explorer.https://developer.mozilla.org/en-US/docs/Web/CSS/max
Current: html.tar.gz
Modified: html.tar.gz