add chord display

1 files changed, 55 insertions, 4 deletions

diff --git a/app/style.js b/app/style.js
index f2e1b7c..ea59e75 100644
--- a/app/style.js
+++ b/app/style.js
@@ -14,7 +14,7 @@ export const css = (code) => {
 
 const longSize = 3;
 const sizeA = longSize * Math.sqrt(3);
-const sizeB = longSize * 2;
+const sizeB = longSize * 1.5;
 const strideA = longSize * Math.sqrt(3);
 const strideB = longSize * 1.5;
 const rem = (n) => `${n}rem`;
@@ -24,14 +24,21 @@ export const pos = ([x, y], major) => {
     ? [strideA, strideB]
     : [strideB, strideA];
   return {
-    bottom:  rem(y * sy),
+    bottom: rem(y * sy),
     left: rem(x * sx),
   };
 };
 
+export const width = (w, major) => {
+  if (major === 'row')
+    return rem((w + 0.5) * strideA);
+
+  return rem((w + 0.5) * strideB);
+};
+
 export const height = (h, major) => {
   if (major === 'row')
-    return rem(h * strideA);
+    return rem((h - 0.5) * strideA);
 
   return rem((h + 1.5) * strideB);
 };
@@ -45,10 +52,15 @@ body {
   font-family: sans-serif;
 }
 
-.app, .keyboard {
+.app, .keyboard, .chord {
   position: relative;
 }
 
+.main {
+  display: flex;
+  justify-content: space-evenly;
+}
+
 .hexagon {
   position: absolute;
   width: ${rem(sizeA)};
@@ -83,4 +95,43 @@ body {
   background: #eeeeee;
   color: #696969;
 }
+
+.chord {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 2rem 0;
+  width: 2rem;
+}
+
+.chord .blip {
+  height: 1px;
+  margin: auto 0 0;
+  background: #eeeeee;
+  opacity: 0.75;
+}
+
+.chord .blip:nth-child(2n) {
+  margin: auto 0.3rem 0;
+  opacity: 0.5;
+}
+.chord .blip:first-child {
+  margin-top: 0;
+}
+
+.chord .note {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 6%;
+  aspect-ratio: 1;
+  background: #eeeeee;
+  border-radius: 100%;
+}
+
+.chord .note span {
+  position: absolute;
+  left: 2rem;
+}
 `);