perf: Agregar min-height a Hero Section para reducir CLS
- Leer campos min_height, title_min_height, badge_min_height del schema - Aplicar min-height a .hero-section (120px) - Aplicar min-height a .hero-section__title (3rem) - Aplicar min-height a .hero-section__badge (32px) Fase 1 del plan de optimización PageSpeed (99-pagespeed-optimization-plan.md) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -104,6 +104,9 @@ final class HeroRenderer implements RendererInterface
|
|||||||
$marginBottom = $spacing['margin_bottom'] ?? '1.5rem';
|
$marginBottom = $spacing['margin_bottom'] ?? '1.5rem';
|
||||||
$badgePadding = $spacing['badge_padding'] ?? '0.375rem 0.875rem';
|
$badgePadding = $spacing['badge_padding'] ?? '0.375rem 0.875rem';
|
||||||
$badgeBorderRadius = $spacing['badge_border_radius'] ?? '20px';
|
$badgeBorderRadius = $spacing['badge_border_radius'] ?? '20px';
|
||||||
|
$minHeight = $spacing['min_height'] ?? '120px';
|
||||||
|
$titleMinHeight = $spacing['title_min_height'] ?? '3rem';
|
||||||
|
$badgeMinHeight = $spacing['badge_min_height'] ?? '32px';
|
||||||
|
|
||||||
$boxShadow = $effects['box_shadow'] ?? '0 4px 16px rgba(30, 58, 95, 0.25)';
|
$boxShadow = $effects['box_shadow'] ?? '0 4px 16px rgba(30, 58, 95, 0.25)';
|
||||||
$titleTextShadow = $effects['title_text_shadow'] ?? '1px 1px 2px rgba(0, 0, 0, 0.2)';
|
$titleTextShadow = $effects['title_text_shadow'] ?? '1px 1px 2px rgba(0, 0, 0, 0.2)';
|
||||||
@@ -119,6 +122,7 @@ final class HeroRenderer implements RendererInterface
|
|||||||
'box-shadow' => $boxShadow,
|
'box-shadow' => $boxShadow,
|
||||||
'padding' => "{$paddingVertical} 0",
|
'padding' => "{$paddingVertical} 0",
|
||||||
'margin-bottom' => $marginBottom,
|
'margin-bottom' => $marginBottom,
|
||||||
|
'min-height' => $minHeight,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$cssRules[] = $this->cssGenerator->generate('.hero-section__title', [
|
$cssRules[] = $this->cssGenerator->generate('.hero-section__title', [
|
||||||
@@ -129,6 +133,7 @@ final class HeroRenderer implements RendererInterface
|
|||||||
'text-shadow' => $titleTextShadow,
|
'text-shadow' => $titleTextShadow,
|
||||||
'margin-bottom' => '0',
|
'margin-bottom' => '0',
|
||||||
'text-align' => 'center',
|
'text-align' => 'center',
|
||||||
|
'min-height' => $titleMinHeight,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$cssRules[] = $this->cssGenerator->generate('.hero-section__badge', [
|
$cssRules[] = $this->cssGenerator->generate('.hero-section__badge', [
|
||||||
@@ -144,6 +149,7 @@ final class HeroRenderer implements RendererInterface
|
|||||||
'text-decoration' => 'none',
|
'text-decoration' => 'none',
|
||||||
'display' => 'inline-block',
|
'display' => 'inline-block',
|
||||||
'transition' => 'all 0.3s ease',
|
'transition' => 'all 0.3s ease',
|
||||||
|
'min-height' => $badgeMinHeight,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$cssRules[] = $this->cssGenerator->generate('.hero-section__badge:hover', [
|
$cssRules[] = $this->cssGenerator->generate('.hero-section__badge:hover', [
|
||||||
|
|||||||
Reference in New Issue
Block a user