<commit_before>// Cards Base
//
//
// .card
//
// Styleguide 1.3

// -----------------------------------------------------------------------------
// Base card object and sizing variables
//
// - Width of a Card defaults to single - override when necessary
// -----------------------------------------------------------------------------

$card-grid-height:                  380px
$card-grid-half-height:             185px

$standard-card-image-height:        275px
$small-card-image-height:           185px

$default-card-top-padding:          55px
$image-only-padding:                7px

$card-content-vertical-padding:     13px
$card-content-horizontal-padding:   15px

// responsive
$mobile-card-grid-height:           296px
$mobile-card-grid-half-height:      143px
$mobile-standard-card-image-height: 192px

// -----------------------------------------------------------------------------
// Card Base
// -----------------------------------------------------------------------------

.card
  +backface-visibility(hidden)
  @extend %standard-shadow
  background: #fff
  margin-bottom: 10px
  position: relative

  // apply hover state only to cards in the results area
  .results &
    &:hover
      +box-shadow(0, 2, 2, 0, rgba(3, 46, 92, 0.10))

  // hide the content area for image-only cards when it's not hovered over
  &.card--image-only
    overflow: hidden


// -----------------------------------------------------------------------------
// Card Images
// -----------------------------------------------------------------------------

.card__hero
  height: $standard-card-image-height
  overflow: hidden
  position: relative
  &:after
    +transition()
    @extend %empty-abs-generated-content
    background-color: transparent
    height: 100%
    left: 0
    top: 0
    width: 100%
  .responsive &
    height: $mobile-standard-card-image-height
    +respond-to(medium-view)
      height: $standard-card-image-height

  .card__image
    height: 100%
    &.is-portrait
      height: auto
      max-width: 100%
    .responsive &
      width: 100%
      height: auto
      +respond-to(medium-view)
        height: 100%
        width: auto

  // darken the image when card is hovered over
  .card:hover &
    &:after
      background-color: rgba(0,0,0,0.3)

  .card--small-image &
    height: $small-card-image-height

  .card--full-image &
    height: $card-grid-height
    .responsive &
      height: $mobile-card-grid-height
      +respond-to(medium-view)
        height: $card-grid-height

  .card--image-only &
    height: $card-grid-half-height
    .responsive &
      height: $mobile-card-grid-half-height
      +respond-to(medium-view)
        height: $card-grid-half-height

.card__hero__overlay
  height: $standard-card-image-height
  left: 0
  position: absolute
  top: 0
  z-index: 3

  img
    height: 100%
    // Filters currently add a lot of jank on scroll
    &
      +filter(drop-shadow(0px 0px 15px rgba(0,0,0,0.35)))


// -----------------------------------------------------------------------------
// Card Content Areas
// -----------------------------------------------------------------------------

.card__content
  height: ($card-grid-height - $standard-card-image-height - (2 * $card-content-vertical-padding) )
  margin-bottom: $card-content-vertical-padding
  overflow: hidden
  padding: $card-content-vertical-padding $card-content-horizontal-padding 0 $card-content-horizontal-padding

  .card--no-image &
    height: $card-grid-height - $default-card-top-padding - $card-content-vertical-padding
    padding-top: $default-card-top-padding

  .card--small-image &
    height: ($card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )
    .responsive &
      height: ($mobile-card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )
      +respond-to(medium-view)
        height: ($card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )

  .card--full-image &
    @extend %transition--base
    +background-gradient($startColor: rgba($darkblue, 0.0), $endColor: rgba($darkblue, 0.5))
    bottom: 0
    color: #fff
    left: 0
    margin: 0
    height: 35%
    padding: $card-content-vertical-padding $card-content-horizontal-padding
    position: absolute
    right: 0
    .card__content__inner
      position: absolute
      top: auto
      bottom: $card-content-vertical-padding
      left: $card-content-horizontal-padding
      right: $card-content-horizontal-padding


  .has-attribution &
    height: 83px
    bottom: -40px
    .card__content__inner
      top: $card-content-vertical-padding
      bottom: 0


  .card--image-only &
    @extend %transition--base
    +font-size(20)
    bottom: -76px // This accommodates for 3 lines of copy.<commit_msg>Remove whitespace<commit_after>// Cards Base
//
//
// .card
//
// Styleguide 1.3

