Update hero image to not crop

nathanrdodson · Dec 15, 2023 · 16883f9 · 16883f9
1 parent 45320e2
commit 16883f9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/partials/loop-posts.hbs → partials/posts-loop.hbs b/partials/loop-posts.hbs → partials/posts-loop.hbs
diff --git a/posts.hbs b/posts.hbs
@@ -29,7 +29,7 @@ into the {body} of the default.hbs template --}}
  <div class="l-wrapper" data-animate="fade-up">
  <div class="l-grid centered">
  {{!-- The tag below iterates over all the posts --}}
- {{> "loop-posts"}}
+ {{> "posts-loop"}}
  </div>
  </div>
  </div>

diff --git a/src/sass/components/hero/_hero.scss b/src/sass/components/hero/_hero.scss
@@ -1,33 +1,11 @@
 .m-hero {
  position: relative;
  flex-direction: column;
- min-height: 365px;
+
  overflow: hidden;
- padding: 100px 0 75px;
- background-color: var(--background-color);
- @extend .content-centered;
-
- @include respond-to('medium') {
- min-height: 400px;
- padding: 150px 0 75px;
- }
-
- &.with-picture {
- color: $white;
- background-color: $black;
+ padding: 80px 0 0;
 
- @include respond-to('medium') {
- min-height: 450px;
- }
-
- @include respond-to('extra-large') {
- min-height: 565px;
- }
-
- .m-hero-title {
- color: $white;
- }
- }
+ @extend .content-centered;
 
  &.no-picture.in-post {
  display: none;
@@ -38,26 +16,34 @@
  display: flex;
  align-items: center;
  justify-content: center;
- position: absolute;
  top: 0;
  left: 0;
  width: 100%;
- height: 100%;
  z-index: 1;
  opacity: 0.7;
-
+ 
  &.in-post {
  opacity: 1;
  }
 
+ @include respond-to('medium') {
+ max-width: calc($break-medium - 40px);
+ }
+
+ @include respond-to('large') {
+ max-width: calc($break-large - 40px);
+ }
+
+ @include respond-to('large') {
+ max-width: calc($break-extra-large - 40px);
+ }
+
  img {
  width: 100%;
- height: 100%;
  object-fit: cover;
  }
 }
 
-
 .m-hero__content {
  position: relative;
  text-align: center;