glaaery styling

assets/scss/style.scss

@@ -1,6 +1,31 @@
 @import 'buefy';
 @import 'base';
 
+.page-title {
+  @include font-title();
+  color: $color__neutral-900;
+  text-align: center;
+
+  @media (min-width: $bp__layout) {
+    font-size: 3.7vw;
+    text-align: left;
+  }
+
+  @media (min-width: 90em) {
+    font-size: 3.5rem;
+  }
+}
+
+.page-heading {
+  margin: 1rem;
+
+  @media (min-width: $bp__layout) {
+    width: 14em;
+    max-width: calc(50% - #{$site-menu__header-width} - 3rem);
+    margin: 2rem 1rem 1rem 2rem;
+  }
+}
+
 .thumb-overlay {
   $color: $color__neutral-100; // color of overlay
 

components/ContentPage.vue

@@ -1,6 +1,6 @@
 <template>
   <article class="content-page">
-    <h1 v-if="heading !== ''" class="page-heading title">{{ heading }}</h1>
+    <h1 v-if="heading !== ''" class="page-heading page-title">{{ heading }}</h1>
     <section class="content-container">
       <div v-if="$slots.default" class="content">
         <slot></slot>
@@ -91,28 +91,6 @@ $z-index-top: 10;
 .page-heading {
   z-index: $z-index-top;
   position: relative;
-  margin: 1rem;
-
-  @media (min-width: $bp__layout) {
-    width: 14em;
-    max-width: calc(50% - #{$site-menu__header-width} - 3rem);
-    margin: 2rem 1rem 1rem 2rem;
-  }
-}
-
-.title {
-  @include font-title();
-  color: $color__neutral-900;
-  text-align: center;
-
-  @media (min-width: $bp__layout) {
-    font-size: 3.7vw;
-    text-align: left;
-  }
-
-  @media (min-width: 90em) {
-    font-size: 3.5rem;
-  }
 }
 
 .background {

components/GalleryFeatured.vue

@@ -50,6 +50,28 @@ export default {
     color: #fff;
   }
 
+  .thumb-overlay {
+    $color: $color__neutral-100; // color of overlay
+
+    &::before {
+      background: linear-gradient(
+                    to bottom,
+                    rgba($color, .9),
+                    rgba($color, .5),
+                    rgba($color, .5)
+                  );
+    }
+
+    &::after {
+      background: linear-gradient(
+                    to left,
+                    rgba($color, .4),
+                    rgba($color, 0),
+                    rgba($color, .4)
+                  );
+    }
+  }
+
 }
 
 @media (min-width: $bp__layout) {

components/GalleryPage.vue

@@ -8,7 +8,8 @@
                         @clickPrev="handleClickPrev"
                         @clickNext="handleClickNext"
                         @close="imageViewerIsVisible = false" />
-    <div class="gallery">
+    <article class="gallery">
+      <h1 class="page-heading page-title">My Galleries</h1>
       <GalleryFeatured class="gallery__featured"
                        :galleries="galleries"
                        @clicked="handleFeaturedClick" />
@@ -17,7 +18,7 @@
                      :galleries="galleries"
                      :active-row="activeRow"
                      @thumbClick="handleThumbClick"/>
-    </div>
+    </article>
   </div>
 </template>
 
@@ -95,6 +96,17 @@ export default {
 }
 
 @media (max-width: $bp__layout) {
+  .page-heading {
+    z-index: 5;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 2rem;
+    pointer-events: none;
+  }
+
   .gallery-page {
     padding-top: $site-menu__header-height;
   }
@@ -108,6 +120,7 @@ export default {
   }
 
     .gallery__thumbs {
+      z-index: 10;
       position: absolute;
       top: 0;
       left: 0;
@@ -124,6 +137,19 @@ export default {
 }
 
 @media (min-width: $bp__layout) {
+  .page-heading {
+    position: absolute;
+    font-size: 3.5rem;
+    top: 0;
+    left: 0;
+    margin-top: 0;
+    max-width: calc(100% - 3rem - #{$gallery-featured-width--compact});
+
+    @media (min-width: $bp__gallery-compact) {
+      max-width: calc(100% - 2rem - #{$gallery-featured-width});
+    }
+  }
+
   .mobile-only {
     display: none;
   }