doc: Switch to jinja2-based rendering

Pre-rendering HTML was not the best idea. Instead pre-process the data,
cache it into data files and do the HTML rendering only as the final
step.

Also adds asymmetry to analysis and uses tabular numbers and spaces
instead of ugly table hacks to align numbers.

1 files changed, 202 insertions, 0 deletions

diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css
new file mode 100644
index 0000000..26b2e96
--- /dev/null
+++ b/lulua/data/report/style.css
@@ -0,0 +1,202 @@
+/*
+colorscheme derived from #EAE0C8, see https://en.wikipedia.org/wiki/Pearl_(color)
+using http://colormind.io/bootstrap/
+*/
+:root {
+	--light-shades: #EAE0C8;
+	--light-accent: #689CA9;
+	--main-brand: #A48A4E;
+	--dark-accent: #79796D;
+	--dark-shades: #1D251E;
+
+	--finger-little: #dc322f; /* red */
+	--finger-ring: #268bd2; /* blue */
+	--finger-middle: #d33682; /* magenta */
+	--finger-index: #6c71c4; /* violet */
+	--finger-thumb: #2aa198; /* cyan */
+}
+
+@font-face {
+	font-family: 'IBM Plex Arabic';
+	font-style: normal;
+	font-weight: 100;
+	src: local('IBM Plex Arabic Thin'), local('IBMPlexArabic-Thin'), url('fonts/IBMPlexArabic-Thin.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'IBM Plex Arabic';
+	font-style: normal;
+	font-weight: 400;
+	src: local('IBM Plex Arabic Regular'), local('IBMPlexArabic-Regular'), url('fonts/IBMPlexArabic-Regular.woff2') format('woff2');
+}
+
+body {
+	font-size: 14pt;
+	background-color: var(--light-shades);
+	color: var(--dark-shades);
+}
+/* is there a better way to select _both_ fonts at the same time? */
+:lang(ar) {
+	direction: rtl;
+	font-family: "IBM Plex Arabic";
+}
+/* inside ltr text */
+:lang(ar)[dir=ltr] {
+	direction: ltr;
+}
+:lang(en) {
+	direction: ltr;
+	font-family: "IBM Plex Sans";
+}
+h1, h2, h3 {
+	font-weight: 100;
+}
+h1 {
+	font-size: 4em;
+}
+h2 {
+	font-size: 2.5em;
+}
+figure {
+	max-width: 70em;
+	margin: 1.3em auto;
+}
+img {
+	width: 100%;
+}
+code {
+	font-family: "IBM Plex Mono", monospace !important; /* override :lang(*) font setting */
+}
+a:link, a:visited {
+	color: var(--light-accent);
+	text-decoration: none;
+}
+a:focus, a:hover {
+	background-color: var(--light-accent);
+	color: var(--light-shades);
+	border-radius: 0.1em;
+}
+div.title-card {
+	background-color: var(--dark-accent);
+	color: var(--light-shades);
+}
+div.title-card .lbox {
+	margin: 2vw;
+}
+div.title-card h1 {
+	margin: 0;
+	padding: 0.2em;
+}
+div.title-card img.logo {
+	max-height: 35vh;
+	display: block;
+	margin: 0 auto;
+}
+div.title-card .subtitle {
+	padding: 0 0.5em;
+	font-size: 1.5em;
+}
+div.title-card .layout img {
+	display: block;
+	margin: 0 auto;
+}
+div.indepth-card {
+	padding: 10vh 0;
+	margin: 1em 0;
+	background-color: var(--dark-accent);
+	color: var(--light-shades);
+}
+.flexreverse {
+	flex-direction: row-reverse;
+}
+.lbox {
+	margin: 0 5vw;
+}
+/* for hand/finger stats */
+div.fingerhandstats {
+	text-align: center;
+	display: flex;
+}
+div.fingerhandstats div.fingers {
+	display: flex;
+}
+div.fingerhandstats div.fingers div {
+	margin: 0.1em;
+	overflow: hidden;
+}
+div.fingerhandstats .left {
+	margin-right: 0.5em;
+}
+div.fingerhandstats .right {
+	margin-left: 0.5em;
+}
+/* keep in sync with render-svg.css */
+div.fingerhandstats .fingers .little {
+	border: 0.1em solid var(--finger-little);
+}
+div.fingerhandstats .fingers .ring {
+	border: 0.1em solid var(--finger-ring);
+}
+div.fingerhandstats .fingers .middle  {
+	border: 0.1em solid var(--finger-middle);
+}
+div.fingerhandstats .fingers .index {
+	border: 0.1em solid var(--finger-index);
+}
+div.fingerhandstats .fingers .thumb {
+	border: 0.1em solid var(--finger-thumb);
+}
+
+table {
+	font-variant-numeric: tabular-nums;
+}
+.pure-table td.numint {
+	text-align: right;
+	padding-right: 0;
+}
+
+.pure-table td.numfrac {
+	border-left: none;
+	text-align: left;
+	padding-left: 0;
+}
+
+dl.colorcodes dt, dl.colorcodes dd {
+	display: inline;
+	padding: 0;
+	margin: 0;
+}
+
+dl.colorcodes dt:after {
+	content: ":";
+}
+
+dl.colorcodes .finger:before {
+	width: 0.7em;
+	height: 0.7em;
+	display: inline-block;
+	content: " ";
+	margin-right: 0.3em;
+	vertical-align: middle;
+}
+
+dl.colorcodes .finger.little::before {
+	background-color: var(--finger-little);
+}
+
+dl.colorcodes .finger.ring::before {
+	background-color: var(--finger-ring);
+}
+
+dl.colorcodes .finger.middle::before {
+	background-color: var(--finger-middle);
+}
+
+dl.colorcodes .finger.index::before {
+	background-color: var(--finger-index);
+}
+
+dl.colorcodes .finger.thumb::before {
+	background-color: var(--finger-thumb);
+}
+