yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

fix(theme): blog cover hydration mismatch in mobile (#290)

Browse Source
This commit is contained in:
pengzhanbo 2024-10-17 00:24:41 +08:00 committed by GitHub
parent 1b5d9daaa9
commit cb9d7f18ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
theme/src/client/components/Blog/VPPostItem.vue
View File

@ -85,8 +85,8 @@ const coverStyles = computed(() => {
</script>
<template>
<div class="vp-blog-post-item" :class="{ 'has-cover': cover, [coverLayout]: cover }">
<div v-if="cover" class="post-cover" :class="{ compact: coverCompact }" :style="coverStyles">
<div class="vp-blog-post-item" data-allow-mismatch :class="{ 'has-cover': cover, [coverLayout]: cover }">
<div v-if="cover" class="post-cover" data-allow-mismatch :class="{ compact: coverCompact }" :style="coverStyles">
<img :src="cover.url" :alt="post.title" loading="lazy">
</div>
<div class="blog-post-item-content">
@ -140,6 +140,13 @@ const coverStyles = computed(() => {
gap: 20px;
}
@media (max-width: 419px) {
.vp-blog-post-item.has-cover:where(.left, .right) {
display: block;
gap: unset;
}
}
.vp-blog-post-item.has-cover.right {
flex-direction: row-reverse;
}
@ -160,7 +167,6 @@ const coverStyles = computed(() => {
}
.vp-blog-post-item.has-cover.top .post-cover {
/* width: calc(100% + 32px); */
margin: -16px -16px 16px;
border-radius: 0;
}