wip: major refactor for web components and grid layout

 - hovering on notes from the key doesn't work.
 - need to show fret on/off, not notes, they're too distracting
 - save button broken

1 files changed, 22 insertions, 0 deletions

diff --git a/main.css b/main.css
index a2b4deb..f739fba 100644
--- a/main.css
+++ b/main.css
@@ -38,6 +38,24 @@ body {
     background-color: var(--fret-bg-color-3);
 }
 
+x-string {
+    display: grid;
+    padding: 5px;
+    cursor: pointer;
+    list-style: none;
+    grid-template-rows: 1ex;
+    /* TODO: this should be put on the element when it's attached. */
+    grid-template-columns: repeat(10, 1fr);
+}
+
+x-string li {
+    text-align: center;
+}
+
+x-string .selected {
+    border-left: 1px solid black;
+}
+
 x-fretboard {
     display: block;
     float: left;
@@ -45,6 +63,10 @@ x-fretboard {
     margin-right: 1em;
 }
 
+x-fretboard .save {
+    position: right;
+}
+
 x-fretboard table {
     border-collapse: collapse;
 }