From c2f7bee2bd176842be6ec41ceab13ff4d3bda22e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.com>
Date: Wed, 14 Nov 2018 10:52:58 -0500
Subject: [PATCH] Shade images with project/title color; remove on hover

See https://gitlab.com/agaric/resources/raw-notes/blob/master/2018-11-14-putting-a-stylesheet-defined-but-user-selected-color-at-a-partial-opacity-over-a-user-uploaded-background-image.md
---
 agaric/sass/agaric/_component.card.scss | 43 +++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/agaric/sass/agaric/_component.card.scss b/agaric/sass/agaric/_component.card.scss
index 0f2e86c..c2eff1e 100644
--- a/agaric/sass/agaric/_component.card.scss
+++ b/agaric/sass/agaric/_component.card.scss
@@ -16,72 +16,115 @@ a.card {
 .card.is-blue {
   color: $white;
   background-color: $blue;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
+  }
 }
 
 a.card.is-blue:hover {
   color: $white;
   background-color: darken($blue, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-marine {
   color: $white;
   background-color: $marine;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($marine, .5);
+  }
 }
 
 a.card.is-marine:hover {
   color: $white;
   background-color: darken($marine, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-berry {
   color: $white;
   background-color: $berry;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($berry, .5);
+  }
 }
 
 a.card.is-berry:hover {
   color: $white;
   background-color: darken($berry, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-cinnamon {
   color: $white;
   background-color: $cinnamon;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($cinnamon, .5);
+  }
 }
 
 a.card.is-cinnamon:hover {
   color: $white;
   background-color: darken($cinnamon, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-dark {
   color: $white;
   background-color: $dark;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($dark, .5);
+  }
 }
 
 a.card.is-dark:hover {
   color: $white;
   background-color: darken($dark, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-grey {
   color: $white;
   background-color: $grey;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($grey, .5);
+  }
 }
 
 a.card.is-grey:hover {
   color: $white;
   background-color: darken($grey, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
 
 .card.is-dandelion {
   color: $white;
   background-color: $dandelion;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($dandelion, .5);
+  }
 }
 
 a.card.is-dandelion:hover {
   color: $white;
   background-color: darken($dandelion, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
 }
+
 // Project
 .card-project {
   position: relative;