Prettify banner-less profiles too

src/components/account-info.css

@@ -36,6 +36,31 @@
     hsla(0, 0%, 0%, 0) 100%
   );
   margin-bottom: -44px;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.account-container .header-banner.header-is-avatar {
+  mask-image: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%) 0%,
+    hsla(0, 0%, 0%, 0.987) 8.1%,
+    hsla(0, 0%, 0%, 0.951) 15.5%,
+    hsla(0, 0%, 0%, 0.896) 22.5%,
+    hsla(0, 0%, 0%, 0.825) 29%,
+    hsla(0, 0%, 0%, 0.741) 35.3%,
+    hsla(0, 0%, 0%, 0.648) 41.2%,
+    hsla(0, 0%, 0%, 0.55) 47.1%,
+    hsla(0, 0%, 0%, 0.45) 52.9%,
+    hsla(0, 0%, 0%, 0.352) 58.8%,
+    hsla(0, 0%, 0%, 0.259) 64.7%,
+    hsla(0, 0%, 0%, 0.175) 71%,
+    hsla(0, 0%, 0%, 0.104) 77.5%,
+    hsla(0, 0%, 0%, 0.049) 84.5%,
+    hsla(0, 0%, 0%, 0.013) 91.9%,
+    hsla(0, 0%, 0%, 0) 100%
+  );
+  filter: blur(32px) drop-shadow(0 0 32px black) saturate(3) opacity(0.5);
+  pointer-events: none;
 }
 .account-container .header-banner:hover {
   animation: position-object 5s ease-in-out 1s 5;
@@ -57,7 +82,7 @@
 }
 
 @media (min-height: 480px) {
-  .account-container .header-banner {
+  .account-container .header-banner:not(.header-is-avatar) {
     aspect-ratio: 3 / 1;
   }
 }

src/components/account-info.jsx

@@ -59,8 +59,8 @@ function AccountInfo({
     followersCount,
     followingCount,
     group,
-    header,
-    headerStatic,
+    // header,
+    // headerStatic,
     id,
     lastStatusAt,
     locked,
@@ -69,6 +69,17 @@ function AccountInfo({
     url,
     username,
   } = info || {};
+  let headerIsAvatar = false;
+  let { header, headerStatic } = info || {};
+  if (!header || /missing\.png$/.test(header)) {
+    if (avatar && !/missing\.png$/.test(avatar)) {
+      header = avatar;
+      headerIsAvatar = true;
+      if (avatarStatic && !/missing\.png$/.test(avatarStatic)) {
+        headerStatic = avatarStatic;
+      }
+    }
+  }
 
   const [headerCornerColors, setHeaderCornerColors] = useState([]);
 
@@ -128,7 +139,9 @@ function AccountInfo({
               <img
                 src={header}
                 alt=""
-                class="header-banner"
+                class={`header-banner ${
+                  headerIsAvatar ? 'header-is-avatar' : ''
+                }`}
                 onError={(e) => {
                   if (e.target.crossOrigin) {
                     if (e.target.src !== headerStatic) {