pf bg

CALCKEY.md

@@ -19,7 +19,6 @@
 ## In progress
 
 - Better timeline top bar
-- Profile background
 
 ## Implemented
 
@@ -30,6 +29,7 @@
 - Better sidebar/navbar
 - Mark as read from notifications widget
 - Less cluttered notification summary
+- Profile background as banner
 - Better welcome screen (not logged in)
 - Ability to turn off "Connection lost" message
 - Spinner instead of "Loading..."

packages/client/src/components/user-info.vue

@@ -47,6 +47,18 @@ defineProps<{
 		background-color: rgba(0, 0, 0, 0.1);
 		background-size: cover;
 		background-position: center;
+
+		&::after {
+			content: "";
+			background-image: inherit;
+			position: fixed;
+			inset: 0;
+			background-size: cover;
+			background-position: center;
+			pointer-events: none;
+			opacity: .1;
+			filter: blur(10px);
+		}
 	}
 
 	> .avatar {
@@ -90,7 +102,7 @@ defineProps<{
 		> .mfm {
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;  
+			-webkit-box-orient: vertical;
 			overflow: hidden;
 		}
 	}