avgupt commented on a change in pull request #271: Fixes Wastage of screen real-estate on large displays URL: https://github.com/apache/camel-website/pull/271#discussion_r402981749
########## File path: antora-ui-camel/src/css/vars.css ########## @@ -131,9 +132,9 @@ --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height)); --nav-width: calc(270 / var(--rem-base) * 1rem); --doc-max-width: calc(720 / var(--rem-base) * 1rem); - --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem); + --doc-max-width--desktop: calc(828 * var(--vw-base--desktop) * 1vw); --static-max-width: calc(720 / var(--rem-base) * 1rem); - --static-max-width--desktop: calc(1140 / var(--rem-base) * 1rem); + --static-max-width--desktop: calc(1140 * var(--vw-base--desktop) * 1vw); Review comment: I have calculated the variable --vw-base--desktop using a viewport width of 1300 (which we can change when we decide a standard value). As explained [here](https://stackoverflow.com/questions/28295072/how-can-i-convert-px-to-vw-in-javascript), the variable `--vw-base--desktop` stores the value of 1px in vw. To get the required max-width in vw, I multiplied the number in px by the variable `--vw-base--desktop`. Then I multiplied the number by 1vw to get the resulting measure in vw. ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
