Try add the account header

This commit is contained in:
Lim Chee Aun 2023-03-10 17:36:42 +08:00
parent b12b96b8e1
commit 8100a90421
3 changed files with 49 additions and 1 deletions

View file

@ -990,7 +990,7 @@ body:has(.status-deck) .media-post-link {
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
box-shadow: 0 -1px 32px var(--drop-shadow-color); box-shadow: 0 -1px 32px var(--drop-shadow-color);
animation: slide-up 0.3s var(--timing-function); animation: slide-up 0.3s var(--timing-function);
border: 1px solid var(--outline-color); /* border: 1px solid var(--outline-color); */
} }
.sheet-max { .sheet-max {
width: 90vw; width: 90vw;

View file

@ -2,10 +2,55 @@
color: var(--outline-color); color: var(--outline-color);
} }
#account-container .header-banner {
pointer-events: none;
aspect-ratio: 6 / 1;
width: 100%;
height: auto;
object-fit: cover;
/* mask fade out bottom of banner */
mask-image: linear-gradient(
to bottom,
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 14%,
hsla(0, 0%, 0%, 0.951) 26.2%,
hsla(0, 0%, 0%, 0.896) 36.8%,
hsla(0, 0%, 0%, 0.825) 45.9%,
hsla(0, 0%, 0%, 0.741) 53.7%,
hsla(0, 0%, 0%, 0.648) 60.4%,
hsla(0, 0%, 0%, 0.55) 66.2%,
hsla(0, 0%, 0%, 0.45) 71.2%,
hsla(0, 0%, 0%, 0.352) 75.6%,
hsla(0, 0%, 0%, 0.259) 79.6%,
hsla(0, 0%, 0%, 0.175) 83.4%,
hsla(0, 0%, 0%, 0.104) 87.2%,
hsla(0, 0%, 0%, 0.049) 91.1%,
hsla(0, 0%, 0%, 0.013) 95.3%,
hsla(0, 0%, 0%, 0) 100%
);
margin-bottom: -44px;
}
@media (min-height: 480px) {
#account-container .header-banner {
aspect-ratio: 3 / 1;
}
}
@media (min-height: 720px) {
#account-container .header-banner {
aspect-ratio: 16 / 9;
}
}
#account-container header { #account-container header {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
text-shadow: 0 0 24px var(--bg-color);
}
#account-container header .avatar {
box-shadow: 0 0 24px var(--bg-color);
} }
#account-container .note { #account-container .note {

View file

@ -122,6 +122,9 @@ function Account({ account, instance: propInstance, onClose }) {
) : ( ) : (
info && ( info && (
<> <>
{header && !/missing\.png$/.test(header) && (
<img src={header} alt="" class="header-banner" />
)}
<header> <header>
<AccountBlock <AccountBlock
account={info} account={info}