From 44a7c24e640c74b83f5a1e6fc40723b8a29037d4 Mon Sep 17 00:00:00 2001
From: Jabber Developer <jabber.developer@jabber.space>
Date: Tue, 19 Aug 2025 06:17:56 +0200
Subject: [PATCH] Enhance image rendering for clearer display

- 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.
---
 astro.config.mjs      | 7 +++++--
 src/styles/global.css | 7 ++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 3c40bfc..0e03394 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, passthroughImageService } from 'astro/config';
 import starlight from "@astrojs/starlight";
 import startlightBlog from "starlight-blog";
 import starlightScrollToTop from "starlight-scroll-to-top";
@@ -100,5 +100,8 @@ export default defineConfig({
         })
       ]
     })
-  ]
+  ],
+  image: {
+    service: passthroughImageService(),
+  },
 });
diff --git a/src/styles/global.css b/src/styles/global.css
index f01594a..2f0b86d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,10 +14,15 @@
 
 }
 
+img {
+  image-rendering: pixelated; /* Forces sharp rendering on scale. Avoid blurry images */
+}
+
+
 html[data-theme='dark'] {
   .main-pane {
     kbd {
-      background-color: rgba(0, 0, 0, 0);
+      background-color: rgba(95, 67, 67, 0);
       color: rgb(193, 195, 200);
       border: 1px solid rgba(255, 255, 255, 0.1);
       box-shadow: rgba(61, 68, 77, 0.7) 0px -1px 0px 0px inset;