From 1615f765ad664475d41a68e6cf8bc1da708fe03d Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 29 May 2020 04:07:26 +0200
Subject: [PATCH] word: debugging stylesheet to colourise levels

---
 word-debug.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++
 word.plp       |  6 ++++
 2 files changed, 81 insertions(+)
 create mode 100644 word-debug.css

diff --git a/word-debug.css b/word-debug.css
new file mode 100644
index 0000000..cd58776
--- /dev/null
+++ b/word-debug.css
@@ -0,0 +1,75 @@
+figure:before {
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+.parent > figure:after {
+	content: '+';
+	position: absolute;
+	right: 0;
+	color: #FFF;
+	width: 1em;
+	line-height: 1em;
+	background: #0008;
+	border-radius: 1em;
+}
+
+/* essential = blue */
+.level0 > figure:before {
+	box-shadow: inset 0 0 1em #0FF;
+}
+
+/* basic = cyan */
+.level1 > figure {
+	filter: sepia(.8) hue-rotate(70deg) saturate(2);
+}
+.level1 > figure:before {
+	box-shadow: inset 0 0 1em #0F0;
+}
+.level1 > figure figcaption {
+	background: #080C;
+}
+
+/* common = green */
+.level2 > figure {
+	filter: sepia(.9) hue-rotate(45deg) saturate(2);
+}
+.level2 > figure:before {
+	box-shadow: inset 0 0 1em #FF0;
+}
+.level2 > figure figcaption {
+	background: #480C;
+}
+
+/* distinct = yellow */
+.level3 > figure {
+	filter: sepia(.9) hue-rotate(15deg) saturate(2);
+}
+.level3 > figure:before {
+	box-shadow: inset 0 0 1em #FC0;
+}
+.level3 > figure figcaption {
+	background: #880C;
+}
+
+/* rare = orange */
+.level4 > figure {
+	filter: sepia(.9) hue-rotate(-10deg) saturate(2);
+}
+.level4 > figure:before {
+	box-shadow: inset 0 0 2em #F80;
+}
+.level4 > figure figcaption {
+	background: #840C;
+}
+
+.level5 > figure {
+	filter: sepia(.9) hue-rotate(-40deg) saturate(2);
+}
+.level5 > figure:before {
+	box-shadow: inset 0 0 3em #F00;
+}
+.level5 > figure figcaption {
+	background: #800C;
+}
diff --git a/word.plp b/word.plp
index ac596b5..5739731 100644
--- a/word.plp
+++ b/word.plp
@@ -63,6 +63,12 @@ figure:hover > figcaption {
 </style>
 EOT
 });
+
+if (exists $get{debug}) {
+	say '<style>';
+	include 'word-debug.css';
+	say '</style>';
+}
 :>
 <h1>Words</h1>
 
-- 
2.30.0