From 873b43e23aca35e6c93a796a3340cde2089c5680 Mon Sep 17 00:00:00 2001
From: Nick Hengeveld <nickh@github.com>
Date: Wed, 1 Apr 2015 20:54:54 -0700
Subject: [PATCH 1/2] Refactor chord style

- Variables for base colors
- Variables for inline SVG for chord variation backgrounds
- More chord colors
---
 app/assets/stylesheets/chords.css.scss | 89 ++++++++++++--------------
 1 file changed, 42 insertions(+), 47 deletions(-)

diff --git a/app/assets/stylesheets/chords.css.scss b/app/assets/stylesheets/chords.css.scss
index f233836..4521f30 100644
--- a/app/assets/stylesheets/chords.css.scss
+++ b/app/assets/stylesheets/chords.css.scss
@@ -1,3 +1,20 @@
+$seventh: 0px 0px/12px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2LjcgMTQuMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNi43IDE0LjIiIHhtbDpzcGFjZT0icHJlc2VydmUiIG9wYWNpdHk9IjAuNCI+DQo8dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDAgMTAuMjk3OSkiIGZvbnQtZmFtaWx5PSInQXJpYWxNVCciIGZvbnQtc2l6ZT0iMTIiPjc8L3RleHQ+DQo8L3N2Zz4NCg==');
+$minor: 0px 0px/12px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMCAxNC4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMCAxNC4yIiB4bWw6c3BhY2U9InByZXNlcnZlIiBvcGFjaXR5PSIwLjQiPg0KPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAwIDEwLjI5NzkpIiBmb250LWZhbWlseT0iJ0FyaWFsTVQnIiBmb250LXNpemU9IjEyIj5tPC90ZXh0Pg0KPC9zdmc+DQo=');
+$minor_7th: 0px 0px/24px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNi43IDE0LjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2LjcgMTQuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAxMC4yOTc5KSIgZm9udC1mYW1pbHk9IidBcmlhbE1UJyIgZm9udC1zaXplPSIxMiI+bTc8L3RleHQ+DQo8L3N2Zz4NCg==');
+
+$base_C: #F0838B;
+$base_C♯: #AE75B2;
+$base_G: #B8DA89;
+$base_G♯: #FFF887;
+$base_D: #939DE5;
+$base_D♯: #EF83B4;
+$base_A: #F79D6F;
+$base_A♯: #888;
+$base_E: #5DC3F3;
+$base_B: #84E2A1;
+$base_F: #76DBD3;
+$base_F♯: #FBBA76;
+
 .chords-2 { width: 4em; }
 .chords-3 { width: 7em; }
 .chords-4 { width: 9em; }
@@ -6,50 +23,28 @@
 .chords-7 { width: 15em; }
 .chords-8 { width: 18em; }
 
