hazem/yslootahrobotics
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine overlay positioning and styles for improved layout on ScrollOverlays component
Some checks are pending
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Najjar\NajjarV02 2026-04-17 15:57:02 +04:00
parent 8216cbe0c0
commit 26770e070c
3 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/globals.css
View File

@ -415,20 +415,20 @@ html {
.overlay-section-left { .overlay-section-left {
top: auto !important; top: auto !important;
bottom: 6vh !important; bottom: 4vh !important;
align-items: center !important; align-items: center !important;
} }
.overlay-section-right { .overlay-section-right {
top: auto !important; top: auto !important;
bottom: 6vh !important; bottom: 4vh !important;
align-items: center !important; align-items: center !important;
} }
.overlay-panel { .overlay-panel {
max-width: 100%; max-width: 100%;
padding: 1.5rem; padding: 1.25rem;
border-radius: 1.25rem; border-radius: 1rem;
text-align: center !important; text-align: center !important;
} }
@ -449,14 +449,20 @@ html {
} }
.overlay-brand { .overlay-brand {
top: 8vh !important; top: 4vh !important;
bottom: auto !important; bottom: auto !important;
left: 50% !important;
transform: translateX(-50%);
width: 90vw;
}
.overlay-brand span {
font-size: 0.6rem !important;
letter-spacing: 0.25em !important;
} }
.overlay-brand .overlay-panel,
.overlay-brand span,
.overlay-brand p { .overlay-brand p {
font-size: 0.7rem; font-size: 0.75rem !important;
} }
.overlay-scroll-hint { .overlay-scroll-hint {

4
src/components/ScrollOverlays.tsx
View File

@ -62,14 +62,14 @@ function OverlaySection({
? { alignItems: 'flex-start' } ? { alignItems: 'flex-start' }
: align === 'right' : align === 'right'
? { alignItems: 'flex-end' } ? { alignItems: 'flex-end' }
: { left: '50%', alignItems: 'center' }; : { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };
const alignClass = const alignClass =
align === 'left' align === 'left'
? 'overlay-section-left' ? 'overlay-section-left'
: align === 'right' : align === 'right'
? 'overlay-section-right' ? 'overlay-section-right'
: ''; : 'overlay-section-center';
const verticalStyle: React.CSSProperties = const verticalStyle: React.CSSProperties =
verticalAlign === 'top' verticalAlign === 'top'

6
src/components/ScrollScene.tsx
View File

@ -71,9 +71,9 @@ function ScrollCamera() {
const pos = interpolateKeyframes(CAMERA_KEYFRAMES, p); const pos = interpolateKeyframes(CAMERA_KEYFRAMES, p);
const lookAt = interpolateKeyframes(LOOKAT_KEYFRAMES, p); const lookAt = interpolateKeyframes(LOOKAT_KEYFRAMES, p);
// On mobile, pull camera back and center it more so robot doesn't overlap text // On mobile, center the camera more (reduce dramatic side-to-side movement)
const mobileZOffset = isMobile ? 2.5 : 0; const mobileZOffset = isMobile ? 1.0 : 0;
const mobileCenterX = isMobile ? pos.x * 0.3 : 0; const mobileCenterX = isMobile ? pos.x * 0.6 : 0;
// Dynamic camera oscillation based on scroll position // Dynamic camera oscillation based on scroll position
const oscillationX = Math.sin(p * Math.PI * 4) * 0.05; const oscillationX = Math.sin(p * Math.PI * 4) * 0.05;