From aa8eec20cb41845279e26d24952d067f747c7774 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 13 Feb 2019 12:47:21 +0000
Subject: [PATCH] ThumbNav more prominent

---
 TODO.md                      | 5 ++---
 assets/scss/style.scss       | 7 +++++++
 components/GalleryPage.vue   | 2 +-
 components/GalleryThumbs.vue | 4 ++--
 components/ThumbNav.vue      | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/TODO.md b/TODO.md
index 0f3bc2c..80dc04b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,7 @@
 ## TODO
-* Galleries - title not distinguishable on light images
-* Galleries - navigation icons not obvious enough with light background thumbs
 * Galleries - thumbs on desktop - way to make them stand out aginst the image
+* Home - text needs to stand out more on light background areas
+       - shadow-deco maybe?
 * General - sort things by sort_order
 * mailer
 * remove testing/dev mode or whatever its called from axios in nuxt.config.js
@@ -14,7 +14,6 @@
 ## Fixes
 * refreshing page on gallery and then quickly usingh history buttons breaks it
 * broken layout at exactly 40em (640px) breakpoint
-* galleries page - 'Added non-passive event listener to a scroll-blocking ... event'
 * galleries - click on thumb, click on different gallery, click on original gallery
               and the thumb list doesn't scroll to correct position to show thumb 0,
               it is still showing the thumb that was clicked on first
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index ded4422..901fe36 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -119,6 +119,13 @@
   background-color: rgba($color__primary-100, .7);
 }
 
+.shadow-deco {
+  $color: rgba($color__neutral-100, .3);
+
+  background-color: $color;
+  box-shadow: 0 0 64px 64px $color;
+}
+
 .selected-indicator {
   @media (min-width: $bp__layout) {
     &::before {
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index d354302..c61f9a5 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -12,7 +12,7 @@
                         @clickNext="handleClickNext"
                         @close="imageViewerIsVisible = false" />
     <article class="gallery">
-      <h1 class="page-heading page-title">My Galleries</h1>
+      <h1 class="page-heading page-title"><span class="shadow-deco">My Galleries</span></h1>
       <GalleryFeatured class="gallery__featured load-transition load-transition--1"
                        :galleries="galleries"
                        :gallery-active="activeGalleryIndex"
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 53cacc8..4851d55 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -33,11 +33,11 @@
           </li>
         </ul>
       </li>
-      <ThumbNav class="thumb-nav thumb-nav--left mobile-hide"
+      <ThumbNav class="thumb-nav thumb-nav--left mobile-hide shadow-deco"
                 :class="{ 'is-active': isLeftDesktopNavActive }"
                 direction="left"
                 @navClick="handleNavClickDesktop(activeRow, 'left')"/>
-      <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
+      <ThumbNav class="thumb-nav thumb-nav--right mobile-hide shadow-deco"
                 :class="{ 'is-active': isRightDesktopNavActive }"
                 direction="right"
                 @navClick="handleNavClickDesktop(activeRow, 'right')"/>
diff --git a/components/ThumbNav.vue b/components/ThumbNav.vue
index 57aaf98..effd4c1 100644
--- a/components/ThumbNav.vue
+++ b/components/ThumbNav.vue
@@ -46,7 +46,7 @@ export default {
 
 .svg-container {
   transition: opacity .3s, transform .5s;
-  opacity: .4;
+  opacity: .6;
   transform: none;
 
   @at-root .wrapper:hover & {