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 {