Print pagebreaks, inline width images

astro.config.mjs

@@ -23,6 +23,14 @@ export default defineConfig({
 				src: "./src/assets/fi_16.png"
 			},
 			social: [{ icon: 'github', label: 'GitHub', href: 'https://git.vojtechstruhar.com/Vojta/fi-notes' }],
+			head: [
+				{
+					tag: "script",
+					attrs: {
+						src: "/scripts/load-images-before-print.js"
+					}
+				}
+			],
 			customCss: [
 				"remark-github-alerts/styles/github-colors-light.css",
 				"remark-github-alerts/styles/github-colors-dark-class.css",
@@ -30,8 +38,9 @@ export default defineConfig({
 				"katex/dist/katex.min.css",
 				"./src/styles/theme.css",
 				"./src/styles/footnotes-fix.css",
-				"./src/styles/pixelated-logo.css",
+				"./src/styles/images-adjustment.css",
 				"./src/styles/scroll-fix.css",
+				"./src/styles/print-improvements.css",
 			],
 			sidebar: [
 				{

public/scripts/load-images-before-print.js

@@ -0,0 +1,8 @@
+function loadAllImages() {
+    document.querySelectorAll('img[loading="lazy"]').forEach(img => {
+        img.setAttribute('loading', 'eager');
+    });
+}
+
+// Before printing (manually or via browser)
+window.addEventListener('beforeprint', loadAllImages);

src/styles/images-adjustment.css

@@ -0,0 +1,18 @@
+.site-title img {
+    image-rendering: pixelated;
+}
+
+img[alt="width=30%"]:has(+ img) {
+  width: 30%;
+  display: inline;
+}
+
+img[alt="width=69%"]:has(+ img) {
+  width: 69%;
+  display: inline;
+}
+
+img[alt="width=49%"] {
+  width: 49%;
+  display: inline;
+}

src/styles/pixelated-logo.css

@@ -1,3 +0,0 @@
-.site-title img {
-    image-rendering: pixelated;
-}

src/styles/print-improvements.css

@@ -0,0 +1,13 @@
+@media print {
+    h2, h3 {
+        break-after: avoid;
+    }
+
+    li:last-child {
+        break-before: avoid;
+    }
+
+    p, li {
+        text-align: justify;
+    }
+}