From 0f8643954fd9507aec85bab46046e71a497bfffe Mon Sep 17 00:00:00 2001
From: Lars-Dominik Braun <lars@6xq.net>
Date: Sat, 22 Feb 2020 13:20:31 +0100
Subject: 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.
---
 lulua/data/report/style.css | 202 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 lulua/data/report/style.css

(limited to 'lulua/data/report/style.css')

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);
+}
+
-- 
cgit v1.2.3