styling tweaks, date formatting, blog tweaks

content/layouts/blogpost.njk

@@ -5,7 +5,8 @@ layout: 'base.njk'
 <div class="blog">
 	<div class="blog-header">
 		<h1>{{title}}</h1>
-		<small>{{date}} {% if modified !== date %}(Last modified: {{modified}}){% endif %}</small> </br>
+		<small>{{date | dateLocale}} {% if modified !== date %}(Last modified: {{modified | dateLocale}}){% endif %}</small>
+		</br>
 		<a href="/blog/">&lt;- Back to posts list</a>
 	</div>
 	<div class="blog-content">

content/pages/blog.njk

@@ -4,6 +4,8 @@ permalink: "/blog/"
 ---
 
 <h1>Blog</h1>
-{% for post in collections.blogpost %}
+{% for post in collections.blogpost | reverse %}
-<a href="{{ post.data.permalink | safe }}">{{post.data.title}}</a>
+<div>
+	{{post.data.date | dateLocale}} - <a href="{{ post.data.permalink | safe }}">{{post.data.title}}</a>
+</div>
 {% endfor %}

content/style.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+
 $grey-vdark: rgb(17, 24, 39);
-$grey-dark: lighten($grey-vdark, 5);
+$grey-dark: color.adjust($grey-vdark, $lightness: 5%);
-$grey-medium: lighten($grey-vdark, 15);
+$grey-medium: color.adjust($grey-vdark, $lightness: 15%);
 $grey-light: #4c566a;
 $white-dark: #d8dee9;
 $white-light: #eceff4;
@@ -89,14 +91,25 @@ body {
 	h2,
 	h3,
 	h4 {
-		margin-bottom: 0rem;
-		margin-top: 1rem;
 		font-weight: 700;
 	}
 
+	h1,
+	h2 {
+		margin-bottom: 0.4rem;
+		margin-top: 1rem;
+	}
+
+	h3,
+	h4,
+	h5 {
+		margin-bottom: 0rem;
+		margin-top: 0.5rem;
+	}
+
 	p {
-		margin-top: 0.6rem;
+		margin-top: 0.4rem;
-		margin-bottom: 1.2rem;
+		margin-bottom: 1.4rem;
 	}
 
 	code,

eleventy.config.js

@@ -1,6 +1,16 @@
 import sass from "sass";
+import { DateTime } from "luxon";
 
 export default async function (eleventyConfig) {
+	eleventyConfig.addFilter("dateLocale", function (value) {
+		return DateTime.fromISO(new Date(value).toISOString()).toLocaleString({
+			year: 'numeric',
+			month: 'short',
+			day: '2-digit',
+		});
+	});
+
+	// SCSS
 	eleventyConfig.addTemplateFormats("scss");
 
 	eleventyConfig.addExtension("scss", {

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@11ty/eleventy": "^3.0.0",
+        "luxon": "^3.5.0",
         "sass": "^1.83.4"
       }
     },

package.json

@@ -12,6 +12,7 @@
   "type": "module",
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",
+    "luxon": "^3.5.0",
     "sass": "^1.83.4"
   }
 }