Tweak channel banner styling even more

diamondburned · Aug 23, 2024 · 9f75ac0 · 9f75ac0
1 parent 2956563
commit 9f75ac0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/internal/sidebar/channels/banner.go b/internal/sidebar/channels/banner.go
@@ -29,12 +29,39 @@ type Banner struct {
 
 var bannerCSS = cssutil.Applier("channels-banner", `
 	.channels-banner-shadow {
-		background: alpha(black, 0.75);
-		transition: opacity 0.25s;
-		opacity: 0;
+		transition: all 0.25s;
+	}
+	.channels-banner-shadow {
+		/* ease-in-out-opacity -max 0 -min 0.25 -start 24px -end 75px -steps 10 */
+		background-image: linear-gradient(
+			to top,
+			alpha(black, 0.25) 24px,
+			alpha(black, 0.25) 30px,
+			alpha(black, 0.24) 35px,
+			alpha(black, 0.21) 41px,
+			alpha(black, 0.16) 47px,
+			alpha(black, 0.09) 52px,
+			alpha(black, 0.04) 58px,
+			alpha(black, 0.01) 64px,
+			alpha(black, 0.00) 69px,
+			alpha(black, 0.00) 75px
+		);
 	}
 	.channels-scrolled .channels-banner-shadow {
-		opacity: 0.5;
+		/* ease-in-out-opacity -max 0.45 -min 0.65 -steps 10 */
+		background-image: linear-gradient(
+			to top,
+			alpha(black, 0.65) 0%,
+			alpha(black, 0.65) 11%,
+			alpha(black, 0.64) 22%,
+			alpha(black, 0.62) 33%,
+			alpha(black, 0.58) 44%,
+			alpha(black, 0.52) 56%,
+			alpha(black, 0.48) 67%,
+			alpha(black, 0.46) 78%,
+			alpha(black, 0.45) 89%,
+			alpha(black, 0.45) 100%
+		);
 	}
 `)
 
@@ -47,8 +74,8 @@ func NewBanner(ctx context.Context, guildID discord.GuildID) *Banner {
 
 	b.Picture = onlineimage.NewPicture(ctx, imgutil.HTTPProvider)
 	b.Picture.SetLayoutManager(gtk.NewBinLayout()) // magically force min size
-	b.Picture.SetSizeRequest(bannerWidth, bannerHeight)
 	b.Picture.SetContentFit(gtk.ContentFitCover)
+	b.Picture.SetSizeRequest(bannerWidth, bannerHeight)
 
 	b.Shadows = gtk.NewBox(gtk.OrientationVertical, 0)
 	b.Shadows.AddCSSClass("channels-banner-shadow")

diff --git a/internal/sidebar/channels/view.go b/internal/sidebar/channels/view.go
@@ -60,26 +60,14 @@ var viewCSS = cssutil.Applier("channels-view", `
 		margin: 0;
 		padding: 0;
 	}
+	.channels-name {
+		font-weight: 600;
+		font-size: 1.1em;
+		margin: 0.25em 0.5em;
+	}
 	.channels-header {
-		padding: 0 {$header_padding};
 		border-radius: 0;
 	}
-	.channels-has-banner  windowhandle,
-	.channels-has-banner .channels-header {
-		transition: linear 65ms all;
-	}
-	.channels-has-banner .channels-header {
-		/* go run ./cmd/ease-in-out-gradient/ -max 0.25 -min 0 -steps 5 */
-		background: linear-gradient(to bottom,
-			alpha(black, 0.24),
-			alpha(black, 0.19),
-			alpha(black, 0.06),
-			alpha(black, 0.01),
-			alpha(black, 0.00) 100%
-		);
-		box-shadow: none;
-		border: none;
-	}
 	.channels-has-banner .channels-header * {
 		color: white;
 		text-shadow: 0px 0px 6px alpha(black, 0.65);
@@ -88,10 +76,6 @@ var viewCSS = cssutil.Applier("channels-view", `
 		color: alpha(white, 0.75);
 		text-shadow: 0px 0px 3px alpha(black, 0.35);
 	}
-	.channels-name {
-		font-weight: 600;
-		font-size: 1.1em;
-	}
 `)
 
 // NewView creates a new View.
@@ -125,7 +109,7 @@ func NewView(ctx context.Context, guildID discord.GuildID) *View {
 	v.HeaderBar.SetShowStartTitleButtons(false)
 	v.HeaderBar.SetShowEndTitleButtons(false)
 	v.HeaderBar.SetShowBackButton(false)
-	v.HeaderBar.SetVAlign(gtk.AlignStart)
+	v.HeaderBar.SetVAlign(gtk.AlignEnd)
 	v.HeaderBar.SetHAlign(gtk.AlignFill)
 
 	v.Banner = NewBanner(ctx, guildID)