mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 17:25:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

Try add the account header

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

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

45
src/components/account.css
View file

@ -2,10 +2,55 @@
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 {
position: relative;
display: flex;
align-items: center;
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 {

3
src/components/account.jsx
View file

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