a fork of iceshrimp.net but a tweaked frontend to my personal liking. waow
fediverse
social-media
social
iceshrimp
fedi
[frontend/pages] Update profile banner appearance
+24
-6
+1
-1
Iceshrimp.Frontend/Components/ProfileInfo.razor.css
+1
-1
Iceshrimp.Frontend/Components/ProfileInfo.razor.css
+5
-3
Iceshrimp.Frontend/Pages/ProfileView.razor
+5
-3
Iceshrimp.Frontend/Pages/ProfileView.razor
···
40
40
41
41
@if (UserResponse.BannerUrl != null)
42
42
{
43
-
<img class="banner" src="@UserResponse.BannerUrl"
44
-
alt="@(UserResponse.BannerAlt ?? Loc["{0}'s banner", UserResponse.DisplayName ?? UserResponse.Username])"
45
-
title="@(UserResponse.BannerAlt ?? Loc["{0}'s banner", UserResponse.DisplayName ?? UserResponse.Username])"/>
43
+
<div class="banner">
44
+
<img class="banner" src="@UserResponse.BannerUrl"
45
+
alt="@(UserResponse.BannerAlt ?? Loc["{0}'s banner", UserResponse.DisplayName ?? UserResponse.Username])"
46
+
title="@(UserResponse.BannerAlt ?? Loc["{0}'s banner", UserResponse.DisplayName ?? UserResponse.Username])"/>
47
+
</div>
46
48
}
47
49
48
50
<div class="profile-card">
+18
-2
Iceshrimp.Frontend/Pages/ProfileView.razor.css
+18
-2
Iceshrimp.Frontend/Pages/ProfileView.razor.css
···
15
15
16
16
.subheader {
17
17
display: flex;
18
+
z-index: +1;
18
19
}
19
20
20
21
.name-section {
···
54
55
}
55
56
56
57
.banner {
57
-
display: block;
58
+
position: relative;
58
59
width: 100%;
59
60
max-width: 45rem;
60
61
height: auto;
61
62
object-fit: cover;
62
63
aspect-ratio: 21/9;
63
-
margin: 1rem auto -7em auto;
64
+
margin: 1rem auto -4.5rem auto;
65
+
border-top-left-radius: 1rem;
66
+
border-top-right-radius: 1rem;
67
+
}
68
+
69
+
.banner::after {
70
+
content: "";
71
+
display: block;
72
+
position: absolute;
73
+
top: 0;
74
+
left: 0;
75
+
width: 100%;
76
+
height: 100%;
77
+
margin: 1rem auto 0 auto;
78
+
background: linear-gradient(transparent 60%, color-mix(in srgb, var(--dark-color) 65%, transparent));
64
79
border-top-left-radius: 1rem;
65
80
border-top-right-radius: 1rem;
81
+
z-index: 1;
66
82
}
67
83
68
84
.container:has(.banner) .name-section {