From 55b9795b12ac1ddd550923acc4c729b5304c829a Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@hippodigital.co.uk>
Date: Wed, 1 Feb 2023 11:30:36 +0000
Subject: [PATCH] Improve header banner

Make it so you can see the entire banner.
Make the background to the profile more contrasty.
---
 .../_components/profile/AccountProfile.html   | 22 +++++++++++++++----
 src/scss/themes/_base.scss                    |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index a2b53e9e..9cfc06e8 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -5,6 +5,11 @@
 <div class={className}
      style="background-image: url({headerImage});"
      ref:accountProfile>
+  {#if !headerImageIsMissing}
+    <div class="account-profile-banner">
+      <img class="account-profile-banner-image" src={headerImage} alt=""/>
+    </div>
+  {/if}
   <div class="account-profile-grid-wrapper">
     <div class="account-profile-grid">
       <AccountProfileHeader {account} {relationship} {verifyCredentials} />
@@ -21,7 +26,6 @@
     position: relative;
     background-size: cover;
     background-position: center;
-    padding-top: 175px;
   }
 
   .account-profile.moved {
@@ -29,7 +33,6 @@
   }
 
   .account-profile.header-image-is-missing {
-    padding-top: 0;
     background-color: #ccc;
   }
 
@@ -50,8 +53,8 @@
 
   @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
     :global(.account-profile-grid-wrapper) {
-      -webkit-backdrop-filter: blur(7px) saturate(110%);
-      backdrop-filter: blur(7px) saturate(110%);
+      -webkit-backdrop-filter: blur(20px) saturate(110%);
+      backdrop-filter: blur(20px) saturate(110%);
       background-color: var(--account-profile-bg-backdrop-filter);
     }
   }
@@ -106,6 +109,17 @@
       grid-row-gap: 0;
     }
   }
+
+  .account-profile-banner {
+    aspect-ratio: 3/1;
+    background-color: var(--body-bg);
+  }
+  .account-profile-banner-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>
 <script>
   import AccountProfileHeader from './AccountProfileHeader.html'
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index ff91c647..1aa958cf 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -77,7 +77,7 @@
   --mask-opaque-bg: #{rgba($toast-bg, 0.8)};
   --loading-bg: #{#ededed};
 
-  --account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.7)};
+  --account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.85)};
   --account-profile-bg: #{rgba($main-bg-color, 0.9)};
 
   --deemphasized-text-color: #{$deemphasized-color};