azalea/corner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] Wrap content in content

Browse Source
This commit is contained in:
Hykilpikonna
2021-12-26 18:08:14 -05:00
parent 96f7f5b5c5
commit 011c8f75cd
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlogPostPreview.vue
+12 -8
View File
@@ -1,5 +1,7 @@
<template> <template>
<div id="BlogPostPreview" class="card" :class="{'image-top': imageOnTop, 'tag-top': tagOnTop}"> <div id="BlogPostPreview" class="card" :class="{'image-top': imageOnTop, 'tag-top': tagOnTop}">
<img class="title-image" :src="image" v-if="image && imageOnTop" alt="Title Image">
<div id="titles"> <div id="titles">
<div id="date">{{meta.date}}</div> <div id="date">{{meta.date}}</div>
<div id="title">{{meta.title}}</div> <div id="title">{{meta.title}}</div>
@@ -8,10 +10,13 @@
<Tag v-for="t in meta.tags" :key="t" direction="left">{{t}}</Tag> <Tag v-for="t in meta.tags" :key="t" direction="left">{{t}}</Tag>
</div> </div>
</div> </div>
<img id="title-image" :src="image" v-if="image" alt="Title Image">
<div id="preview" class="markdown-content" v-html="content"></div> <div id="content">
<div class="tags" v-if="!tagOnTop"> <img class="title-image" :src="image" v-if="image && !imageOnTop" alt="Title Image">
<Tag v-for="t in meta.tags" :key="t" direction="right">{{t}}</Tag> <div id="preview" class="markdown-content" v-html="content"></div>
<div class="tags" v-if="!tagOnTop">
<Tag v-for="t in meta.tags" :key="t" direction="right">{{t}}</Tag>
</div>
</div> </div>
<!-- <div id="expand" v-if="meta.more_content">展开...</div>--> <!-- <div id="expand" v-if="meta.more_content">展开...</div>-->
</div> </div>
@@ -74,7 +79,7 @@ export default class BlogPostPreview extends Vue
font-size: 0.7em font-size: 0.7em
color: $color-text-light color: $color-text-light
> * + * > * + *, #content > * + *
margin-top: 10px margin-top: 10px
.tags .tags
@@ -109,9 +114,8 @@ export default class BlogPostPreview extends Vue
// Put image on top // Put image on top
#BlogPostPreview.image-top #BlogPostPreview.image-top
#title-image .title-image
order: -1 margin: -15px -20px 0px
margin: -15px -20px 10px
max-width: calc(100% + 40px) max-width: calc(100% + 40px)
min-width: calc(100% + 40px) min-width: calc(100% + 40px)