Refine hero: vector full-width, image top padding, content flush left
- styles/blocks/page-hero.css:
- .page-hero__vector: width is now 100% (was clamp(28rem, 60vw, 56rem))
so the orange linework spans the full width of the hero. The SVG
scales proportionally (1920x489 viewBox).
- .page-hero__media: added top: clamp(2rem, 4vw, 4rem) so the image
has visible top padding inside the hero (in addition to overflowing
the bottom). Reduced right offset to clamp(0.5rem, 2vw, 2rem) so
the image sits closer to the right edge. Width is 'auto' with
max-width: clamp(20rem, 30vw, 28rem) so the image's natural aspect
ratio (490x613 portrait) is preserved.
- views/partials/page-hero.php: .page-hero__content is now 'container
mx-auto px-0!' so the breadcrumbs, H1, and intro sit flush left at
x=0, matching the logo's left edge (which is also at x=0 thanks to
the header's px-0! override on its container).
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -32,7 +32,7 @@ $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '
|
||||
|
||||
<div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
|
||||
|
||||
<div class="page-hero__content container mx-auto">
|
||||
<div class="page-hero__content container mx-auto px-0!">
|
||||
<div id="breadcrumbs">
|
||||
<?php Breadcrumbs::render(); ?>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user