add new cover-screen style for images

src/components/generic/Image.vue

@@ -61,15 +61,17 @@
       autoSize: Boolean,
       contain: Boolean,
       cover: Boolean,
+      coverScreen: Boolean,
       calculateLuminosity: Boolean
     },
     computed: {
       cssClasses () {
-        const result = []
-        if (this.contain) result.push('is-contained')
-        if (this.cover) result.push('is-covering')
-        if (this.size) result.push('is-fixed-size')
-        return result
+        return {
+          'is-contained': this.contain,
+          'is-covering': this.cover,
+          'is-covering-screen': this.coverScreen,
+          'is-fixed-size': this.size
+        }
       },
       style () {
         const result = {}
@@ -145,7 +147,9 @@
   }
 </script>
 
-<style>
+<style lang="scss">
+  @import '../../styles/variables';
+
   .image {
     overflow: hidden;
   }
@@ -168,4 +172,37 @@
   .image.is-covering img {
     object-fit: cover;
   }
+
+  .image.is-covering-screen {
+    --luminosity: .5;
+    width: calc(100% + 2rem) !important;
+    height: 75vh !important;
+    overflow: hidden;
+    pointer-events: none;
+    filter: blur(10px);
+    opacity: .3;
+    position: fixed;
+    top: -1rem;
+    left: -1rem;
+    right: -1rem;
+
+    img {
+      max-height: none !important;
+      height: auto !important;
+      transform: translateY(-10%);
+      filter: brightness(calc(1 - var(--luminosity)));
+    }
+
+    &::after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 100%;
+      background-image: linear-gradient(fade_out($color-base, 1), $color-base);
+      z-index: 2;
+    }
+  }
 </style>