improved blog media layout

main/Gemfile

@@ -6,4 +6,5 @@ git_source(:github) { |repo_name| "https://github.com/#{repo_name}" }
 
 gem "jekyll"
 gem "webrick"
-gem 'jekyll-feed'
+gem "jekyll-feed"
+gem "jekyll-postfiles"

main/Gemfile.lock

@@ -31,6 +31,8 @@ GEM
       terminal-table (~> 2.0)
     jekyll-feed (0.16.0)
       jekyll (>= 3.7, < 5.0)
+    jekyll-postfiles (3.1.0)
+      jekyll (>= 3.8.6, < 5)
     jekyll-sass-converter (2.2.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
@@ -66,6 +68,7 @@ PLATFORMS
 DEPENDENCIES
   jekyll
   jekyll-feed
+  jekyll-postfiles
   webrick
 
 BUNDLED WITH

main/_config.yaml

@@ -1,7 +1,8 @@
-permalink: blog/:title
+permalink: blog/:title.html
 
 plugins:
   - jekyll-feed
+  - jekyll-postfiles
 
 # markdown formatting
 kramdown:

main/_posts/future_actually_additions/2020-11-23-future_actually_additions.md

@@ -28,11 +28,11 @@ MiKeY and Rid are going to port Actually Additions to **Forge** for **Minecraft
 
 The art overhaul has already started (and even been finished, I believe), and because it is *gorgeous*, I'm going to show you some of the preview pictures that Rid has sent me right now. Enjoy.
 
-<img src="/blog/res/future_actually_additions/1.png" width="100%">
+![](faa_1.png)
 
-<img src="/blog/res/future_actually_additions/2.png" width="100%">
+![](faa_2.png)
 
-<img src="/blog/res/future_actually_additions/3.png" width="100%">
+![](faa_3.png)
 
 Don't they look *so good*?
 

main/_posts/rock_bottom_mod/2019-10-03-rock_bottom_mod.md

@@ -21,7 +21,7 @@ Okay, finding [a build of the game](https://github.com/RockBottomGame/RockBottom
 
 Hm. Okay.  
 So something's already broken.  
-<img src="/blog/res/rock_bottom_mod/1.png" width="100%">
+![](rbm_1.png)
 
 It looks like here
 ```
@@ -35,7 +35,7 @@ That didn't seem to fix it either. Huh. Taking a look at [the maven](https://mav
 
 Okay, it's now the next day and it looks like the maven has been fixed, which is nice. So all the compile issues are finally resolved, I put the build into the `/gamedata` folder like explained in the tutorial, I renamed the examplemod to `NaturesAura`, and I can now finally try running the game!
 
-<img src="/blog/res/rock_bottom_mod/2.png" width="100%">
+![](rbm_2.png)
 Ah! That worked quite well in the end.
 
 # Actually making something
@@ -84,7 +84,7 @@ public void preInit(IGameInstance game, IApiHandler apiHandler, IEventHandler ev
 So far, so good. Let's figure out how to add a texture to the thing.  
 I somewhat remember that I made a horrible json-based asset system (instead of just loading all of the assets in the mod's jar automatically), so I'm going to try to add my tile to the `assets.json` file the example mod provided me with and also add a texture into the actual file system.
 
-<img src="/blog/res/rock_bottom_mod/3.png" width="100%">
+![](rbm_3.png)
 This is the folder structure I decided on. I also created a quick golden version of the game's leaves texture by going to the [asset repository](https://github.com/RockBottomGame/Assets), stealing the leaves texture and recoloring it to be golden-ish.
 
 Also, I put this in the assets file, but I have no idea if that's actually the right path. We'll find out.
@@ -109,7 +109,7 @@ public static final Tile GOLDEN_LEAVES = new TileGoldenLeaves(NaturesAura.create
 ```
 *Crisis averted*.
 
-<img src="/blog/res/rock_bottom_mod/4.png" width="100%">
+![](rbm_4.png)
 Yaaay, it... worked? *Somewhat?*
 
 You're probably yelling at your screen by now, but yes, I finally noticed it as well: My assets path says `examplemod` instead of `naturesaura`. Easy fix, though.
@@ -127,7 +127,7 @@ While I'm at it though, I can also add a localization entry for the golden leave
 
 Let's try again.
 
-<img src="/blog/res/rock_bottom_mod/5.png" width="100%">
+![](rbm_5.png)
 Ta-da! Success, at last.
 
 After some investigation, I realized that Rock Bottom's normal leaves can be walked through, so let's see how to make that happen. Typing `@Override` while in the `TileGoldenLeaves` class causes my IDE to list all of the methods I can override. Among them are two that interest me:
@@ -144,13 +144,13 @@ public BoundBox getBoundBox(IWorld world, TileState state, int x, int y, TileLay
 ```
 It seems like this is what I have to do to make the tile walk-through...able. Let's try it out.
 
-<img src="/blog/res/rock_bottom_mod/6.png" width="100%">
+![](rbm_6.png)
 Yay, that seems to have worked. Great.
 
 # Making an item
 Now that I have somewhat of a grip of this whole Rock Bottom stuff again, I'm quickly going to make an item. I won't bore you with the details as it's pretty similar to making a tile, but the gist of it is this: I made an `ItemGoldPowder` class that extends `ItemBasic`, and I initialized and registered an instance of that in my newly created `Items` class, of which I created an instance in my mod class's `preInit` method so that it gets initialized at the right time. Also, I did all of the annoying asset mumbo jumbo.
 
-<img src="/blog/res/rock_bottom_mod/7.png" width="100%">
+![](rbm_7.png)
 *Oh, C#, you've ruined me.*
 
 # Making stuff happen
@@ -172,7 +172,7 @@ While writing this code, I quickly remembered that Rock Bottom has a tile state
 
 Let's try it out! ...yea, no. The Java version that gradle uses to compile a Rock Bottom mod isn't new enough yet: You can't use the `var` keyword. Oh, my poor, poor C# soul. So let's swap that `var` out for a `TileState`.
 
-<img src="/blog/res/rock_bottom_mod/8.gif" width="100%">
+![](rbm_8.gif)
 Yay, it works! *Except that, in the gif, the mouse position is weirdly offset for some reason. It's correct in person, I promise!*
 
 # Conclusion
@@ -180,6 +180,6 @@ So yea, that was the start of my adventure back into Java, back into my old game
 
 I think it's important to remember that, as a developer (especially an indie developer), you don't have to code everything perfectly or work stuff out correctly the first try. I mean, heck, this is my own game, and I completely forgot how to make a mod for it. But it was fun to figure it out again, and to get back into something I made two years ago.
 
-Oh, also, if you really want, [here's a build of the mod](https://ellpeck.de/blog/res/rock_bottom_mod/NaturesAuraRockBottom-0.1.jar) that you can try out yourself, as the game is now actually open source and available to everyone! I created this jar with the command `gradlew build`, and all you have to do to run it is [download the game](https://github.com/RockBottomGame/RockBottom/releases), run it once, and then stick the mod jar into its `mods` folder. It really doesn't do that much right now, though, so I don't know why you'd bother.
+Oh, also, if you really want, [here's a build of the mod](NaturesAuraRockBottom-0.1.jar) that you can try out yourself, as the game is now actually open source and available to everyone! I created this jar with the command `gradlew build`, and all you have to do to run it is [download the game](https://github.com/RockBottomGame/RockBottom/releases), run it once, and then stick the mod jar into its `mods` folder. It really doesn't do that much right now, though, so I don't know why you'd bother.
 
 As always, thanks for reading!

main/_posts/small_projects/2019-05-01-small_projects.md

@@ -8,11 +8,11 @@ discuss: https://twitter.com/Ellpeck/status/1123651624201871360
 
 As it turns out, I struggle a lot with maintaining interest and motivation for working on bigger projects like my [other game](https://rockbottom.ellpeck.de/) or my Minecraft mods. However, an easy fix for that would be to just start less big projects and focus more on smaller ones, like **Foe Frenzy**. Foe Frenzy is a game I've been working on for about a month now.
 
-<img src="/blog/res/small_projects/contrib.png" width="100%">
+![](contrib.png)
 
 The basic gameplay is finished, as is enough content for my friends to have been testing it for the last week or so and saying that they enjoy it quite a bit, both visually and gameplay-wise. I thought I'd make a blog post about my process of working on it, showing what it's about and what I did this time around to make sure that I don't get burnt out with it.
 
-<img src="/blog/res/small_projects/overview.png" width="100%">
+![](overview.png)
 
 _Foe Frenzy is a fast-paced fighting game where you battle up to three of your friends with random, short-lasting items in an attempt to be the last survivor._
 
@@ -22,9 +22,9 @@ A lot of times, I'll find myself getting stuck on making art for my game project
 
 So, this time around, what I did instead of doing that all over again, I just decided to go with _simple art_ instead. For example, as you can see, all the tiles in the world only have 8x8 pixels, and all of them follow a really simple pattern: The top and left side are slightly darker, giving the world a really tiled feel and making the levels seem like they were made with actual building bricks. As well as that, the character movement animations are _really_ simple.
 
-<img src="/blog/res/small_projects/wobble.gif" width="100%">
+![](wobble.gif)
 
-<img src="/blog/res/small_projects/water_wobble.gif" width="100%">
+![](water_wobble.gif)
 
 Both of those aren't even real animations per se, because what they really are is just the player's static texture rotating around a sin wave that is centered on the player's feet. It looks cute, though.
 
@@ -35,7 +35,7 @@ What I did for this game instead is just kind of... let the code take me where i
 
 For example, the map parsing system is really simple: It consists of an XML file, which stores all the important information about a map like its name and the positions that players spawn in, and a png file.
 
-<img src="/blog/res/small_projects/map.png" width="100%">
+![](map.png)
 
 Each pixel in the file determines which tile will be put at its location. In this instance, black is deep water, blue is shallow water, yellow is sand and green is grass. And the cool thing is that this is really easy to deal with (reading pixels is a simple thing that's present in almost every game framework), because changing something on the map just takes an image editing program, no custom map editor needed.
 
@@ -57,14 +57,14 @@ Keep updated about the game on [my Discord](https://ellpeck.de/discord) as well
 
 To finish off, here are some more pictures of the game for your enjoyment.
 
-<img src="/blog/res/small_projects/cave.png" width="100%">
+![](cave.png)
 A cave being lit up by torches and lava. This is where a rubber hammer can spawn that you can use to knock the other players into the lava.
 
-<img src="/blog/res/small_projects/map_select.png" width="100%">
+![](map_select.png)
 The map selection screen, where each player can choose the map that they'd like to play most.
 
-<img src="/blog/res/small_projects/flame_thrower.gif" width="100%">
+![](flame_thrower.gif)
 The favorite item I've added so far: The flamethrower.
 
-<img src="/blog/res/small_projects/win.gif" width="100%">
+![](win.gif)
 Killing the last person alive and winning

main/_posts/tiny_life_one_year/2021-5-24-tiny_life_one_year.md

@@ -8,7 +8,7 @@ discuss: https://ellpeck.itch.io/tiny-life/devlog/256839/one-year-of-tiny-life-a
 
 On this day, exactly one year ago, I made my first commit to the Tiny Life repository. Since that first commit, which included some code for the isometric perspective that the game uses, Tiny Life has come *a long way*.
 
-<img src="/blog/res/tiny_life_one_year/commit.png" width="100%">
+![](commit.png)
 
 If you don't recall just how long of a way it has come, or you don't even know about the game yet: Tiny Life is, as I wrote on its [itch page](https://ellpeck.itch.io/tiny-life):
 
@@ -20,7 +20,7 @@ So, to celebrate, and because of a Twitter poll I did a while ago that made it c
 
 While this blog post *does* include a lot of programming-related humor, most of the comments are still funny and a bit ridiculous out of context, so you don't have to be a programmer to laugh along by any means.
 
-<img src="/blog/res/tiny_life_one_year/search.png" width="100%">
+![](search.png)
 
 That should do for now. *Oh, boy.* Note that I'll just be going through them using the order they appear in these search results, so the funniest ones won't be at the start or the end, but just... somewhere in between.
 

main/style/style.css

@@ -242,6 +242,11 @@ pre.highlight {
     margin-top: 20px;
 }
 
+.post-content img {
+    width: 100%;
+    height: auto;
+}
+
 @media(max-width: 1199px) {
     .blog-title {
         margin-top: 15px;