max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace dot grid with a subtle paper-grain texture, calm down the white

Browse source 
Swaps the dot grid for a fine SVG noise grain (evokes lightly crumpled
paper rather than a geometric grid), and darkens the base background
color in both themes so it's not a stark, glaring white/black anymore.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 18:12:57 +02:00
parent 0a1b7315f6
commit c5ea006f8d
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
hifi-src/src/components/PublicLayout.jsx
View file

@ -55,7 +55,7 @@ export default function PublicLayout() {
return ( return (
<MaintenanceProvider value={{ ...status, bypass }}> <MaintenanceProvider value={{ ...status, bypass }}>
<SiteSettingsProvider value={siteSettings}> <SiteSettingsProvider value={siteSettings}>
<div className="page-texture flex min-h-screen flex-col bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100"> <div className="page-texture flex min-h-screen flex-col text-neutral-900 dark:text-neutral-100">
{bypass && status.global.enabled && <MaintenanceBypassBanner />} {bypass && status.global.enabled && <MaintenanceBypassBanner />}
<ScrollProgress /> <ScrollProgress />
<Navbar /> <Navbar />

13
hifi-src/src/index.css
View file

@ -11,13 +11,16 @@ html {
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
} }
/* Dezentes Punktraster als Hintergrundstruktur, statt einer reinen Flaeche. /* Feines Papierkorn als Hintergrundstruktur statt einer reinen Flaeche - erinnert an
Sehr kontrastarm gehalten, damit es nie mit Text oder Bildern konkurriert. */ leicht zerknittertes Papier. Sehr kontrastarm, damit es nie mit Text/Bildern konkurriert.
Das Weiss ist bewusst etwas gedaempft (statt reinem #fff), das blendet weniger. */
.page-texture { .page-texture {
background-image: radial-gradient(rgba(107, 166, 38, 0.16) 1px, transparent 1px); background-color: #f2f1ec;
background-size: 24px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
} }
.dark .page-texture { .dark .page-texture {
background-image: radial-gradient(rgba(146, 212, 68, 0.12) 1px, transparent 1px); background-color: #17160f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
} }