From f81e666c244a66735dd2517b1848eeef7395928a Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Thu, 29 Oct 2020 13:12:08 +0000
Subject: [PATCH] Handling banners

---
 epicyon-blog.css   | 9 +++------
 epicyon-follow.css | 7 +++----
 epicyon-links.css  | 8 +++-----
 epicyon-search.css | 7 +++----
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/epicyon-blog.css b/epicyon-blog.css
index 0e78fa287..d0e759820 100644
--- a/epicyon-blog.css
+++ b/epicyon-blog.css
@@ -44,6 +44,7 @@
     --timeline-border-radius: 30px;
     --focus-color: white;
     --line-spacing: 130%;
+    --banner-height: 15vh;
 }
 
 @font-face {
@@ -99,12 +100,8 @@ a:focus {
 }
 
 .timeline-banner {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("banner.png");
-    height: 10%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    position: relative;
+    width: 98vw;
+    height: var(--banner-height);
 }
 
 .hero-image {
diff --git a/epicyon-follow.css b/epicyon-follow.css
index 1e255985d..4b41a1830 100644
--- a/epicyon-follow.css
+++ b/epicyon-follow.css
@@ -31,6 +31,7 @@
     --follow-text-size2: 40px;
     --follow-text-entry-width: 90%;
     --focus-color: white;
+    --banner-height: 15vh;
 }
 
 @font-face {
@@ -80,10 +81,8 @@ a:focus {
 }
 
 .searchBanner {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("search_banner.png");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 90%;
+    width: 98vw;
+    height: var(--banner-height);
 }
 
 .follow {
diff --git a/epicyon-links.css b/epicyon-links.css
index 1434a4df7..be0316b71 100644
--- a/epicyon-links.css
+++ b/epicyon-links.css
@@ -64,6 +64,7 @@
     --column-left-width: 10vw;
     --column-center-width: 80vw;
     --column-right-width: 10vw;
+    --banner-height: 15vh;
 }
 
 @font-face {
@@ -181,11 +182,8 @@ a:focus {
 }
 
 .timeline-banner {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("banner.png");
-    height: 15%;
-    background-repeat: no-repeat;
-    background-size: 100vw;
-    position: relative;
+    width: 98vw;
+    height: var(--banner-height);
 }
 
 .hero-image {
diff --git a/epicyon-search.css b/epicyon-search.css
index 92ed3217e..3ba7b3efe 100644
--- a/epicyon-search.css
+++ b/epicyon-search.css
@@ -33,6 +33,7 @@
     --follow-text-size2: 40px;
     --follow-text-entry-width: 90%;
     --focus-color: white;
+    --banner-height: 15vh;
 }
 
 @font-face {
@@ -90,10 +91,8 @@ a:focus {
 }
 
 .searchBanner {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("search_banner.png");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 90%;
+    width: 98vw;
+    height: var(--banner-height);
 }
 
 .follow {