bg-hbs-components

creditless-footer.hbs

<div id="credit__well">
  <div id="credits" class="text__well">
    <div class="logo-container">
      <img src="https://apps.bostonglobe.com/metro/2021/08/the-last-best-shot/assets/images/bg-logo.svg" alt="The Boston Globe logo" />
    </div>
    <p id="copyright" class="bentonsanscond-regular">©<span id="copyright__year"></span> Boston Globe Media Partners, LLC
  </div>
</div>

creditless-footer.styl

#credit__well
  border-top 1px solid $offblack
  background-color $offblack
  color white
  margin-bottom -1rem
  padding-bottom 1.5rem
  margin-top 6rem
  &:before
    content ''
    position relative
    width 100%
    height 1px
    border-top 1px solid $offblack
    display block
    margin-top 0.25rem

#credits 
  margin 2rem auto 0
  width 90%
  position relative
  z-index 300  
  padding-top 2rem
  img 
    max-width 1200px
    width 90%
    margin 0 auto
  svg
    fill white
    position absolute
    left 50%
    top 0
    transform translateX(-50%)
    display block

#copyright
  margin-top 1.5rem
  font-size 0.75rem
  text-align center

footer-copyright.js

// adds current year to copyright tagline at the end of the app
document.getElementById('copyright__year').innerText = new Date().getFullYear();

group-refer-shaded.hbs

<!-- takes a refer object and outputs a link that has a shade overlay -->

<div class="group__refer">
  <a href="{{value.url}}">
    <div class="refer-image__container">
      {{> base/refer-image image=value.image alt=value.altText}}
    </div>
    <div class="refer-text">
      <h6 class="bentonsanscond-regular">{{value.overline}}</h6>
      <h5 class="bentonsanscond-bold">{{value.headline}}</h5>
    </div>
  </a>
</div>

group-refer-shaded.styl

.group__refer
  margin-bottom 2rem
  position relative
  +mq(bp-2)
    margin-bottom 0
  img
    position relative
    width 100%
  .refer-image__container
    position relative
    &:after
      content ''
      width 100%
      height 100%
      background-color rgba(0,0,0, 0.8)
      z-index 10
      display block
      position absolute
      top 0
      left 0
      transition all 0.25s ease-out
    &:hover
      &:after
        background-color rgba(0,0,0, 0.4)
  .refer-text
    color white
    position absolute
    top 50%
    left 50%
    text-align center
    transform translate(-50%, -50%)
    z-index 20
    width 80%
    pointer-events none
    h5, h6
      text-shadow 2px 2px 4px rgba(33,33,33,0.45)
    h5
      font-size 1.5rem
      line-height 1.75rem
      +mq(bp-2)
        font-size 1.25rem
        line-height 1.5rem
      +mq(bp-3)
        font-size 2rem
        line-height 2.25rem
        letter-spacing 0.25px
    h6
      font-size 0.75rem
      text-transform uppercase
      margin-bottom 0.5rem
      +mq(bp-3)
        font-size 1rem