Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix(dino): add mobile readability scrim over hero background

Browse source 
On narrow screens the cover-cropped hero photo lands under the
heading text, making it unreadable. Add a light gradient overlay
behind the text at <=640px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-06-10 14:58:50 +01:00
parent 9e1d0d9bb4
commit bf5ea16394
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/sections/DinoPageContent.tsx
View file

@ -71,13 +71,13 @@ const FB_DINOS: DinoSpec[] = [
ver: '(Гігантська Версія)',
length: '20 м.',
height: '7 м.',
imageUrl: '/images/figma/dyno-wheel/trex.png',
imageUrl: '/images/figma/dyno-wheel/trex.webp',
},
{
name: 'Спінозавр',
length: '15 м.',
height: '6 м.',
imageUrl: '/images/figma/dyno-wheel/spinosaurus.png',
imageUrl: '/images/figma/dyno-wheel/spinosaurus.webp',
},
{
name: 'Брахіозавр',
@ -101,19 +101,19 @@ const FB_DINOS: DinoSpec[] = [
name: 'Трицератопс',
length: '9 м.',
height: '3 м.',
imageUrl: '/images/figma/dyno-wheel/triceratops.png',
imageUrl: '/images/figma/dyno-wheel/triceratops.webp',
},
{
name: 'Анкілозавр',
length: '8 м.',
height: '1,7 м.',
imageUrl: '/images/figma/dyno-wheel/ankylosaurus.png',
imageUrl: '/images/figma/dyno-wheel/ankylosaurus.webp',
},
{
name: 'Паразауролоф',
length: '10 м.',
height: '5 м.',
imageUrl: '/images/figma/dyno-wheel/parasaurolophus.png',
imageUrl: '/images/figma/dyno-wheel/parasaurolophus.webp',
},
{
name: 'Карнотавр',
@ -125,7 +125,7 @@ const FB_DINOS: DinoSpec[] = [
name: 'Баріонікс',
length: '10 м.',
height: '2,5 м.',
imageUrl: '/images/figma/dyno-wheel/baryonyx.png',
imageUrl: '/images/figma/dyno-wheel/baryonyx.webp',
},
{
name: 'Космоцератопс',
@ -602,6 +602,11 @@ const DYNO_CSS = `
}
.dino-page .dcs-dot.active{width:10px;height:10px;background:#fff;}
@media(max-width:640px){
/* Readability scrim: cover-cropped hero-bg lands under the text on narrow screens */
.dino-page .hero::after{
content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(241,251,235,.9) 0%,rgba(241,251,235,.65) 100%);
}
.dino-page .dino-wheel{display:none;}
.dino-page .dino-card-slider{display:block;}
/* Fix gallery overlapping card slider (negative margin designed for desktop wheel) */