feat: improve PDF output

inclusive-design · Mar 11, 2024 · 87920a2 · 87920a2
1 parent 7d18565
commit 87920a2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "build": "npm-run-all -l clean -s build:*",
     "build:cms": "esbuild src/admin/previews.js --bundle --loader:.js=jsx --outfile=_site/admin/previews.js",
     "build:eleventy": "eleventy",
-    "build:pdf": "weasyprint _site/index.html _site/report.pdf",
+    "build:pdf": "weasyprint --pdf-variant=pdf/ua-1 _site/index.html _site/report.pdf",
     "clean": "rimraf _site",
     "cms": "decap-server",
     "create-pdf": "run",

diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}{{ title }}{% endblock %}</title>
+  <title>{% block title %}Accessibility Audit for {{ title }}{% endblock %}</title>
   <link rel="stylesheet" href="assets/styles/a11y-dark.min.css">
   <link rel="stylesheet" href="assets/styles/report.css">
   <link rel="stylesheet" href="assets/styles/print.css" media="print">

diff --git a/src/_layouts/report.njk b/src/_layouts/report.njk
@@ -5,7 +5,7 @@ layout: base
 {% set tipsList = collections.tips %}
 
 <section id="start">
-  <img src="assets/images/logo.svg" alt="" class="logo">
+  <img src="assets/images/logo.svg" alt="Logo of the Inclusive Design Research Centre" class="logo">
 
   <h1>Accessibility Audit for {{ title }}</h1>
 

diff --git a/src/assets/styles/print.css b/src/assets/styles/print.css
@@ -3,9 +3,9 @@ body {
 }
 
 .issue {
+	break-inside: avoid;
 	border: none;
 	padding: 0;
-	break-before: page;
 }
 
 .issue-meta {
@@ -29,3 +29,11 @@ body {
 	font-size: inherit;
 	border-radius: 0;
 }
+
+@page {
+	size: 8.5in 11in;
+	margin: 1in;
+	@bottom-center {
+		content: 'Page ' counter(page) ' of ' counter(pages);
+	}
+}
diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css
@@ -65,20 +65,21 @@ h1 {
 }
 
 h2 {
-	break-before: page;
+	font-size: 1.75rem;
 }
 
 h3 {
+	font-size: 1.25rem;
 	margin-top: 3em;
 	color: #191970;
 }
 
 h4 {
-	font-size: 1.25rem;
+	font-size: 1.125rem;
 }
 
 h5 {
-	font-size: 1.125rem;
+	font-size: 1rem;
 }
 
 hr {
@@ -159,25 +160,24 @@ pre[class*='language-'] {
 }
 
 .issue header h4 {
-	margin-block: 0;
+	margin-bottom: 0;
+	margin-top: 0;
 	display: flex;
 	flex-direction: column;
 }
 
 .issue header .number {
-	display: block;
 	padding: 0.25em 0.5em;
 	font-size: 65%;
 	background-color: #191970;
 	color: #fff;
 	border: none;
 	margin-bottom: 0.4em;
 	margin-right: auto;
-	width: auto;
 }
 
 .issue header a {
-	margin-block-end: 0.25rem;
+	margin-bottom: 0.25rem;
 }
 
 .issue-meta {