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

Add a subtle dot-grid texture to page backgrounds

Browse source 
Plain white/black backgrounds now have a faint brand-green dot grid
(24px spacing, very low opacity) instead of a flat fill, in both light
and dark mode. Applied site-wide via the public layout wrapper.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 18:08:05 +02:00
parent 1f57ba295f
commit 0a1b7315f6
2 changed files with 12 additions and 1 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="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 bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
{bypass && status.global.enabled && <MaintenanceBypassBanner />} {bypass && status.global.enabled && <MaintenanceBypassBanner />}
<ScrollProgress /> <ScrollProgress />
<Navbar /> <Navbar />

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

@ -10,3 +10,14 @@ html {
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
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.
Sehr kontrastarm gehalten, damit es nie mit Text oder Bildern konkurriert. */
.page-texture {
background-image: radial-gradient(rgba(107, 166, 38, 0.16) 1px, transparent 1px);
background-size: 24px 24px;
}
.dark .page-texture {
background-image: radial-gradient(rgba(146, 212, 68, 0.12) 1px, transparent 1px);
}