// -----------------------------------------------------------------------------
// Base card object and sizing variables
//
// - Width of a Card defaults to single - override when necessary
// -----------------------------------------------------------------------------

$card-grid-height:                  380px
$card-grid-half-height:             185px

$standard-card-image-height:        275px
$small-card-image-height:           185px

$default-card-top-padding:          55px
$image-only-padding:                7px

$card-content-vertical-padding:     13px
$card-content-horizontal-padding:   15px

// responsive
$mobile-card-grid-height:           296px
$mobile-card-grid-half-height:      143px
$mobile-standard-card-image-height: 192px

// -----------------------------------------------------------------------------
// Card Base
// -----------------------------------------------------------------------------

.card
  +backface-visibility(hidden)
  @extend %standard-shadow
  background: #fff
  margin-bottom: 10px
  position: relative

  // apply hover state only to cards in the results area
  .results &
    &:hover
      +box-shadow(0, 2, 2, 0, rgba(3, 46, 92, 0.10))

  // hide the content area for image-only cards when it's not hovered over
  &.card--image-only
    overflow: hidden


// -----------------------------------------------------------------------------
// Card Images
// -----------------------------------------------------------------------------

.card__hero
  height: $standard-card-image-height
  overflow: hidden
  position: relative
  &:after
    +transition()
    @extend %empty-abs-generated-content
    background-color: transparent
    height: 100%
    left: 0
    top: 0
    width: 100%
  .responsive &
    height: $mobile-standard-card-image-height
    +respond-to(medium-view)
      height: $standard-card-image-height

  .card__image
    height: 100%
    &.is-portrait
      height: auto
      max-width: 100%
    .responsive &
      width: 100%
      height: auto
      +respond-to(medium-view)
        height: 100%
        width: auto

  // darken the image when card is hovered over
  .card:hover &
    &:after
      background-color: rgba(0,0,0,0.3)

  .card--small-image &
    height: $small-card-image-height

  .card--full-image &
    height: $card-grid-height
    .responsive &
      height: $mobile-card-grid-height
      +respond-to(medium-view)
        height: $card-grid-height

  .card--image-only &
    height: $card-grid-half-height
    .responsive &
      height: $mobile-card-grid-half-height
      +respond-to(medium-view)
        height: $card-grid-half-height

.card__hero__overlay
  height: $standard-card-image-height
  left: 0
  position: absolute
  top: 0
  z-index: 3

  img
    height: 100%
    // Filters currently add a lot of jank on scroll
    &
      +filter(drop-shadow(0px 0px 15px rgba(0,0,0,0.35)))


// -----------------------------------------------------------------------------
// Card Content Areas
// -----------------------------------------------------------------------------

.card__content
  height: ($card-grid-height - $standard-card-image-height - (2 * $card-content-vertical-padding) )
  margin-bottom: $card-content-vertical-padding
  overflow: hidden
  padding: $card-content-vertical-padding $card-content-horizontal-padding 0 $card-content-horizontal-padding

  .card--no-image &
    height: $card-grid-height - $default-card-top-padding - $card-content-vertical-padding
    padding-top: $default-card-top-padding

  .card--small-image &
    height: ($card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )
    .responsive &
      height: ($mobile-card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )
      +respond-to(medium-view)
        height: ($card-grid-height - $small-card-image-height - (2 * $card-content-vertical-padding) )

  .card--full-image &
    @extend %transition--base
    +background-gradient($startColor: rgba($darkblue, 0.0), $endColor: rgba($darkblue, 0.5))
    bottom: 0
    color: #fff
    left: 0
    margin: 0
    height: 35%
    padding: $card-content-vertical-padding $card-content-horizontal-padding
    position: absolute
    right: 0
    .card__content__inner
      position: absolute
      top: auto
      bottom: $card-content-vertical-padding
      left: $card-content-horizontal-padding
      right: $card-content-horizontal-padding

  .has-attribution &
    height: 83px
    bottom: -40px
    .card__content__inner
      top: $card-content-vertical-padding
      bottom: 0

  .card--image-only &
    @extend %transition--base
    +font-size(20)
    bottom: -76px // This accommodates for 3 lines of copy.
{'fraction_non_alphanumeric': 0.24352548036758562, 'fraction_numerical': 0.02297410192147034, 'mean_word_length': 1.631043956043956, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4503602', 'n_tokens_mistral': 2940, 'n_tokens_neox': 2709, 'n_words': 604}