marc-leopold/components/GalleryFeatured.vue

<template>
  <ul class="gallery-featured">
    <li v-for="(gallery, index) in galleries"
        class="featured-image thumb-overlay"
        :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
        :key="index"
        @click="$emit('clicked', index)">
      <span class="gallery-title">{{ gallery.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    galleries: {
      type: Array,
      required: true
    },
  },
}
</script>

<style lang="scss" scoped>
.featured-image {
  width: 100%;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

@media (max-width: $bp__layout) {
  .featured-image {
    height: calc(50vh - #{$site-menu__header-height / 2});
    width: 100vw;
    flex: 0 0 100vw;
  }

  .gallery-title {
    position: absolute;
    display: block;
    max-width: 66%;

    font-size: 1.5em;
    padding: .5em 1em .5em 1em;

    margin: 1rem 0 0 0;

    color: #fff;
    background-color: rgba(0, 0, 0, .3);

    border-top-right-radius: 6rem 6rem;
    border-bottom-right-radius: 6rem 6rem;
  }

}

@media (min-width: $bp__layout) {
  .gallery-featured {
    transition: opacity .3s; // TEMP
    padding: 8px;
  }

  .featured-image {
    z-index: 10;
    position: relative;
    height: 0;
    padding-top: 100%;
    margin-bottom: 4px;
  }

  .gallery-title {
    z-index: 15;
    position: absolute;
    top: 8px;
    right: 8px;
    text-align: right;
    font-size: 1em;
    @include font-title();
    color: $color__neutral-900;

    @media (min-width: $bp__gallery-compact) {
      font-size: 1.3em;
    }
  }

}

</style>