From 622e25ec4ad0ccb83f3428e3ff0d65b90d284a5f Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 13 Feb 2019 13:03:25 +0000
Subject: [PATCH] box shadow on thumbs-list

---
 TODO.md                      | 4 +++-
 components/GalleryThumbs.vue | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 80dc04b..eb52407 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,9 @@
 ## TODO
 * Galleries - thumbs on desktop - way to make them stand out aginst the image
-* Home - text needs to stand out more on light background areas
+* Home - tagline text needs to stand out more on light background areas
        - shadow-deco maybe?
+* General - titles - shadow looks untidy before title transitions in
+          - make part of transition?
 * General - sort things by sort_order
 * mailer
 * remove testing/dev mode or whatever its called from axios in nuxt.config.js
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 4851d55..75c5eb2 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="gallery-thumbs__spacer"></div>
     <ul ref="galleryThumbsList"
-        class="gallery-thumbs__list">
+        class="gallery-thumbs__list list-shadow">
       <li v-for="(gallery, galleryIndex) in galleries"
           :key="galleryIndex"
           :class="{ 'is-active': activeRow === galleryIndex }"
@@ -383,6 +383,12 @@ export default {
     transition: opacity .3s; // TEMP
   }
 
+  .list-shadow {
+    $color: $color__neutral-100;
+    box-shadow: 0 -3px 33px -9px $color, 0 0 8px -3px $color;
+    background-color: rgba($color, .7);
+  }
+
   .gallery-thumbs__row-container {
     position: absolute;
     width: 100%;