devs/jabber.space
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance image rendering for clearer display

Browse Source 
- Add `image-rendering: pixelated` to ensure sharpness of images in Chromium-based browsers

Avoid using `Sharp` service since it's not configurable. It overcompresses images, reducing their quality. Preserving image quality is essential for tutorials and especially for theme gallery.
This commit is contained in:
Jabber Developer
2025-08-19 06:17:56 +02:00
parent d705233441
commit 44a7c24e64
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
astro.config.mjs
View File

@@ -1,5 +1,5 @@
// @ts-check // @ts-check
import { defineConfig } from "astro/config"; import { defineConfig, passthroughImageService } from 'astro/config';
import starlight from "@astrojs/starlight"; import starlight from "@astrojs/starlight";
import startlightBlog from "starlight-blog"; import startlightBlog from "starlight-blog";
import starlightScrollToTop from "starlight-scroll-to-top"; import starlightScrollToTop from "starlight-scroll-to-top";
@@ -100,5 +100,8 @@ export default defineConfig({
}) })
] ]
}) })
] ],
image: {
service: passthroughImageService(),
},
}); });

7
src/styles/global.css
View File

@@ -14,10 +14,15 @@
} }
img {
image-rendering: pixelated; /* Forces sharp rendering on scale. Avoid blurry images */
}
html[data-theme='dark'] { html[data-theme='dark'] {
.main-pane { .main-pane {
kbd { kbd {
background-color: rgba(0, 0, 0, 0); background-color: rgba(95, 67, 67, 0);
color: rgb(193, 195, 200); color: rgb(193, 195, 200);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: rgba(61, 68, 77, 0.7) 0px -1px 0px 0px inset; box-shadow: rgba(61, 68, 77, 0.7) 0px -1px 0px 0px inset;