Skip to content

Commit

Permalink
Fix height of images in landing hero component (#4408)
Browse files Browse the repository at this point in the history
  • Loading branch information
spencerldixon authored Dec 9, 2024
1 parent 9ee5193 commit e9dca08
Showing 1 changed file with 15 additions and 8 deletions.
23 changes: 15 additions & 8 deletions app/webpacker/styles/sections/hero.scss
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ $mobile-cutoff: 800px;
@include mq($from: tablet) {
max-height: 420px;
flex-direction: row-reverse;

// Deeper headings if there's a paragraph
&.deeper {
max-height: fit-content;
Expand Down Expand Up @@ -327,11 +327,11 @@ $mobile-cutoff: 800px;
// If no image use this
&.wide {
width: 100%;

@include mq($from: tablet) {
width: 80%;
width: 80%;
}

h1.title {
margin-top: 0;
}
Expand All @@ -342,7 +342,7 @@ $mobile-cutoff: 800px;
line-height: 1.14;
margin-top: -2.5rem;
margin-bottom: 0;

@include mq($from: tablet) {
margin: 0;
font-size: 3.3rem;
Expand Down Expand Up @@ -379,14 +379,21 @@ $mobile-cutoff: 800px;
}
}

img {
aspect-ratio: 16/9;
width: 100%;
height: auto;
display: block;
}

// Colour themes
@mixin colours($background-color, $highlight-color) {
background-color: $background-color;

h1 span {
background: $highlight-color;
}

&.pastel {
background-color: rgba($background-color, 0.4);
}
Expand All @@ -399,6 +406,6 @@ $mobile-cutoff: 800px;
&.green-pink { @include colours($green, $pink); }
&.green-yellow { @include colours($green, $yellow); }
&.yellow-green { @include colours($yellow, $green); }
&.yellow-yellow { @include colours($yellow, $yellow); }
&.yellow-yellow { @include colours($yellow, $yellow); }
&.grey-pink { @include colours($grey, $pink); }
}

0 comments on commit e9dca08

Please sign in to comment.