doc: Explain finger color coding

2 files changed, 63 insertions, 6 deletions

diff --git a/doc/index.html b/doc/index.html
index 409ffc0..cc5c69f 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -162,7 +162,19 @@
 	<div class="lbox">
 		<h2>Layout properties</h2>
 
-		<p>Below are statistics for the proposed layout.</p>
+		<p>The following evaluation uses color coding to identify fingers:</p>
+		<dl class="colorcodes">
+			<dt class="finger little">red</dt>
+			<dd>little finger</dd>
+			<dt class="finger ring">blue</dt>
+			<dd>ring finger</dd>
+			<dt class="finger middle">magenta</dt>
+			<dd>middle finger
+			<dt class="finger index">violet</dt>
+			<dd>index finger</dd>
+			<dt class="finger thumb">cyan</dt>
+			<dd>thumb</dd>
+		</dl>
 	</div>
 	</div>
 </div>
diff --git a/doc/style.css b/doc/style.css
index d6adf0f..3d8e482 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -8,6 +8,12 @@ using http://colormind.io/bootstrap/
 	--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 {
@@ -126,19 +132,19 @@ div.fingerhandstats .right {
 }
 /* keep in sync with render-svg.css */
 div.fingerhandstats .fingers .little {
-	border: 0.1em solid #dc322f; /* red */
+	border: 0.1em solid var(--finger-little);
 }
 div.fingerhandstats .fingers .ring {
-	border: 0.1em solid #268bd2; /* blue */
+	border: 0.1em solid var(--finger-ring);
 }
 div.fingerhandstats .fingers .middle  {
-	border: 0.1em solid #d33682; /* magenta */
+	border: 0.1em solid var(--finger-middle);
 }
 div.fingerhandstats .fingers .index {
-	border: 0.1em solid #6c71c4; /* violet */
+	border: 0.1em solid var(--finger-index);
 }
 div.fingerhandstats .fingers .thumb {
-	border: 0.1em solid #2aa198; /* cyan */
+	border: 0.1em solid var(--finger-thumb);
 }
 
 .pure-table td.numint {
@@ -152,3 +158,42 @@ div.fingerhandstats .fingers .thumb {
 	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);
+}
+