From e5a0b9a64fe817abb37915a7fe3efc56a407c565 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 13 Feb 2019 13:36:27 +0000
Subject: [PATCH] home page taglines better contrast

---
 TODO.md                |  3 ---
 assets/scss/style.scss |  7 +++++++
 pages/index.vue        | 10 +++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/TODO.md b/TODO.md
index eb52407..85a4d4f 100644
--- a/TODO.md
+++ b/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
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 901fe36..e6d5eb8 100644
--- a/assets/scss/style.scss
+++ b/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;
diff --git a/pages/index.vue b/pages/index.vue
index 33de293..391098c 100644
--- a/pages/index.vue
+++ b/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%
   );
 }