diff --git a/src/app.css b/src/app.css
index 288e5508..12c43776 100644
--- a/src/app.css
+++ b/src/app.css
@@ -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;
diff --git a/src/components/account.css b/src/components/account.css
index 2d66c31b..f1609f7c 100644
--- a/src/components/account.css
+++ b/src/components/account.css
@@ -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 {
diff --git a/src/components/account.jsx b/src/components/account.jsx
index 76dc18c7..8f100660 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -122,6 +122,9 @@ function Account({ account, instance: propInstance, onClose }) {
) : (
info && (
<>
+ {header && !/missing\.png$/.test(header) && (
+
+ )}