sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve visibility of artist names in background patterns

Browse Source 
Adjust background pattern styling to increase opacity and use a more contrasting text color for better visibility of artist names on desktop advertisements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 96bfa4b4-7724-49cb-a476-6cc98b264849
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-04 15:01:18 +00:00
parent f8a8886773
commit 0fa2ad0561
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772636445481.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

8
client/src/components/artist-pattern-bg.tsx
View File

@ -35,9 +35,9 @@ export default function ArtistPatternBg({ children, className = "", seed = 42 }:
name: ARTISTS[Math.floor(rng() * ARTISTS.length)], name: ARTISTS[Math.floor(rng() * ARTISTS.length)],
x: rng() * 100, x: rng() * 100,
y: (i / count) * 100 + (rng() - 0.5) * 8, y: (i / count) * 100 + (rng() - 0.5) * 8,
size: 10 + rng() * 10, size: 11 + rng() * 11,
opacity: 0.06 + rng() * 0.09, opacity: 0.08 + rng() * 0.12,
rotation: -12 + rng() * 24, rotation: -15 + rng() * 30,
italic: rng() > 0.6, italic: rng() > 0.6,
}); });
} }
@ -50,7 +50,7 @@ export default function ArtistPatternBg({ children, className = "", seed = 42 }:
{items.map((item, i) => ( {items.map((item, i) => (
<span <span
key={i} key={i}
className="absolute whitespace-nowrap text-primary" className="absolute whitespace-nowrap text-foreground"
style={{ style={{
left: `${item.x}%`, left: `${item.x}%`,
top: `${item.y}%`, top: `${item.y}%`,