Add auto-rendering of lab sheet to build script

build

@@ -58,6 +58,8 @@ task_setup() {
 	check_command git true;
 	check_command node true;
 	check_command npm true;
+	check_command pandoc true;
+	check_command weasyprint true;
 	
 	task_begin "Creating build output directory";
 	mkdir -p "${build_output_folder}";
@@ -118,13 +120,34 @@ task_main-watch() {
 task_main() {
 	tasks_run js-css;
 	
+	if [ ! -d "${build_output_folder}/201" ]; then
+		task_begin "Creating 201 output subdirectory";
+		mkdir "${build_output_folder}/201";
+		task_end "$?";
+	fi
+	
 	task_begin "Copying html";
 	cp index.html "${build_output_folder}";
-	task_end $?;
+	cp 201/index.html "${build_output_folder}/201";
+	task_end "$?";
 	
 	task_begin "Copying images";
 	cp -r images/ "${build_output_folder}";
-	task_end $?;
+	task_end "$?";
+	
+	task_begin "Rendering lab sheets: markdown -> html [phase 1/3]";
+	pandoc 201/Lab-Sheet.md --standalone --output 201/Lab-Sheet.html;
+	task_end "$?";
+	
+	task_begin "Rendering lab sheets: html -> pdf [phase 2/3]";
+	weasyprint 201/Lab-Sheet.html 201/Lab-Sheet.pdf --stylesheet css/lab-sheet.css --format pdf --verbose;
+	exit_code="$?";
+	rm 201/Lab-Sheet.html;
+	task_end "${exit_code}";
+	
+	task_begin "Rendering lab sheets: archiving [phase 3/3]";
+	mv 201/Lab-Sheet.pdf "${build_output_folder}/201";
+	task_end "$?";
 }
 
 task_js-css() {

css/lab-sheet.css

@@ -0,0 +1,119 @@
+/* Base CSS */
+
+/*
+ * This CSS file contains (for me) logical style defaults that are easy to read.
+ * 
+ * This file is quite often used as a starting point for other projects.
+ * 
+ * Todo:
+	* <button>
+	* <inputs>
+	* <progress>
+	* <meter>
+ */
+
+/* rem is relative to the html element, and em is relative to the current element. */
+html { font-size:100%; }
+
+body
+{
+	font-family: sans-serif; /* Serif is awful :( */
+	
+	background: #f3f3f3; /* Don't forget to update the @page one too for paged media */
+	color: #232323;
+}
+
+title { string-set: page-title content(text); }
+
+/* Special tweaks for paged media (e.g. PDFs) */
+@page {
+	font-family: sans-serif;
+	background: #f3f3f3; /* Set the background colour to cover the whole page */
+	
+	@top-left {
+		content: "Freeside Linux 201 - Web Server Setup";
+		opacity: 0.6;
+	}
+	@top-right {
+		content: "By Starbeamrainbowlabs and @closebracket";
+		opacity: 0.6;
+	}
+	@bottom-right {
+		content: "Page " counter(page) " of " counter(pages);
+		opacity: 0.6;
+	}
+}
+
+
+/* A small tweak to things more responsive */
+iframe, object, embed, img, video, table {
+	max-width: 100%;
+}
+
+/* Turn the user's cursor into a hand when over things they can click */
+button, summary {
+	cursor: pointer;
+}
+
+th, td {
+	margin: 4px 6px;
+	padding: 4px 6px;
+}
+
+pre { page-break-inside: avoid; break-inside: avoid; }
+pre, code {
+	white-space: pre-wrap;
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+
+/* todo add the rest of the textbox like inputs here */
+input[type=text], input[type=number], textarea {
+	margin: 3px 5px;
+	padding: 5px 8px;
+	
+	background: white;
+	border: 0;
+	border-radius: 5px;
+}
+
+/* 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: 2px 4px;	padding: 2px 4px;	}
+.med-spacing	{ margin: 5px 8px;	padding: 5px 8px;	}
+.high-spacing	{ margin: 8px 10px;	padding: 8px 10px;	}
+
+.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; }
+
+.tiny-image		{ max-width: 100px; max-height: 100px; }
+.small-image	{ max-width: 250px; max-height: 250px; }
+.medium-image	{ max-width: 450px; max-height: 450px; }
+.large-image	{ max-width: 650px; max-height: 650px; }
+
+.img-text-middle{ vertical-align: middle; }