<commit_before>.article-card
  width 100%
  max-width 350px
  margin-left auto
  margin-right auto
  margin-bottom 1em
  transition 300ms linear
  +above(md)
    display block
    vertical-align top
    width 100%
    max-width none
    height 300px
    margin-left auto
    margin-right auto


.article-card,
.article-card--empty
  max-width 350px
  margin-left auto
  margin-right auto
  &.onboarding
    position relative
    z-index 55
    background white
    border-radius 10px

    p
      max-width 300px
      margin-left auto
      margin-right auto

  +above(md)
    max-width none

.article-card--empty
  height 150px
  align-items center
  justify-content center
  display flex
  flex-direction column
  background-color $mercury
  box-shadow 0 0 0 4px $gallery


  +above(md)
    height 300px
    background-color $mercury

  .article-card__container
    background-color $mercury

.card,
.article-card__container
  border-radius 10px
  top 0
  left 0
  background white
  height 100%
  width 100%
  overflow-y auto
  overflow-x hidden
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.22)

.article-card__container
  flex-direction column
  +above(md)
    flex-direction row

.article-card__content
  display flex
  align-items stretch
  flex-direction column
  height 100%
  width 100%

  +above(md)
    flex-direction row

.article-card--title
  white-space normal

.article-card--add .article-card__container
  background $gray

.article-card__edit-button
  font-size 12px
  padding .25rem 1rem

.article-card__summary
  display flex
  white-space normal
  flex-direction column
  justify-content center
  padding 1rem
  align-items space-between
  +above(md)
    display flex
    height 100%
    justify-content space-between
    padding 2rem
    width 70%

.article-card__title
  padding-bottom .25rem
  margin-bottom .5rem

.article-card__header
  color white
  padding 1.5rem 0rem .5rem 0rem
  +above(md)
    align-content flex-start
    padding 3rem 0 2rem

  h1
    margin-bottom 0rem
    padding 4px
    border-bottom 2px solid transparent
    +above(md)
      margin-bottom 1rem

.article-card__image
  position relative
  background-color $gray
  background-position top center
  background-repeat no-repeat
  background-size cover
  display flex
  flex-direction column
  justify-content center
  align-items center
  transition 300ms linear
  height 200px

  +above(md)
    height 100%
    width 400px
    max-width 30%
    flex-basis 35%
    background-position top center
    background-color white

  &.hidden
    opacity 0

  &.editing:after
    content ''
    display block
    position absolute
    z-index 1
    top 0
    left 0
    width 100%
    height 100%
    background rgba(black, .5)

.article-card__header
  //

.article-card__image__edit-button
  position relative
  background transparent
  color white
  z-index 2

.article-card__cancel-button
  cursor pointer
  position absolute
  z-index 2
  top 0px
  right 5px
  background none
  border none
  font-size 1.5rem
  color white
  &:focus
    outline 0

.article-card__caption
  width 300px
  display inline-block
  vertical-align top
  margin-right 1em
  white-space normal


// Sharing

.article-card.article-card--share
  width 250px
  position absolute
  top 25%
  left 50%
  height auto
  border-radius 20px
  box-shadow -5px 5px 10px rgba($black, .2)
  transition none
  *
    transition none

  .article-card__container,
  .article-card__content
    flex-direction column
    height auto
    overflow hidden
    // backface-visibility hidden
    border-top-left-radius 20px
    border-top-right-radius 20px

  .sharing-card__image
    position relative
    max-width none
    height 170px
    width 100%
    border-top-left-radius 20px
    border-top-right-radius 20px
    overflow hidden
    background-size cover
    background-position 50%

    img
      position absolute
      top 0
      left 0
      min-height 100%

  .article-card__summary
    height auto
    width 100%
    max-width none
    padding .5rem
    height 350px
    text-align center
    

    h2
      font-size 20px
      line-height 30px
      

.article-card--share.card-0
  left 30%
  transform translate(-60%, 3%) rotate(-10deg) translateZ(0)

.article-card--share.card-1
  transform translateX(-50%)  translateZ(0)

.article-card--share.card-2
  left 68%
  transform translate(-32%, 3%) rotate(10deg)  translateZ(0)

.article-card__controls
  width 100%
  justify-content space-between
  align-items center<commit_msg>Refinements to share image #41<commit_after>.article-card
  width 100%
  max-width 350px
  margin-left auto
  margin-right auto
  margin-bottom 1em
  transition 300ms linear
  +above(md)
    display block
    vertical-align top
    width 100%
    max-width none
    height 300px
    margin-left auto
    margin-right auto


