web-content
web-content copied to clipboard
reactos
Make the ReactOS logo look less blurry on big screens
Had to edit the HTML to get rid of logo-small (what was that ever for?) and not sure if I broke something, so please have a second look.
Also it may or may not be wise to put the height and width statements into a CSS file instead of a style tag.
Why it was blurry?
It was 225x54 pixels, which is the exact size for a 96dpi screen. However, people have screens with higher DPI these days (check your smartphone) and browsers enlarge the entire content on these screens. The logo then looks blurry.
Doing graphics pixel-exact on website was great 10 years ago, but that's no longer the case
.navbar-brand has it's height set (in our current style to 62px). So it would be less hacky to set a style for image .navbar-brand img {height: inherit} and adjust .navbar-brand style if needed. Btw, default height in bootstrap is 50px
Looks like logo image has a transparent gap on the top, but doesn't have a matching bottom gap
.navbar-brandhas it's height set (in our current style to 62px). So it would be less hacky to set a style for image.navbar-brand img {height: inherit}and adjust.navbar-brandstyle if needed.
Sounds nice! Would that resize the image proportionally these days or do I still have to set a matching width myself? (as in early CSS/HTML days)
For me it looks less blurry before this PR. :sweat_smile:
BEFORE:
AFTER:
Would that resize the image proportionally these days or do I still have to set a matching width myself? (as in early CSS/HTML days)
Oh, I don't remember that times :) You can safely set only one dimension
For me it looks less blurry before this PR. 😅
Does any of these CSS properties help: https://css-tricks.com/almanac/properties/i/image-rendering/ ?
Does any of these CSS properties help: https://css-tricks.com/almanac/properties/i/image-rendering/ ?
Tried image-rendering: crisp-edges; - seems not supported by Chrome.
image-rendering: pixelated; looks ugly. :sweat_smile: