[S] Implement image-top
This commit is contained in:
@@ -39,8 +39,8 @@ export interface BlogPostMeta
|
|||||||
export default class BlogPostPreview extends Vue
|
export default class BlogPostPreview extends Vue
|
||||||
{
|
{
|
||||||
@Prop({required: true}) meta!: BlogPostMeta
|
@Prop({required: true}) meta!: BlogPostMeta
|
||||||
@Prop({default: true}) imageOnTop!: boolean
|
@Prop({default: true}) imageOnTop = true
|
||||||
@Prop({default: true}) tagOnTop!: boolean
|
@Prop({default: true}) tagOnTop = true
|
||||||
|
|
||||||
created(): void
|
created(): void
|
||||||
{
|
{
|
||||||
@@ -65,6 +65,8 @@ export default class BlogPostPreview extends Vue
|
|||||||
|
|
||||||
#BlogPostPreview
|
#BlogPostPreview
|
||||||
text-align: left
|
text-align: left
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
#date
|
#date
|
||||||
font-size: 0.7em
|
font-size: 0.7em
|
||||||
@@ -101,6 +103,14 @@ export default class BlogPostPreview extends Vue
|
|||||||
padding-top: 10px
|
padding-top: 10px
|
||||||
color: $color-text-light
|
color: $color-text-light
|
||||||
|
|
||||||
|
// Put image on top
|
||||||
|
#BlogPostPreview.image-top
|
||||||
|
#title-image
|
||||||
|
order: -1
|
||||||
|
margin: -15px -20px 10px
|
||||||
|
max-width: calc(100% + 40px)
|
||||||
|
min-width: calc(100% + 40px)
|
||||||
|
|
||||||
@media screen and (max-width: 400px)
|
@media screen and (max-width: 400px)
|
||||||
#BlogPostPreview
|
#BlogPostPreview
|
||||||
img
|
img
|
||||||
|
|||||||
Reference in New Issue
Block a user