feat: background photo system — random Lanzarote landscapes behind CV grid

Dev-only toggle button enables/disables photo backgrounds. Photos are
auto-discovered from static/images/backgrounds/ and randomly selected
on each page load. Production is unaffected — no button, no photo.
This commit is contained in:
juanatsap
2026-04-25 14:46:33 +01:00
parent fc1ca90b38
commit 3b6d5e781a
9 changed files with 122 additions and 11 deletions
+13 -11
View File
@@ -12,23 +12,25 @@
/* Body base */
body {
background-color: var(--page-bg, #d6d6d6);
/* OLD PATTERN - Keep for reference (can be restored anytime) */
/* background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
/* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
background-image: var(--page-bg-pattern, none);
background-size: 40px 40px; /* For dark theme diagonal grid */
background-size: 40px 40px;
background-attachment: fixed;
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: clip; /* Clip prevents horizontal scroll WITHOUT breaking position: sticky */
}
/* Background photo layer — activated via JS in dev mode */
body.bg-photo {
background-image:
var(--page-bg-pattern, none),
linear-gradient(var(--page-bg-tint, rgba(214,214,214,0.85)), var(--page-bg-tint, rgba(214,214,214,0.85))),
var(--bg-photo-url, none);
background-size: auto, auto, cover;
background-position: 0 0, 0 0, center;
background-repeat: repeat, repeat, no-repeat;
background-attachment: fixed;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;