Improve handling of PNGs, add background image

.docs/.eleventy.js

@@ -1,3 +1,4 @@
+const fs = require("fs");
 const path = require("path");
 
 const htmlentities = require("html-entities");
@@ -5,16 +6,18 @@ const Image = require("@11ty/eleventy-img");
 
 var nextid = 0;
 
+const image_filename_format = (_id, src, width, format, _options) => {
+	const extension = path.extname(src);
+	const name = path.basename(src, extension);
+	return `${name}-${width}w.${format}`;
+};
+
 async function shortcode_image(src, alt, classes = "") {
 	let metadata = await Image(src, {
 		widths: [300, null],
 		formats: ["avif", "jpeg"],
 		outputDir: `./_site/img/`,
-		filenameFormat: (_id, src, width, format, _options) => {
-			const extension = path.extname(src);
-			const name = path.basename(src, extension);
-			return `${name}-${width}w.${format}`;
-		}
+		filenameFormat: image_filename_format
 	});
 	console.log(metadata);
 	
@@ -35,11 +38,7 @@ async function shortcode_image_url(src) {
 		widths: [ null ],
 		formats: [ "jpeg" ],
 		outputDir: `./_site/img/`,
-		filenameFormat: (_id, src, width, format, _options) => {
-			const extension = path.extname(src);
-			const name = path.basename(src, extension);
-			return `${name}-${width}w.${format}`;
-		}
+		filenameFormat: image_filename_format
 	});
 	console.log(metadata);
 	
@@ -47,6 +46,17 @@ async function shortcode_image_url(src) {
 	return data.url;
 }
 
