From 2c7c2a97059b73ecf2e134aa74fbc17d65810a2b Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose@chua.family>
Date: Sun, 1 Mar 2020 23:52:26 +0800
Subject: [PATCH] Optimise print layout scale

---
 guide.html | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/guide.html b/guide.html
index b6edbec..87560ba 100644
--- a/guide.html
+++ b/guide.html
@@ -6,6 +6,7 @@
 	<title>FOSSASIA Video Recorder's Guide</title>
 	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
 	<style>
+
 		html {
 			font-family: 'Open Sans', sans-serif;
 			font-size: 16px;
@@ -14,6 +15,21 @@
 			max-width: 1200px;
 		}
 
+		@page {
+		  size: A4 portrait;
+		  margin: 0;
+		}
+		@media print {
+			html, body {
+				width: 210mm;
+				height: 297mm;
+			}
+
+			html {
+				font-size: 9pt;
+			}
+		}
+
 		big {
 			font-size: 1.5em;
 		}
@@ -111,12 +127,15 @@
 			font-weight: bold;
 			border-bottom: 2px solid rgba(0, 0, 0, 0.5);
 		}
-		ol.taglist.tag-t > li::before {
-			content: "T" counter(tag-counter);
-		}
 		ol.taglist.tag-s > li::before {
 			content: "S" counter(tag-counter);
 		}
+		ol.taglist.tag-n > li::before {
+			content: "N" counter(tag-counter);
+		}
+		ol.taglist.tag-t > li::before {
+			content: "T" counter(tag-counter);
+		}
 			
 	</style>
 </head>
@@ -127,7 +146,7 @@
 				<th></th>
 				<th>
 					<svg width="48" height="27" viewBox="0 0 48 27" class="tile">
-						<rect width="48" height="27" fill="black" fill-opacity="0.1"/>
+						<rect width="48" height="27" fill="black" fill-opacity="0.25"/>
 						<rect x="2" y="2" width="35" height="20" fill="black" fill-opacity="0.75"/>
 						<rect x="39" y="14" width="7" height="11" fill="black" fill-opacity="0.75"/>
 						<text x="42.5" y="22" fill="white" text-anchor="middle" style="font-size: 7px; font-weight: bold;">V</text>
@@ -137,7 +156,7 @@
 				</th>
 				<th>
 					<svg width="48" height="27" viewBox="0 0 48 27" class="tile">
-						<rect width="48" height="27" fill="black" fill-opacity="0.1"/>
+						<rect width="48" height="27" fill="black" fill-opacity="0.25"/>
 						<rect x="2" y="2" width="27" height="23" fill="black" fill-opacity="0.75"/>
 						<rect x="31" y="16" width="15" height="9" fill="black" fill-opacity="0.75"/>
 						<text x="38.5" y="23" fill="white" text-anchor="middle" style="font-size: 7px; font-weight: bold;">S</text>