-.chord-C  { background: #F0838B; }
-.chord-Am { background: #D4747B; }
-.chord-G  { background: #B8DA89; }
-.chord-Em { background: #A3C17B; }
-.chord-D  { background: #838DD5; }
-.chord-A  { background: #F79D6F; }
-.chord-E  { background: #5DC3F3; }
-.chord-B  { background: #84E2A1; }
-.chord-F  { background: #76DBD3; }
-.chord-Dm { background: #6AC3BB; }
-
-.chord-G⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #B8DA89,
-    #B8DA89 5px,
-    #A3C17B 5px,
-    #A3C17B 10px
-  );
-}
-.chord-D⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #838DD5,
-    #838DD5 5px,
-    #746AAF 5px,
-    #746AAF 10px
-  );
-}
-.chord-A⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #F59D6F,
-    #F59D6F 5px,
-    #D4885F 5px,
-    #D4885F 10px
-  );
-}
-.chord-E⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #5DC3F3,
-    #5DC3F3 5px,
-    #53ACD6 5px,
-    #53ACD6 10px
-  );
-}
+.chord-C   { background: $base_C; }
+.chord-Cm  { background: $base_C $minor; }
+.chord-C⁷  { background: $base_C $seventh; }
+.chord-C♯m { background: $base_C♯ $minor; }
+.chord-G   { background: $base_G; }
+.chord-Gm  { background: $base_G $minor; }
+.chord-G⁷  { background: $base_G $seventh; }
+.chord-G♯m { background: $base_G♯ $minor; }
+.chord-D   { background: $base_D; }
+.chord-Dm  { background: $base_D $minor; }
+.chord-D⁷  { background: $base_D $seventh; }
+.chord-Dm⁷ { background: $base_D $minor_7th; }
+.chord-D♯m { background: $base_D♯ $minor; }
+.chord-A   { background: $base_A; }
+.chord-Am  { background: $base_A $minor; }
+.chord-A⁷  { background: $base_A $seventh; }
+.chord-A♯m { background: $base_A♯ $minor; }
+.chord-E   { background: $base_E; }
+.chord-Em  { background: $base_E $minor; }
+.chord-E⁷  { background: $base_E $seventh; }
+.chord-B   { background: $base_B; }
+.chord-Bm  { background: $base_B $minor; }
+.chord-B⁷  { background: $base_B $seventh; }
+.chord-F   { background: $base_F; }
+.chord-F♯m { background: $base_F♯ $minor; }

From 27c6916d27aed97ba3ca643d0b37985bd4ea3b76 Mon Sep 17 00:00:00 2001
From: Nick Hengeveld <nickh@github.com>
Date: Sun, 5 Jul 2015 21:22:16 -0700
Subject: [PATCH 2/2] ERBify chord CSS, better minor/7th style

---
 .../stylesheets/{chords.css.scss => chords.css.scss.erb}   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)
 rename app/assets/stylesheets/{chords.css.scss => chords.css.scss.erb} (59%)

diff --git a/app/assets/stylesheets/chords.css.scss b/app/assets/stylesheets/chords.css.scss.erb
similarity index 59%
rename from app/assets/stylesheets/chords.css.scss
rename to app/assets/stylesheets/chords.css.scss.erb
index 4521f30..32e569f 100644
--- a/app/assets/stylesheets/chords.css.scss
+++ b/app/assets/stylesheets/chords.css.scss.erb
@@ -1,6 +1,7 @@
-$seventh: 0px 0px/12px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2LjcgMTQuMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNi43IDE0LjIiIHhtbDpzcGFjZT0icHJlc2VydmUiIG9wYWNpdHk9IjAuNCI+DQo8dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDAgMTAuMjk3OSkiIGZvbnQtZmFtaWx5PSInQXJpYWxNVCciIGZvbnQtc2l6ZT0iMTIiPjc8L3RleHQ+DQo8L3N2Zz4NCg==');
-$minor: 0px 0px/12px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMCAxNC4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMCAxNC4yIiB4bWw6c3BhY2U9InByZXNlcnZlIiBvcGFjaXR5PSIwLjQiPg0KPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAwIDEwLjI5NzkpIiBmb250LWZhbWlseT0iJ0FyaWFsTVQnIiBmb250LXNpemU9IjEyIj5tPC90ZXh0Pg0KPC9zdmc+DQo=');
-$minor_7th: 0px 0px/24px 12px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNi43IDE0LjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2LjcgMTQuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAxMC4yOTc5KSIgZm9udC1mYW1pbHk9IidBcmlhbE1UJyIgZm9udC1zaXplPSIxMiI+bTc8L3RleHQ+DQo8L3N2Zz4NCg==');
+$stripe: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSI1IiBzdHlsZT0ic3Ryb2tlOnJnYigwLDAsMCk7c3Ryb2tlLXdpZHRoOjEiIC8+DQo8L3N2Zz4NCg==');
+$seventh: top left/1px 5px repeat-x $stripe;
+$minor: bottom left/1px 5px repeat-x $stripe;
+$minor_7th: 0px 0px/48px 24px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNi43IDE0LjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2LjcgMTQuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAxMC4yOTc5KSIgZm9udC1mYW1pbHk9IidBcmlhbE1UJyIgZm9udC1zaXplPSIxMiI+bTc8L3RleHQ+DQo8L3N2Zz4NCg==');
 
 $base_C: #F0838B;
 $base_C♯: #AE75B2;