From a91fc5e945b841ae54f67ed331409ad857178f13 Mon Sep 17 00:00:00 2001
From: Lars-Dominik Braun <lars@6xq.net>
Date: Thu, 13 Feb 2020 11:55:05 +0100
Subject: doc: Explain finger color coding
---
doc/index.html | 14 +++++++++++++-
doc/style.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
2 files changed, 63 insertions(+), 6 deletions(-)
(limited to 'doc')
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);
+}
+
--
cgit v1.2.3