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

fix: portrait frame hugs image, heavier sepia wash, slow single-direction drift, bg fade transition

Browse Source
This commit is contained in:
jessikitty
2026-05-20 10:37:00 +10:00
parent 804c6cfd86
commit d1163511fa
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+14 -18
View File
@@ -41,52 +41,49 @@ body.setup-mode { cursor: default; }
/* =============================================
SLIDESHOW - VINTAGE POLAROID PILE
============================================= */
#slideshow-screen { background: #1a1510; }
#slideshow-screen { background: #1e1a14; }
/* Warm blurred bg behind everything */
/* Warm blurred bg — heavy sepia wash */
.bg-blur {
position: absolute; top: -30px; left: -30px;
width: calc(100% + 60px); height: calc(100% + 60px);
background-size: cover; background-position: center;
filter: blur(40px) brightness(0.25) saturate(0.5) sepia(0.3);
opacity: 0; transition: opacity 2s ease; z-index: 1;
filter: blur(45px) brightness(0.2) saturate(0.3) sepia(0.6);
opacity: 0; transition: opacity 3s ease; z-index: 1;
}
.bg-blur.visible { opacity: 1; }
/* Canvas pile of accumulated polaroids */
/* Canvas pile */
#pile-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 2; pointer-events: none;
transition: opacity 2s ease;
}
/* Vignette on top of pile */
/* 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%);
z-index: 3; pointer-events: none;
}
/* --- Main floating frame (nearly full screen) --- */
/* --- Main floating frame --- */
.main-frame {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 5; opacity: 0;
transition: opacity 1.2s ease;
animation: float 25s ease-in-out infinite;
animation: float 80s linear infinite;
}
.main-frame.visible { opacity: 1; }
/* Slow gentle drift in one direction */
@keyframes float {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
15% { transform: translate(-50%, -50%) rotate(0.6deg) translateX(6px) translateY(-4px); }
30% { transform: translate(-50%, -50%) rotate(-0.4deg) translateX(-4px) translateY(5px); }
50% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(5px) translateY(2px); }
65% { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-6px) translateY(-3px); }
80% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(3px) translateY(5px); }
100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
0% { transform: translate(-50%, -50%) translate(0, 0); }
100% { transform: translate(-50%, -50%) translate(10px, -6px); }
}
/* Polaroid frame — used for both photos and videos */
/* Polaroid frame */
.main-frame .frame-border {
background: #f5f0e8;
padding: 10px 10px 36px 10px;
@@ -98,6 +95,7 @@ body.setup-mode { cursor: default; }
position: relative;
}
/* No min-width/height — frame hugs the image naturally */
.main-frame .frame-media {
display: block;
max-width: 88vw;
@@ -105,8 +103,6 @@ body.setup-mode { cursor: default; }
width: auto; height: auto;
object-fit: contain;
background: #2a2520;
min-width: 50vw;
min-height: 40vh;
}
/* === OVERLAY === */