Use rems for note sizes, fix display of note names in left handed config

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss

@@ -3,13 +3,15 @@
 @import "../../../../styles/mixins";
 @import "../../../../styles/typography";
 
+$note-height: 36;
+
 .fretboard__container {
   margin-top: pxToRem($grid-unit * 1);
   max-width: $fretonator_max_width;
   margin-left: auto;
   margin-right: auto;
   padding-right: 0;
-  padding-left: pxToRem($grid-unit * 4);
+  padding-left: pxToRem($grid-unit * 5);
   padding-bottom: pxToRem($grid-unit * 4);
   padding-top: pxToRem($grid-unit * 9);
   overflow-x: auto;
@@ -21,7 +23,7 @@
 
   &.fretboard__flip {
     padding-left: 0;
-    padding-right: pxToRem($grid-unit * 4);
+    padding-right: pxToRem($grid-unit * 5);
     direction: rtl;
   }
 }
@@ -251,9 +253,9 @@
 
   &:after {
     content: attr(data-display-note);
-    height: var(--note-height);
-    width: var(--note-height);
-    line-height: var(--note-height);
+    height: pxToRem($note-height);
+    width: pxToRem($note-height);
+    line-height: pxToRem($note-height);
     left: 50%;
     right: unset;
     box-sizing: border-box;
@@ -268,13 +270,7 @@
     transition-duration: 0.1s;
     transition-property: line-height, height, width, opacity;
     transition-timing-function: ease-in-out;
-  }
-
-  &:hover:after,
-  &:active:after {
-    height: var(--note-height-hover);
-    width: var(--note-height-hover);
-    line-height: var(--note-height-hover);
+    direction: ltr;
   }
 
   &:nth-child(-n + 13):after {
@@ -333,15 +329,15 @@
 
   &:after {
     content: attr(data-string-name);
-    height: var(--note-height);
-    width: var(--note-height);
+    height: pxToRem($note-height);
+    width:  pxToRem($note-height);
     left: 0;
     right: unset;
     box-sizing: border-box;
     border-radius: 50%;
     transform: translate(-50%, 50%);
     color: var(--string-color);
-    line-height: var(--note-height);
+    line-height: pxToRem($note-height);
     text-align: center;
     font-weight: var(--font-weight-bold);
     font-family: var(--font-family-main);

apps/fretonator-web/src/styles.scss

@@ -34,8 +34,6 @@
 
   --note-color: #fafac6;
   --note-background: #1c1c1c;
-  --note-height: 36px;
-  --note-height-hover: 39px;
 
   --note-bg-tonic: #fecdaa;
   --note-color-tonic: #1c1c1c;
@@ -89,6 +87,7 @@
 
 body {
   margin: 0;
+  font-size: 16px;
   font-family: var(--font-family-main);
   font-weight: var(--font-weight-normal);
   background-color: var(--background-color-base);