|
2 | 2 | <v-container> |
3 | 3 | <v-row class="mt-16"> |
4 | 4 | <v-col cols="12" md="9"> |
5 | | - <v-hover v-slot="{ hover }"> |
6 | | - <v-card |
7 | | - v-for="post in blogPosts" |
8 | | - :key="post.route" |
9 | | - :to="post.route" |
10 | | - :elevation="hover ? 4 : 1" |
| 5 | + <v-hover v-for="post in blogPosts" v-slot="{ hover }" :key="post.route"> |
| 6 | + <vue-glow |
| 7 | + color="#329ef4" |
| 8 | + mode="hex" |
| 9 | + elevation="7" |
| 10 | + :intensity="hover ? 0.7 : 0" |
| 11 | + intense |
11 | 12 | > |
12 | | - <v-card-title class="text-h4 text-break">{{ |
13 | | - post.title |
14 | | - }}</v-card-title> |
15 | | - <v-card-subtitle> |
16 | | - <span class="text-uppercase primary--text-color">{{ |
17 | | - post.date |
18 | | - }}</span> |
19 | | - • <span class="text-uppercase">{{ post.readTime }}</span> |
20 | | - </v-card-subtitle> |
21 | | - <v-card-text class="mt-n2"> |
22 | | - <p class="text--primary subtitle-1">{{ post.description }}</p> |
23 | | - <div class="d-flex mt-n2"> |
24 | | - <v-avatar class="mb-n2"> |
25 | | - <v-img :src="post.authorImage"></v-img> |
26 | | - </v-avatar> |
27 | | - <div class="ml-2"> |
28 | | - <p class="subtitle-1">{{ post.authorName }}</p> |
29 | | - <p class="mt-n5 mb-n4"> |
30 | | - {{ post.authorTwitter }} |
31 | | - <v-icon color="#1DA1F2" small>{{ mdiTwitter }}</v-icon> |
32 | | - </p> |
| 13 | + <v-card :to="post.route"> |
| 14 | + <v-card-title class="text-h4 text-break">{{ |
| 15 | + post.title |
| 16 | + }}</v-card-title> |
| 17 | + <v-card-subtitle> |
| 18 | + <span class="text-uppercase primary--text-color">{{ |
| 19 | + post.date |
| 20 | + }}</span> |
| 21 | + • <span class="text-uppercase">{{ post.readTime }}</span> |
| 22 | + </v-card-subtitle> |
| 23 | + <v-card-text class="mt-n2"> |
| 24 | + <p class="text--primary subtitle-1">{{ post.description }}</p> |
| 25 | + <div class="d-flex mt-n2"> |
| 26 | + <v-avatar class="mb-n2"> |
| 27 | + <v-img :src="post.authorImage"></v-img> |
| 28 | + </v-avatar> |
| 29 | + <div class="ml-2"> |
| 30 | + <p class="subtitle-1">{{ post.authorName }}</p> |
| 31 | + <p class="mt-n5 mb-n4"> |
| 32 | + {{ post.authorTwitter }} |
| 33 | + <v-icon color="#1DA1F2" small>{{ mdiTwitter }}</v-icon> |
| 34 | + </p> |
| 35 | + </div> |
33 | 36 | </div> |
34 | | - </div> |
35 | | - </v-card-text> |
36 | | - </v-card> |
| 37 | + </v-card-text> |
| 38 | + </v-card> |
| 39 | + </vue-glow> |
37 | 40 | </v-hover> |
38 | 41 | </v-col> |
39 | 42 | <v-col v-if="$vuetify.breakpoint.mdAndUp" md="3"> |
|
0 commit comments