Use a pixelated rendering instead of default blur

unode · fmichonneau · commit 74d1c065a7de · 2022-02-22T16:43:27.000+01:00
Workaround to a CSS resize blur rendering problem affecting Google Chrome/Chromium when the resolution of the image is larger than the image view See https://stackoverflow.com/a/69156216 and carpentries-incubator/jekyll-pages-novice#274 for additional context.
diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
@@ -321,6 +321,9 @@ span.fold-unfold {
   opacity: 0.5;
 }
 
+img {
+  image-rendering: pixelated;
+}
 
 p.image-with-shadow img,
 img.image-with-shadow {

Original file line number	Diff line number	Diff line change
`@@ -321,6 +321,9 @@ span.fold-unfold {`
`321`	`321`	`opacity: 0.5;`
`322`	`322`	`}`
`323`	`323`
	`324`	`+img {`
	`325`	`+ image-rendering: pixelated;`
	`326`	`+}`
`324`	`327`
`325`	`328`	`p.image-with-shadow img,`
`326`	`329`	`img.image-with-shadow {`