Make the cards colorfull

style.scss

@@ -2,14 +2,32 @@
     --figure-size: 0.9in;
     --figure-size: 1.35in;
     --figure-size: 1.5in;
+    --color-border:         MidnightBlue;
+    --color-bg-figure:      white;
+
+    --color-bg:             PaleTurquoise; // PaleTurquoise;
+    --color-bg-body:        LightCyan;     // PaleTurquoise;
+    --color-bg-frame:       PaleTurquoise; // LightSkyBlue;
+    --color-bg-costbar:     SandyBrown;    // DarkOrange;
+
+    --color-text-title:     MidnightBlue;
+    --color-text-body:      black;
+    --color-text-costbar:   white;
+    --color-shadow-costbar:  0.08em       0 0.05em Maroon,
+                            -0.08em       0 0.05em Maroon,
+                            0        0.08em 0.05em Maroon,
+                            0       -0.08em 0.05em Maroon;
+    --figure-color:         #555;
+
     width: 2.5in;
     height: 3.5in;
     box-sizing: border-box;
     border-radius: 0mm;
     border-width: 0.3mm;
-    border-color: black;
+    border-color: var(--color-border);
+
     border-style: solid;
-    background-color: #fff;
+    background-color: var(--color-bg);
     overflow: hidden;
 
     font-size: 2.5mm;
@@ -25,35 +43,38 @@
         "description description";
 
     header {
+        font-family: montserrat, sans-serif;
+        font-style: normal;
+        font-weight: 200;
+
         grid-area: title;
         font-size: 1.8em;
         line-height: 1em;
         margin-left: -1em;
         border-radius: 1mm 1mm 0 0;
         text-align: center;
-        background-color: #ddd;
+        background-color: var(--color-bg-frame);
         border-radius: 0;
-        color: #333;
+        color: var(--color-text-title);
     }
     .symbol {
         grid-area: symbol;
         text-align: center;
-        background-color: #ddd;
-        color: #333;
+        background-color: var(--color-bg-frame);
+        color: var(--color-text-title);
         padding-top: 0.6mm;
         padding-left: 0.8mm;
         white-space: nowrap;
     }
     figure {
         grid-area: figure;
-        background-color: #fff;
+        background-color: var(--color-bg-figure);
         overflow: hidden;
         position: relative;
         border-radius: 0;
         margin: 0;
 
         .layer {
-            --figure-color: #555;
             color: var(--figure-color);
             position: absolute;
             top:0;right:0;left:0;bottom:0;
@@ -90,7 +111,7 @@
     .playcosts {
         grid-area: playcosts;
         border-left: solid 0.3mm #ccc;
-        background-color: #ddd;
+        background-color: var(--color-bg-frame);
         color: #444 ;
         padding: 0.5mm;
         ul {
@@ -106,8 +127,9 @@
     .costbar {
         grid-area: costbar;
         border-radius: 0;
-        background-color: #555;
-        color: white;
+        background-color: var(--color-bg-costbar);
+        color: var(--color-text-costbar);
+        text-shadow: var(--color-shadow-costbar);
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
@@ -128,7 +150,8 @@
         grid-area: description;
         margin: 1mm;
         border-radius: 1mm;
-        background-color: #ddd;
+        background-color: var(--color-bg-body);
+        color: var(--color-text-body);
         font-size: 0.9em;
         position: relative;
 
@@ -167,6 +190,7 @@
 }
 
 
+.fjomp_card.item,
 .fjomp_card.figure,
 .fjomp_card.repertoire {
     --figure-size: 2.4in;

templates/card_header.html.j2

@@ -12,3 +12,4 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" {{async}}/>
 <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" {{async}}/>
 
+<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Montserrat'>