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 === */
*, *::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; }