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

@@ -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(),
+  },
 });

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;