css: show note interval underneath note

1 files changed, 18 insertions, 1 deletions

diff --git a/main.css b/main.css
index 975bbef..77b282a 100644
--- a/main.css
+++ b/main.css
@@ -45,8 +45,25 @@ body {
 
 #key-picker .notes {
     padding-left: 0;
+    list-style-position: outside;
+    display: grid;
+    grid-template-rows: 2;
+    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em;
+    counter-reset: notes;
+}
+
+#key-picker .notes li:before {
+    display: grid;
+    grid-row-start: 2;
+    content: counter(notes, numeric);
+    color: grey;
+    font-size: small;
+    text-align: center;
 }
 
 #key-picker .notes li {
-    display: inline;
+    display: grid;
+    grid-row-start: 1;
+    counter-increment: notes;
+    text-align: center;
 }