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

feat: enlarge main frame to ~90% screen, remove filmstrip, add canvas pile, unified polaroid style

Browse Source
This commit is contained in:
jessikitty
2026-05-20 09:45:56 +10:00
parent 0f4a995cdc
commit d6b6464171
1 changed files with 48 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+46 -39
View File
@@ -38,67 +38,75 @@ body.setup-mode { cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* === SLIDESHOW - VINTAGE POLAROID PILE === */ /* =============================================
SLIDESHOW - VINTAGE POLAROID PILE
============================================= */
#slideshow-screen { background: #1a1510; } #slideshow-screen { background: #1a1510; }
/* Warm blurred bg behind everything */
.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(40px) brightness(0.3) saturate(0.6) sepia(0.3); filter: blur(40px) brightness(0.25) saturate(0.5) sepia(0.3);
opacity: 0; transition: opacity 2s ease; z-index: 1; opacity: 0; transition: opacity 2s ease; z-index: 1;
} }
.bg-blur.visible { opacity: 1; } .bg-blur.visible { opacity: 1; }
.bg-vignette { /* Canvas pile of accumulated polaroids */
#pile-canvas {
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 40%, rgba(15,12,8,0.7) 100%);
z-index: 2; pointer-events: none; z-index: 2; pointer-events: none;
} }
/* --- Photo pile --- */ /* Vignette on top of pile */
#photo-pile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; } .bg-vignette {
.pile-frame { position: absolute; top: 50%; left: 50%; width: 30vmin; height: 34vmin; transform: translate(-50%, -50%); opacity: 0; transition: all 1.5s ease; pointer-events: none; } position: absolute; top: 0; left: 0; width: 100%; height: 100%;
.pile-frame.visible { opacity: 1; } background: radial-gradient(ellipse at center, transparent 50%, rgba(15,12,8,0.6) 100%);
z-index: 3; pointer-events: none;
}
/* --- Main floating frame --- */ /* --- Main floating frame (nearly full screen) --- */
.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; } .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;
}
.main-frame.visible { opacity: 1; } .main-frame.visible { opacity: 1; }
@keyframes float { @keyframes float {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); } 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
15% { transform: translate(-50%, -50%) rotate(0.8deg) translateX(8px) translateY(-5px); } 15% { transform: translate(-50%, -50%) rotate(0.6deg) translateX(6px) translateY(-4px); }
30% { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-5px) translateY(6px); } 30% { transform: translate(-50%, -50%) rotate(-0.4deg) translateX(-4px) translateY(5px); }
50% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(6px) translateY(3px); } 50% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(5px) translateY(2px); }
65% { transform: translate(-50%, -50%) rotate(-0.7deg) translateX(-8px) translateY(-4px); } 65% { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-6px) translateY(-3px); }
80% { transform: translate(-50%, -50%) rotate(0.4deg) translateX(4px) translateY(7px); } 80% { transform: translate(-50%, -50%) rotate(0.3deg) translateX(3px) translateY(5px); }
100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); } 100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0) translateY(0); }
} }
/* Polaroid */ /* Polaroid frame — used for both photos and videos */
.main-frame.polaroid .frame-border { .main-frame .frame-border {
background: #f5f0e8; padding: 12px 12px 44px 12px; background: #f5f0e8;
box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(0,0,0,0.05); padding: 10px 10px 36px 10px;
border-radius: 2px; position: relative; box-shadow:
0 6px 40px rgba(0,0,0,0.6),
0 2px 6px rgba(0,0,0,0.3),
inset 0 0 0 1px rgba(0,0,0,0.05);
border-radius: 2px;
position: relative;
} }
.main-frame.polaroid .frame-media { display: block; max-width: 72vmin; max-height: 54vmin; width: auto; height: auto; object-fit: contain; background: #2a2520; min-width: 40vmin; min-height: 30vmin; }
.main-frame.polaroid .filmstrip-top, .main-frame.polaroid .filmstrip-bottom { display: none; }
/* Film strip */ .main-frame .frame-media {
.main-frame.filmstrip .frame-border {
background: #1a1a1a; padding: 0;
box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.2);
border-radius: 2px; position: relative;
}
.main-frame.filmstrip .frame-media { display: block; max-width: 72vmin; max-height: 54vmin; width: auto; height: auto; object-fit: contain; background: #000; min-width: 40vmin; min-height: 30vmin; }
.filmstrip-top, .filmstrip-bottom { display: none; position: absolute; left: 0; width: 100%; height: 22px; background: #1a1a1a; z-index: 6; }
.filmstrip-top { top: -22px; border-radius: 2px 2px 0 0; }
.filmstrip-bottom { bottom: -22px; border-radius: 0 0 2px 2px; }
.main-frame.filmstrip .filmstrip-top, .main-frame.filmstrip .filmstrip-bottom {
display: block; display: block;
background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 10px, #333 10px, #333 12px, transparent 12px, transparent 16px, rgba(255,255,255,0.08) 16px, rgba(255,255,255,0.08) 26px, transparent 26px, transparent 28px, #333 28px, #333 30px, transparent 30px, transparent 40px); max-width: 88vw;
background-size: 40px 22px; background-position: 5px center; max-height: 78vh;
width: auto; height: auto;
object-fit: contain;
background: #2a2520;
min-width: 50vw;
min-height: 40vh;
} }
/* === OVERLAY === */ /* === OVERLAY === */
@@ -128,9 +136,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.polaroid .frame-border { padding: 8px 8px 32px 8px; } .main-frame .frame-border { padding: 6px 6px 24px 6px; }
.main-frame.polaroid .frame-media, .main-frame.filmstrip .frame-media { max-width: 85vmin; max-height: 60vmin; } .main-frame .frame-media { max-width: 94vw; max-height: 82vh; }
.pile-frame { width: 25vmin; height: 29vmin; }
} }
.albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; } .albums-list::-webkit-scrollbar, .setup-container::-webkit-scrollbar { width: 6px; }