gaiety/gaiety-life
1
0
Fork 0
Code Activity

Swapped blur (poor performance) for a bg gradient

Browse source
This commit is contained in:
Joe Wroten 2019-06-22 17:55:18 -05:00
parent 02c4c30946
commit 2786d1a372
1 changed files with 2 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/PostCard.vue
View file

@ -2,7 +2,6 @@
<div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}"> <div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
<div class="post-card__header"> <div class="post-card__header">
<g-image alt="Cover image" v-if="post.coverImage" class="post-card__image" :src="post.coverImage" /> <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>
<div class="post-card__content"> <div class="post-card__content">
<h2 class="post-card__title" v-html="post.title" /> <h2 class="post-card__title" v-html="post.title" />
@ -42,6 +41,8 @@ export default {
overflow: hidden; overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
position: relative; position: relative;
background: rgb(2,0,36);
background: linear-gradient(180deg, var(--link-color) 0%, var(--bg-content-color) 100%);
&:empty { &:empty {
display: none; display: none;
@ -52,19 +53,6 @@ export default {
max-height: 75vh; max-height: 75vh;
margin: 0 auto; margin: 0 auto;
display: block !important; 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 { &__title {