From b3a0ed69e503bedcd3401443b7eef437ca63bbf0 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Wed, 7 Aug 2024 15:06:26 +0300 Subject: [PATCH] use @2x images on low dpr screens in order to avoid blurry/low quality backgrounds --- src/components/Homepage/homepage.css | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/components/Homepage/homepage.css b/src/components/Homepage/homepage.css index c0509943d..a0b864298 100644 --- a/src/components/Homepage/homepage.css +++ b/src/components/Homepage/homepage.css @@ -16,16 +16,8 @@ html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper):not( html[data-has-hydrated="true"]:not(.docs-wrapper):not(.search-page-wrapper) #__docusaurus { - background: image-set( - url("/img/theme/astronaut.webp") 1x, - url("/img/theme/astronaut@2x.webp") 2x - ) - right -20px top 40px no-repeat, - image-set( - url("/img/theme/glow-light.webp") 1x, - url("/img/theme/glow-light@2x.webp") 2x - ) - right -180px top -150px no-repeat, + background: url("/img/theme/astronaut@2x.webp") right -20px top 40px no-repeat, + url("/img/theme/glow-light@2x.webp") right -180px top -150px no-repeat, var(--ifm-background-color); background-size: 40vw, 60vw, auto; background-blend-mode: normal, difference, normal; @@ -35,16 +27,8 @@ html[data-has-hydrated="true"][data-theme="dark"]:not(.docs-wrapper):not( .search-page-wrapper ) #__docusaurus { - background: image-set( - url("/img/theme/astronaut.webp") 1x, - url("/img/theme/astronaut@2x.webp") 2x - ) - right -20px top 40px no-repeat, - image-set( - url("/img/theme/glow-dark.webp") 1x, - url("/img/theme/glow-dark@2x.webp") 2x - ) - right -180px top -150px no-repeat, + background: url("/img/theme/astronaut@2x.webp") right -20px top 40px no-repeat, + url("/img/theme/glow-dark@2x.webp") right -180px top -150px no-repeat, var(--ifm-background-color); background-size: 40vw, 60vw, auto; background-blend-mode: normal, lighten, normal;