ThumbNav more prominent

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

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 {

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"

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')"/>

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 & {