From 02c4c309466a07a64b62067d49b04d3cc6c36fe6 Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe@wroten.me>
Date: Sat, 22 Jun 2019 15:57:11 -0500
Subject: [PATCH] Post cover image max-height and blur

---
 src/components/PostCard.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue
index 4cfdffb..e9f7d62 100644
--- a/src/components/PostCard.vue
+++ b/src/components/PostCard.vue
@@ -2,6 +2,7 @@
   <div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
     <div class="post-card__header">
       <g-image alt="Cover image" v-if="post.coverImage" class="post-card__image" :src="post.coverImage" />
+      <g-image alt="" v-if="post.coverImage" class="post-card__image__bgblur" :src="post.coverImage" />
     </div>
     <div class="post-card__content">
       <h2 class="post-card__title" v-html="post.title" />
@@ -40,6 +41,7 @@ export default {
     margin-top: calc(var(--space) * -1);
     overflow: hidden;
     border-radius: var(--radius) var(--radius) 0 0;
+    position: relative;
 
     &:empty {
       display: none;
@@ -47,7 +49,22 @@ export default {
   }
 
   &__image {
-    min-width: 100%;
+    max-height: 75vh;
+    margin: 0 auto;
+    display: block !important;
+    position: relative;
+    z-index: 2;
+  }
+
+  &__image__bgblur {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    transform: scale(1.5);
+    filter: blur(30px);
   }
 
   &__title {
@@ -76,4 +93,4 @@ export default {
     z-index: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>