Improve header banner

Make it so you can see the entire banner.
Make the background to the profile more contrasty.
This commit is contained in:
Nick Colley 2023-02-01 11:30:36 +00:00
parent 7d79b98e8b
commit 55b9795b12
2 changed files with 19 additions and 5 deletions

View File

@ -5,6 +5,11 @@
<div class={className} <div class={className}
style="background-image: url({headerImage});" style="background-image: url({headerImage});"
ref:accountProfile> 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-wrapper">
<div class="account-profile-grid"> <div class="account-profile-grid">
<AccountProfileHeader {account} {relationship} {verifyCredentials} /> <AccountProfileHeader {account} {relationship} {verifyCredentials} />
@ -21,7 +26,6 @@
position: relative; position: relative;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
padding-top: 175px;
} }
.account-profile.moved { .account-profile.moved {
@ -29,7 +33,6 @@
} }
.account-profile.header-image-is-missing { .account-profile.header-image-is-missing {
padding-top: 0;
background-color: #ccc; background-color: #ccc;
} }
@ -50,8 +53,8 @@
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) { @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
:global(.account-profile-grid-wrapper) { :global(.account-profile-grid-wrapper) {
-webkit-backdrop-filter: blur(7px) saturate(110%); -webkit-backdrop-filter: blur(20px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%); backdrop-filter: blur(20px) saturate(110%);
background-color: var(--account-profile-bg-backdrop-filter); background-color: var(--account-profile-bg-backdrop-filter);
} }
} }
@ -106,6 +109,17 @@
grid-row-gap: 0; 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> </style>
<script> <script>
import AccountProfileHeader from './AccountProfileHeader.html' import AccountProfileHeader from './AccountProfileHeader.html'

View File

@ -77,7 +77,7 @@
--mask-opaque-bg: #{rgba($toast-bg, 0.8)}; --mask-opaque-bg: #{rgba($toast-bg, 0.8)};
--loading-bg: #{#ededed}; --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)}; --account-profile-bg: #{rgba($main-bg-color, 0.9)};
--deemphasized-text-color: #{$deemphasized-color}; --deemphasized-text-color: #{$deemphasized-color};