profile as bg

CALCKEY.md

@@ -20,7 +20,6 @@
 
 ## Work in progress
 
-- Profile background as banner
 - Less cluttered notification summary
 - Better timeline top bar
 
@@ -31,6 +30,7 @@
 - Star as default reaction
 - Rosé Pine by default (+ non-themable elements made Rosé Pine)
 - Better sidebar/navbar
+- Profile background as banner
 - Mark as read from notifications widget
 - Better welcome screen (not logged in)
 - Ability to turn off "Connection lost" message

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

@@ -48,17 +48,6 @@ defineProps<{
 		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 {

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

@@ -120,6 +120,18 @@ export default defineComponent({
 			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 {

packages/client/src/pages/user/home.vue

@@ -213,11 +213,23 @@ onUnmounted(() => {
 
 					> .banner {
 						height: 100%;
-						background-color: #4c5e6d;
+						background-color: #26233a;
 						background-size: cover;
 						background-position: center;
 						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
 						will-change: background-position;
+
+						&::after {
+							content: "";
+							background-image: inherit;
+							position: fixed;
+							inset: 0;
+							background-size: cover;
+							background-position: center;
+							pointer-events: none;
+							opacity: .1;
+							filter: blur(10px);
+						}
 					}
 
 					> .fade {