From dc1f3402d6f3a9d6bc4cbb3410f8429be0f548a6 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Fri, 22 May 2026 09:15:38 +1000
Subject: [PATCH] fix: flexbox centering for all resolutions, 1.5deg rotation,
 larger frame (93vw), full sepia bg, proportional polaroid padding (vmin)

---
 public/css/style.css | 48 +++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index a188697..3683f10 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,6 +1,6 @@
 /* === Reset === */
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1510; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; cursor: none; }
+html, body { width: 100%; height: 100%; overflow: hidden; background: #1e1a14; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; cursor: none; }
 body.setup-mode { cursor: default; }
 .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
@@ -41,14 +41,14 @@ body.setup-mode { cursor: default; }
 /* =============================================
    SLIDESHOW - VINTAGE POLAROID PILE
    ============================================= */
-#slideshow-screen { background: #1e1a14; }
+#slideshow-screen { background: #1e1a14; overflow: hidden; }
 
-/* Warm blurred bg — heavy sepia wash */
+/* Background — near-full sepia */
 .bg-blur {
   position: absolute; top: -30px; left: -30px;
   width: calc(100% + 60px); height: calc(100% + 60px);
   background-size: cover; background-position: center;
-  filter: blur(45px) brightness(0.2) saturate(0.3) sepia(0.6);
+  filter: blur(50px) brightness(0.15) saturate(0.1) sepia(1.0);
   opacity: 0; transition: opacity 3s ease; z-index: 1;
 }
 .bg-blur.visible { opacity: 1; }
@@ -63,30 +63,36 @@ body.setup-mode { cursor: default; }
 /* Vignette */
 .bg-vignette {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-  background: radial-gradient(ellipse at center, transparent 50%, rgba(15,12,8,0.6) 100%);
+  background: radial-gradient(ellipse at center, transparent 40%, rgba(20,16,10,0.7) 100%);
   z-index: 3; pointer-events: none;
 }
 
-/* --- Main floating frame --- */
+/* --- Centering wrapper (flexbox — works on all resolutions) --- */
+.main-frame-wrapper {
+  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
+  z-index: 5; pointer-events: none; overflow: visible;
+}
+
+/* --- Main frame — no transform centering, flexbox does it --- */
 .main-frame {
-  position: absolute; top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5; opacity: 0;
+  opacity: 0;
   transition: opacity 1.2s ease;
-  animation: float 80s linear infinite;
+  animation: float 90s linear infinite;
+  pointer-events: auto;
 }
 .main-frame.visible { opacity: 1; }
 
-/* Slow gentle drift in one direction */
+/* Slow drift + slight constant rotation */
 @keyframes float {
-  0%   { transform: translate(-50%, -50%) translate(0, 0); }
-  100% { transform: translate(-50%, -50%) translate(10px, -6px); }
+  0%   { transform: translate(0, 0) rotate(1.5deg); }
+  100% { transform: translate(8px, -5px) rotate(1.5deg); }
 }
 
-/* Polaroid frame */
+/* Polaroid frame — proportional padding matching pile (4% sides, 12% bottom) */
 .main-frame .frame-border {
-  background: #f5f0e8;
-  padding: 10px 10px 36px 10px;
+  background: #ede8df;
+  padding: 1.2vmin 1.2vmin 4vmin 1.2vmin;
   box-shadow:
     0 6px 40px rgba(0,0,0,0.6),
     0 2px 6px rgba(0,0,0,0.3),
@@ -95,11 +101,11 @@ body.setup-mode { cursor: default; }
   position: relative;
 }
 
-/* No min-width/height — frame hugs the image naturally */
+/* Large main image — allowed to overhang slightly */
 .main-frame .frame-media {
   display: block;
-  max-width: 88vw;
-  max-height: 78vh;
+  max-width: 93vw;
+  max-height: 85vh;
   width: auto; height: auto;
   object-fit: contain;
   background: #2a2520;
@@ -132,8 +138,8 @@ body.setup-mode { cursor: default; }
   .overlay-top-right { top: 1rem; right: 1rem; }
   .overlay-bottom { padding: 1rem 1rem 0.5rem; }
   .source-buttons { flex-direction: column; }
-  .main-frame .frame-border { padding: 6px 6px 24px 6px; }
-  .main-frame .frame-media { max-width: 94vw; max-height: 82vh; }
+  .main-frame .frame-border { padding: 1vmin 1vmin 3.5vmin 1vmin; }
+  .main-frame .frame-media { max-width: 96vw; max-height: 88vh; }
 }
 
 .albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; }