Make the ReactOS logo look less blurry on big screens

[ColinFinck]

No description provided.

[Extravert-ir]

Why it was blurry?

[ColinFinck]

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.

[ColinFinck]

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

[Extravert-ir]

.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

[Extravert-ir]

Looks like logo image has a transparent gap on the top, but doesn't have a matching bottom gap

[ColinFinck]

.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.

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)

[binarymaster]

For me it looks less blurry before this PR. 😅

BEFORE:

AFTER:

[Extravert-ir]

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

[ColinFinck]

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/ ?

[binarymaster]

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. 😅

[vicmarcal]

Problem basically is that we're enforcing Site.Params.logo por any kind of resolution. Reactos_0.png seems to be a 227x54 image, and this is cool for small devices but not for bigger resolutions.
The trick here is to use "srcset" instead "src": <img srcset=" {{ .Site.BaseURL }}{{.Site.Params.logo}} 1x, {{.site.BaseUrl }}{{.Site.Params.biggerlogo}} 2x" src="{{.site.BaseUrl }}{{.Site.Params.biggerlogo}}" alt="{{ .Title }}>
And a Bigger Logo is needed. This is the easiest trick, otherwise we would need to use "size".

[binarymaster]

We probably need to use SVG then.