+async function shortcode_image_urlpng(src) {
+	let target_dir = `./_site/img`;
+	if(!fs.existsSync(target_dir))
+		await fs.promises.mkdir(target_dir, { recursive: true });
+	let filename = path.basename(src);
+	// Generally speaking we optimise PNGs *very* well with oxipng/Zopfli,
+	// and the Image plugin doesn't respect this
+	await fs.promises.copyFile(src, path.join(target_dir, filename));
+	return `/img/${filename}`;
+}
+
 async function shortcode_gallerybox(content, src, idthis, idprev, idnext) {
 	return `<figure class="gallerybox-item" id="${idthis}">
 <!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
@@ -64,6 +74,7 @@ module.exports = function(eleventyConfig) {
 	// eleventyConfig.addPassthroughCopy("css");
 	eleventyConfig.addShortcode("image", shortcode_image);
 	eleventyConfig.addJavaScriptFunction("image", shortcode_image);
-	eleventyConfig.addShortcode("image-url", shortcode_image_url);
+	eleventyConfig.addShortcode("image_url", shortcode_image_url);
+	eleventyConfig.addNunjucksAsyncShortcode("image_urlpng", shortcode_image_urlpng);
 	eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
 }

.docs/_includes/theme.njk

@@ -26,7 +26,7 @@
 		</nav>
 		{{ content | safe }}
 		
-		<footer>
+		<footer class="shadow-top">
 			<p>Built with ❤️ by <a href="https://starbeamrainbowlabs.com/">Starbeamrainbowlabs</a></p>
 			<p>Tech: <a href="https://www.11ty.dev/">Eleventy</a></p>
 			<p>Licensed under <a href="https://www.mozilla.org/en-US/MPL/2.0/">Mozilla Public Licence 2.0</a> (<a href="https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2)">tldr</a>)</p>

.docs/css/theme.css

@@ -50,7 +50,8 @@ body
 	margin: 0;
 	font-family: sans-serif; /* Serif is awful :( */
 	
-	background: var(--bg-main); /* Don't forget to update the @page one too for paged media */
+	background: url('{% image_urlpng "images/clouds.png" %}') center / cover fixed,
+		var(--bg-main); /* Don't forget to update the @page one too for paged media */
 	color: var(--text-main);
 }
 
@@ -170,37 +171,10 @@ footer {
 	/* color: var(--text-bright); */
 }
 
-
-/* Utility / layout aids */
-.float.left		{ float: left;	}
-.float.right	{ float: right;	}
-
-.flex	{ display: flex; }
-.flex-1	{ flex: 1;	}
-.flex-2	{ flex: 2;	}
-.flex-3	{ flex: 3;	}
-.flex-4	{ flex: 4;	}
-.flex-5	{ flex: 5;	}
-.flex-6	{ flex: 6;	}
-
-.small-spacing	{ margin: 0.25em 0.35em;	padding: 0.25em 0.35em;	}
-.med-spacing	{ margin: 0.45em 0.65em;	padding: 0.45em 0.65em;	}
-.high-spacing	{ margin: 1em 1.25em;		padding: 1em 1.25em;	}
-
 .text-left		{ text-align: left;		}
 .text-centre	{ text-align: center;	}
 .text-right		{ text-align: right;	}
 
-.small-text		{ font-size: 0.8rem;	}
-.medium-text	{ font-size: 1rem;		}
-.large-text		{ font-size: 1.3rem;	}
-
-.bold-text		{ font-weight: bolder;	}
-
-.block			{ display: block;			}
-.inline			{ display: inline;			}
-.inline.block	{ display: inline-block;	}
-
 .invisilink		{ text-decoration: none; color: inherit;			}
 .invisilist		{ list-style-type: none; margin: 5px; padding: 5px; }
 
@@ -210,8 +184,10 @@ footer {
 .icon.medium	{ max-width: 2em; max-height: 2em;			}
 .icon.large		{ max-width: 5em; max-height: 5em;			}
 
-.img-text-middle{ vertical-align: middle; }
-
+.shadow-top		{ box-shadow: 0 -0.25em	0.5em			var(--shadow);	}
+.shadow-bottom	{ box-shadow: 0 0.25em	0.5em			var(--shadow);	}
+.shadow-vertical{ box-shadow: 0 0		0.5em	0.25em	var(--shadow);	}
+.shadow-text	{ text-shadow: 0.15em 0.15em 0.15em		var(--shadow);	}
 
 .bigbox {
 	display: flex;
@@ -241,6 +217,7 @@ footer {
 	margin: 0.1em;
 	padding: 1em;
 	max-width: 15em;
+	box-shadow: 0.25em 0.25em 0.5em var(--shadow);
 }
 .features-item.wide {
 	flex: 1;

.docs/index.html

@@ -5,7 +5,7 @@ tags: navigable
 date: 2000-01-01
 ---
 
-<section class="bigbox" style="--bg: url({% image-url "images/banner-main.jpeg" %})">
+<section class="bigbox shadow-bottom" style="--bg: url({% image_url "images/banner-main.jpeg" %})">
 	<h1>WorldEditAdditions</h1>
 	<p>
 		<a href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/"><img src="https://img.shields.io/badge/dynamic/json?color=%23375a7f&amp;label=ContentDB&amp;query=downloads&amp;suffix=+downloads&amp;url=https%3A//content.minetest.net/api/packages/Starbeamrainbowlabs/worldeditadditions/" alt="WorldEditAdditions on ContentDB" /></a>
@@ -47,7 +47,7 @@ date: 2000-01-01
 	
 	<figure>
 		{% image "images/torus-bonemeal.png", "A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." %}
-		<img src="/images/torus-bonemeal.png" alt="A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." />
+		<!-- <img src="/images/torus-bonemeal.png" alt="A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." /> -->
 		<figcaption>
 			<p>Powerful meta commands such as <code>//multi</code> for executing multiple commands at once and <code>//subdivide</code> for running commands on areas of virtually unlimited size enable convenience and enhance flexibility.</p>
 		</figcaption>
@@ -55,7 +55,7 @@ date: 2000-01-01
 </section>
 
 <!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
-<section class="gallerybox">
+<section class="gallerybox shadow-vertical">
 	<section class="gallerybox-gallery">
 		{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
 			A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
@@ -70,7 +70,7 @@ date: 2000-01-01
 </section>
 
 <section>
-	<h2>Download</h2>
+	<h2 class="shadow-text">Download</h2>
 	<div class="features-large">
 		<div class="features-item wide text-centre">
 			<h3>ContentDB</h3>