add 'pixelated' class to sprites/in-rom screenshots (fix #142)

Author: avivace

src/part1/palettes.md

@@ -26,7 +26,11 @@ I put air quotes because "black" isn't true black, and "white" isn't true white.
 Further, note that the original Game Boy had shades of green, but the later Game Boy Pocket's screen produced shades of gray instead.
 And, even better, the Game Boy Color will automatically colorize games that lack Game Boy Color support!
 
-![Screenshot of our Hello World, automatically colorized by the Game Boy Color](../assets/img/hello_world_autocolor.png)
+<img
+  class="pixelated"
+  src="../assets/img/hello_world_autocolor.png"
+  alt="Screenshot of our Hello World, automatically colorized by the Game Boy Color"
+/>
 
 All this to say, one shouldn't expect specific colors out of a Game Boy game[^console_detection], just four more or less bright colors.
 
@@ -86,8 +90,12 @@ We would get thus:
 (I'm not giving the value in hexadecimal, use this as an opportunity to exercise your bin-to-hex conversions!)
 
 <figure>
-	<img src="../assets/img/hello_world_inv.png" alt="Screenshot of the color-inverted Hello World">
-	<figcaption>If you got it right, it should look like this!</figcaption>
+  <img
+    class="pixelated"
+    src="../assets/img/hello_world_inv.png"
+    alt="Screenshot of the color-inverted Hello World"
+  >
+  <figcaption>If you got it right, it should look like this!</figcaption>
 </figure>
 
 If you go to the Tile Viewer and change "Palette" to "Gray", you will notice that the tile data stays the same regardless of how the palette is modified!

src/part1/tilemap.md

@@ -47,7 +47,11 @@ We will explain this in more detail in Part Ⅱ.
 Here we will be able to see the power of tile reuse in full force.
 As a convenience and a refresher, here are the tiles our Hello World loads into VRAM:
 
-![Enlarged view of the tiles loaded in VRAM](../assets/img/hello_world_tiles.png)
+<img
+  class="pixelated"
+  src="../assets/img/hello_world_tiles.png"
+  alt="Enlarged view of the tiles loaded in VRAM"
+/>
 
 You can see that we only loaded a single "blank" tile ($00, the first aka. top-left one), but it can be repeated to cover the whole background at no extra cost!
 

src/part2/bcd.md

@@ -64,7 +64,7 @@ Of course, we still need to call it on impact. To do this, we add a call to `Inc
 
 Before we can display the score we'll need to add some graphics for the numbers 0-9. We already have some ready-made digits for this project, so you can copy [this premade file](https://github.com/gbdev/gb-asm-tutorial/raw/master/unbricked/bcd/digit-tileset.asm), and paste it at the end of your tile set, just before the `TilesEnd` label. Your tile set will look like this:
 
-![Screenshot of tile set with digits added at the end](../assets/part2/img/bcd-tileset.png)
+<img src="../assets/part2/img/bcd-tileset.png" alt="Screenshot of tile set with digits added at the end" class="pixelated">
 
 So we can easily remember where the digits start, let's add a constant called `DIGIT_OFFSET` to point us to where the digits are relative to the start of the tile set: `$1A`
 

src/part2/getting-started.md

@@ -90,7 +90,12 @@ Combining these constants must be done using `|`, the *binary "or"* operator; we
 There's one last thing we need before we can build the ROM, and that's the graphics.
 We will draw the following screen:
 
-![Layout of unbricked](../assets/part2/img/tilemap.png)
+<img
+  class="pixelated"
+  src="../assets/part2/img/tilemap.png"
+  alt="Layout of unbricked"
+  width="300px"
+/>
 
 In `hello-world.asm`, tile data had been written out by hand in hexadecimal; this was to let you see how the sausage is made at the lowest level, but *boy* is it impractical to write!
 This time, we will employ a more friendly way, which will let us write each row of pixels more easily.
@@ -125,7 +130,12 @@ $ rgbfix -v -p 0xFF unbricked.gb
 
 If you run this in your emulator, you should see the following:
 
-![Screenshot of our game](../assets/part2/img/screenshot.png)
+<img
+  class="pixelated"
+  src="../assets/part2/img/screenshot.png"
+  alt="Screenshot of our game"
+  width="300px"
+/>
 
 That white square seems to be missing!
 You may have noticed this comment earlier, somewhere in the tile data:
@@ -139,19 +149,31 @@ You can use one of the following pre-made logos, or try coming up with your own!
 
 - **RGBDS Logo**
 
-  ![The RGBDS Logo](../assets/part2/img/rgbds.png)
+  <img
+  class="pixelated"
+  src="../assets/part2/img/rgbds.png"
+  alt="The RGBDS Logo"
+  />
 
   [Source](https://github.com/gbdev/gb-asm-tutorial/raw/master/unbricked/getting-started/rgbds.asm)
 
 - **Duck**
 
-  ![A pixel-art duck](../assets/part2/img/duck.png)
+  <img
+  class="pixelated"
+  src="../assets/part2/img/duck.png"
+  alt="A pixel-art duck"
+  />
 
   [Source](https://github.com/gbdev/gb-asm-tutorial/raw/master/unbricked/getting-started/duck.asm)
 
 - **Tail**
 
-  ![A silhouette of a tail](../assets/part2/img/tail.png)
+  <img
+  class="pixelated"
+  src="../assets/part2/img/tail.png"
+  alt="A silhouette of a tail"
+  />
 
   [Source](https://github.com/gbdev/gb-asm-tutorial/raw/master/unbricked/getting-started/tail.asm)
 

src/part2/title-screen.md

@@ -2,7 +2,11 @@
 
 Let's make our game more official and give it a title screen! First, copy the tileset and tilemap found [here](https://github.com/gbdev/gb-asm-tutorial/raw/master/unbricked/title-screen/tilemap-titlescreen.asm) and paste it at the end of your code. This will make a title screen that looks like so: 
 
-![Title Screen](../assets/part2/img/title-screen.png)
+<img
+  class="pixelated"
+  src="../assets/part2/img/title-screen.png"
+  alt="Title Screen"
+/>
 
 Then copy and paste the following after waiting for VBlank: