jessikitty/frambe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

fix: flexbox centering for all resolutions, 1.5deg rotation, larger frame (93vw), full sepia bg, proportional polaroid padding (vmin)

Browse Source
This commit is contained in:
jessikitty
2026-05-22 09:15:38 +10:00
parent c1ebbaef98
commit dc1f3402d6
1 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+27 -21
View File
@@ -1,6 +1,6 @@
/* === Reset === */ /* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } *, *::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; } body.setup-mode { cursor: default; }
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .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 - 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 { .bg-blur {
position: absolute; top: -30px; left: -30px; position: absolute; top: -30px; left: -30px;
width: calc(100% + 60px); height: calc(100% + 60px); width: calc(100% + 60px); height: calc(100% + 60px);
background-size: cover; background-position: center; 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; opacity: 0; transition: opacity 3s ease; z-index: 1;
} }
.bg-blur.visible { opacity: 1; } .bg-blur.visible { opacity: 1; }
@@ -63,30 +63,36 @@ body.setup-mode { cursor: default; }
/* Vignette */ /* Vignette */
.bg-vignette { .bg-vignette {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; 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 { .main-frame {
position: absolute; top: 50%; left: 50%; opacity: 0;
transform: translate(-50%, -50%);
z-index: 5; opacity: 0;
transition: opacity 1.2s ease; transition: opacity 1.2s ease;
animation: float 80s linear infinite; animation: float 90s linear infinite;
pointer-events: auto;
} }
.main-frame.visible { opacity: 1; } .main-frame.visible { opacity: 1; }
/* Slow gentle drift in one direction */ /* Slow drift + slight constant rotation */
@keyframes float { @keyframes float {
0% { transform: translate(-50%, -50%) translate(0, 0); } 0% { transform: translate(0, 0) rotate(1.5deg); }
100% { transform: translate(-50%, -50%) translate(10px, -6px); } 100% { transform: translate(8px, -5px) rotate(1.5deg); }
} }
/* Polaroid frame */ /* Polaroid frame — proportional padding matching pile (4% sides, 12% bottom) */
.main-frame .frame-border { .main-frame .frame-border {
background: #f5f0e8; background: #ede8df;
padding: 10px 10px 36px 10px; padding: 1.2vmin 1.2vmin 4vmin 1.2vmin;
box-shadow: box-shadow:
0 6px 40px rgba(0,0,0,0.6), 0 6px 40px rgba(0,0,0,0.6),
0 2px 6px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3),
@@ -95,11 +101,11 @@ body.setup-mode { cursor: default; }
position: relative; position: relative;
} }
/* No min-width/height — frame hugs the image naturally */ /* Large main image — allowed to overhang slightly */
.main-frame .frame-media { .main-frame .frame-media {
display: block; display: block;
max-width: 88vw; max-width: 93vw;
max-height: 78vh; max-height: 85vh;
width: auto; height: auto; width: auto; height: auto;
object-fit: contain; object-fit: contain;
background: #2a2520; background: #2a2520;
@@ -132,8 +138,8 @@ body.setup-mode { cursor: default; }
.overlay-top-right { top: 1rem; right: 1rem; } .overlay-top-right { top: 1rem; right: 1rem; }
.overlay-bottom { padding: 1rem 1rem 0.5rem; } .overlay-bottom { padding: 1rem 1rem 0.5rem; }
.source-buttons { flex-direction: column; } .source-buttons { flex-direction: column; }
.main-frame .frame-border { padding: 6px 6px 24px 6px; } .main-frame .frame-border { padding: 1vmin 1vmin 3.5vmin 1vmin; }
.main-frame .frame-media { max-width: 94vw; max-height: 82vh; } .main-frame .frame-media { max-width: 96vw; max-height: 88vh; }
} }
.albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; } .albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; }