marc-leopold/components/GalleryFeatured.vue

<template>
  <ul class="gallery-featured">
    <li v-for="(gallery, index) in galleries"
        class="featured-image"
        :style="{ 'height': featuredHeight,
                  '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
    },
    featuredHeight: {
      type: String,
      required: true
    }
  },

  data () {
    return {
    }
  },

  computed: {
  },

  methods: {
  }
}
</script>

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

@media (max-width: $bp__layout) {
  .featured-image {
    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
    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
    opacity: .3;

    &:hover {
      opacity: 1;
    }
  }
}

</style>