Browse Source

Use a @supports query for logo image-rendering

Unfortunately, right now Chrome only supports "pixelated", and Firefox
only supports "crisp-edges", so this should give the best result across
browsers.
merge-requests/68/head
Chad Birch 6 years ago
parent
commit
16718dba43
  1. 9
      tildes/scss/modules/_site-header.scss

9
tildes/scss/modules/_site-header.scss

@ -26,7 +26,14 @@
.site-header-logo { .site-header-logo {
background-image: url(/favicon-32x32.png); background-image: url(/favicon-32x32.png);
background-repeat: no-repeat; background-repeat: no-repeat;
image-rendering: crisp-edges;
// keep the logo pixelated - "pixelated" is best but Firefox only supports
// "crisp-edges" as of Firefox 68
image-rendering: pixelated;
@supports not (image-rendering: pixelated) {
image-rendering: crisp-edges;
}
padding-left: 40px; padding-left: 40px;
padding-right: 8px; padding-right: 8px;
line-height: 32px; line-height: 32px;

Loading…
Cancel
Save