home page taglines better contrast

TODO.md

@@ -1,7 +1,4 @@
 ## TODO
-* Galleries - thumbs on desktop - way to make them stand out aginst the image
-* 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

assets/scss/style.scss

@@ -6,6 +6,13 @@
   color: $color__neutral-900;
   text-align: center;
 
+  transition: opacity 3s 2s;
+  opacity: 0;
+
+  @at-root .is-mounted & {
+    opacity: 1;
+  }
+
   @media (min-width: $bp__layout) {
     font-size: 3.7vw;
     text-align: left;

pages/index.vue

@@ -140,7 +140,6 @@ $padding: 1rem;
 
 .background-overlay {
   $color: $color__neutral-100;
-  // $color: red;
 
   background-color: rgba($color, .4);
   background: linear-gradient(
@@ -165,9 +164,14 @@ $padding: 1rem;
   linear-gradient(
     to right,
     rgba($color, .4),
-    rgba($color, 0) 10%,
-    rgba($color, 0) 90%,
+    rgba($color, 0) 20%,
+    rgba($color, 0) 80%,
     rgba($color, .4)
+  ),
+  radial-gradient(
+    at 100% 100%,
+    rgba($color, .4) 0,
+    rgba($color, 0) 40%
   );
 }