Update dependencies, improve styling, fix typos

.eleventy.js

@@ -4,7 +4,7 @@ module.exports = (eleventyConfig) => {
     });
 
     return {
-        pathPrefix: "/blog/",
+        pathPrefix: "/blog/dist/",
         dir: {
             input: "src/main/",
             output: "dist",

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Felix W. Dekker
+Copyright (c) 2019 F.W. Dekker
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,8 +1,8 @@
 {
     "name": "blog",
-    "version": "1.1.15",
-    "description": "Felix W. Dekker's personal blog.",
-    "author": "Felix W. Dekker",
+    "version": "1.2.0",
+    "description": "F.W. Dekker's personal blog.",
+    "author": "F.W. Dekker",
     "browser": "dist/bundle.js",
     "repository": {
         "type": "git",
@@ -17,8 +17,8 @@
     },
     "devDependencies": {
         "@11ty/eleventy": "^0.12.1",
-        "grunt": "^1.4.0",
-        "grunt-cli": "^1.4.2",
+        "grunt": "^1.4.1",
+        "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
@@ -26,7 +26,7 @@
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^4.0.3",
-        "webpack": "^5.36.0",
-        "webpack-cli": "^4.6.0"
+        "webpack": "^5.45.1",
+        "webpack-cli": "^4.7.2"
     }
 }

src/main/_data/site.json

@@ -1,6 +1,6 @@
 {
     "baseurl": "/blog/",
     "title": "FWDekker's blog",
-    "description": "Felix W. Dekker's blog",
-    "author": "Felix W. Dekker"
+    "description": "F.W. Dekker's blog",
+    "author": "F.W. Dekker"
 }

src/main/_includes/home.njk

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-{% for post in collections.all %}
+{% for post in collections.all | reverse %}
 <div class="row">
     <div class="column">
         {% if post %}

src/main/_includes/post.njk

@@ -4,9 +4,9 @@ layout: default
 
 <div class="row">
     <div class="column">
-        <a href="{{ '/' | url }}">&larr; home</a><br />
+        <p><a href="{{ '/' | url }}">&larr; home</a></p>
 
-        <h2 class="inline-header">{{ title }}</h2>&nbsp;
+        <h2 class="inline-header">{{ title }}</h2>&emsp;
         {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
 
         {{ content | safe }}

src/main/_posts/2021-07-18-rimworld-timelapse.md

@@ -80,7 +80,7 @@ With the files properly renamed, you can run FFmpeg to create the video for you.
    * `-i %3d.png` tells what the files are named: three digits following by `.png`.
    * `-vcodec libx265` means that you are using the x265 codec.
      You can also use `libx264` which is less CPU-intensive, but creates much larger files.
-   * `-crf 24` is the quality of the video. A lower value means higher quality. Typical values are between 23 and 30.
+   * `-crf 24` is the quality of the video. A lower value means higher quality. Typical values are between 18 and 28.
    * `-pix_fmt yuv420p` is the way pixels are encoded.
    * `-vf [...]` applies filters to the images, like cropping and scaling.
    * `crop=5120:3680:2384:3296` extracts a rectangle from the images, basically zooming in on your images.
@@ -95,7 +95,7 @@ With the files properly renamed, you can run FFmpeg to create the video for you.
 FFmpeg will show you a nice process indicator with some additional stats, and should be done within a few minutes.
 
 ### 2.3 Lowering the quality
-If you find that the image is too large, you can repeat the previous step with a higher value for `-crf` or with a
+If you find that the video is too large, you can repeat the previous step with a higher value for `-crf` or with a
 different output size.
 However, this means that FFmpeg will have to process all your screenshots again, which takes a while.
 Instead, you can just ask FFmpeg to process your existing video to lower the quality as follows, which takes only a few
@@ -104,7 +104,7 @@ seconds.
   ```shell
   "C:\Users\FWDekker\Downloads\ffmpeg\ffmpeg.exe" -i out.mp4 -crf 28 out2.mp4
   ```
-* To change the size:
+* To change the scale:
   ```shell
   "C:\Users\FWDekker\Downloads\ffmpeg\ffmpeg.exe" -i out.mp4 -vf "scale=640:460" out2.mp4
   ```

src/main/css/main.css

@@ -1,3 +1,7 @@
+#contents .container {
+    max-width: 80rem;
+}
+
 p {
     text-align: justify !important;
     text-justify: inter-word !important;
@@ -8,5 +12,5 @@ ol {
 }
 
 .inline-header {
-    display: inline;
+    display: inline-block;
 }