<commit_before><template>
<figure v-link="route(manga)" class="manga-card">
  <div>
    <img class="manga-card__image" alt="manga.name" :src="image(manga)">
    <figcaption class="manga-card__hover">
    </figcaption>
    <div>
      <span class="manga-card__title" v-html="manga.highlighted"></span>
    </div>
  </div>
</figure>
</template>

<script>
export default {
  props: {
    manga: Object
  },
  methods: {
    image (manga) {
      return manga.image || 'https://placeholdit.imgix.net/~text?txtsize=33&txt=%F0%9F%8D%99Mangare&w=221&h=350'
    },
    route (manga) {
      return {
        name: 'manga',
        params: {
          mangaId: manga._id
        }
      }
    }
  }
}
</script>

<style lang="stylus">
@import '../assets/style/palette'
@import '../assets/style/flex'
@import '../assets/style/shadow'

.manga-card
  position relative
  float left
  overflow hidden
  margin 1rem
  min-width 120px
  max-width 220px
  height 360px
  width 100%
  text-align center
  cursor pointer
  border solid 1px darken(clear, 20%)
  border-radius 2px
  font-weight 500

  .manga-card__hover
    backface-visibility hidden
    position absolute
    top auto
    left 0
    width 100%
    bottom 0
    padding 1em
    height 3.75em
    background lighten(clear, 20%)
    color #3c4a50
    transition transform 0.35s
    // transform translate3d(0,100%,0)

  img.manga-card__image
    position relative
    display block
    min-height 100%
    max-width 100%

  em
    font-style normal
    font-weight 600
    color darken(primary, 30%)

</style>
<commit_msg>Make text vertically aligned in MangaCard ✨<commit_after><template>
<figure v-link="route(manga)" class="manga-card">
  <div>
    <img class="manga-card__image" :title="manga.name" :src="image(manga)">
    <figcaption class="manga-card__hover">
      <div class="manga-card__title-container">
        <h2 v-fit="manga.name" class="manga-card__title">{{ manga.name }}</h2>
      </div>
    </figcaption>
  </div>
</figure>
</template>

<script>
export default {
  props: {
    manga: Object
  },
  methods: {
    image (manga) {
      return manga.image || 'https://placeholdit.imgix.net/~text?txtsize=33&txt=%F0%9F%8D%99Mangare&w=221&h=350'
    },
    route (manga) {
      return {
        name: 'manga',
        params: {
          mangaId: manga._id
        }
      }
    }
  },
  directives: {
    fit () {
      requestAnimationFrame(() => {
        const maxHeight = 0.2 * 360
        let height = this.el.offsetHeight
        let fontSize = parseInt(window.getComputedStyle(this.el).fontSize)
        // let 1rem of distance
        while (height > maxHeight - 2 * fontSize) {
          this.el.style.fontSize = `${--fontSize}px`
          // 1rem padding on parent
          this.el.parentNode.style.padding = `${fontSize}px`
          height = this.el.offsetHeight
        }
      })
    }
  }
}
</script>

<style lang="stylus">
@import '../assets/style/palette'
@import '../assets/style/flex'
@import '../assets/style/shadow'

.manga-card
  position relative
  float left
  overflow hidden
  margin 1rem
  min-width 120px
  max-width 220px
  height 360px
  width 100%
  text-align center
  cursor pointer
  border solid 1px darken(clear, 20%)
  border-radius 2px
  font-weight 500

  &:hover
    .manga-card__hover
      transform translate3d(0,0,0)
      opacity .8
      background-color dark
      color clear


  .manga-card__hover
    backface-visibility hidden
    position absolute
    top auto
    left 0
    width 100%
    bottom 0
    height 100%
    background lighten(clear, 20%)
    color dark
    transition transform 0.35s,
               opacity 0.35s,
               color 0.35s,
               background-color 0.35s
    transform translate3d(0,80%,0)

    @extend .flex
    flex-direction column
    justify-content flex-start

  img.manga-card__image
    position relative
    display block
    min-height 100%
    max-width 100%

  em
    font-style normal
    font-weight 600
    color darken(primary, 30%)

  .manga-card__title-container
    padding 1em
    height .2 * @height
    @extend .flex
  .manga-card__title
    font-size 1.5rem
    text-align center
    display inline-block
    margin 0

</style>

{'fraction_non_alphanumeric': 0.12357414448669202, 'fraction_numerical': 0.037785171102661594, 'mean_word_length': 2.4247355573637104, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, 'https://': 2, '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': '4305366', 'n_tokens_mistral': 1558, 'n_tokens_neox': 1422, 'n_words': 326}