.article-card,
.article-card--empty
  max-width 350px
  margin-left auto
  margin-right auto
  &.onboarding
    position relative
    z-index 55
    background white
    border-radius 10px

    p
      max-width 300px
      margin-left auto
      margin-right auto

  +above(md)
    max-width none

.article-card--empty
  height 150px
  align-items center
  justify-content center
  display flex
  flex-direction column
  background-color $mercury
  box-shadow 0 0 0 4px $gallery


  +above(md)
    height 300px
    background-color $mercury

  .article-card__container
    background-color $mercury

.card,
.article-card__container
  border-radius 10px
  top 0
  left 0
  background white
  height 100%
  width 100%
  overflow-y auto
  overflow-x hidden
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.22)

.article-card__container
  flex-direction column
  +above(md)
    flex-direction row

.article-card__content
  display flex
  align-items stretch
  flex-direction column
  height 100%
  width 100%

  +above(md)
    flex-direction row

.article-card--title
  white-space normal

.article-card--add .article-card__container
  background $gray

.article-card__edit-button
  font-size 12px
  padding .25rem 1rem

.article-card__summary
  display flex
  white-space normal
  flex-direction column
  justify-content center
  padding 1rem
  align-items space-between
  +above(md)
    display flex
    height 100%
    justify-content space-between
    padding 2rem
    width 70%

.article-card__title
  padding-bottom .25rem
  margin-bottom .5rem

.article-card__header
  color white
  padding 1.5rem 0rem .5rem 0rem
  +above(md)
    align-content flex-start
    padding 3rem 0 2rem

  h1
    margin-bottom 0rem
    padding 4px
    border-bottom 2px solid transparent
    +above(md)
      margin-bottom 1rem

.article-card__image
  position relative
  background-color $gray
  background-position top center
  background-repeat no-repeat
  background-size cover
  display flex
  flex-direction column
  justify-content center
  align-items center
  transition 300ms linear
  height 200px

  +above(md)
    height 100%
    width 400px
    max-width 30%
    flex-basis 35%
    background-position top center
    background-color white

  &.hidden
    opacity 0

  &.editing:after
    content ''
    display block
    position absolute
    z-index 1
    top 0
    left 0
    width 100%
    height 100%
    background rgba(black, .5)

.article-card__header
  //

.article-card__image__edit-button
  position relative
  background transparent
  color white
  z-index 2

.article-card__cancel-button
  cursor pointer
  position absolute
  z-index 2
  top 0px
  right 5px
  background none
  border none
  font-size 1.5rem
  color white
  &:focus
    outline 0

.article-card__caption
  width 300px
  display inline-block
  vertical-align top
  margin-right 1em
  white-space normal


// Sharing

.article-card.article-card--share
  width 260px
  position absolute
  top 25%
  left 50%
  height auto
  border-radius 10px
  box-shadow -5px 5px 10px rgba($black, .2)
  transition none
  *
    transition none

  .article-card__container,
  .article-card__content
    flex-direction column
    height auto
    overflow hidden
    // backface-visibility hidden
    border-top-left-radius 10px
    border-top-right-radius 10px

  .sharing-card__image
    position relative
    max-width none
    height 170px
    width 100%
    border-top-left-radius 10px
    border-top-right-radius 10px
    overflow hidden
    background-size cover
    background-position 50%

    img
      position absolute
      top 0
      left 0
      min-height 100%

  .article-card__summary
    height auto
    width 100%
    max-width none
    padding .5rem
    height 350px
    text-align center
    

    h2
      font-size 30px
      line-height 1.3
      color rgba(black, .38)
      
      

.article-card--share.card-0
  left 30%
  transform translate(-58%, 4.5%) rotate(-10deg) translateZ(0)

.article-card--share.card-1
  transform translateX(-50%)  translateZ(0)

.article-card--share.card-2
  left 68%
  transform translate(-39%, 4.5%) rotate(10deg)  translateZ(0)

.article-card__controls
  width 100%
  justify-content space-between
  align-items center
{'fraction_non_alphanumeric': 0.0696594427244582, 'fraction_numerical': 0.04489164086687306, 'mean_word_length': 2.628158844765343, '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': '1357236', 'n_tokens_mistral': 3282, 'n_tokens_neox': 2874, 'n_words': 828}