[S] Blog: Responsive width

This commit is contained in:
Hykilpikonna
2021-12-05 12:40:57 -05:00
parent b9085a0660
commit ea37918c45
+13 -3
View File
@@ -3,7 +3,7 @@
<div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}"> <div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}">
<div class="reply" v-if="p.reply"> <div class="reply" v-if="p.reply">
<img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt=""> <img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt="">
<div class="mtext fbox-vcenter">{{p.reply.text}}</div> <div class="mtext"><span>{{p.reply.text}}</span></div>
</div> </div>
<div class="images" v-if="p.images"> <div class="images" v-if="p.images">
<div class="img" v-for="i in p.images" :key="i" <div class="img" v-for="i in p.images" :key="i"
@@ -76,7 +76,7 @@ export default class Blog extends Vue
border-radius: 50px 50px 0 0 border-radius: 50px 50px 0 0
padding: 20px padding: 20px
font-size: 0.9em font-size: 0.9em
max-width: 600px width: min(600px, 80vw)
.post.service .post.service
.id .id
@@ -113,7 +113,7 @@ export default class Blog extends Vue
max-height: 40px max-height: 40px
margin-left: 10px margin-left: 10px
color: lighten($color-text-main, 20) color: lighten($color-text-main, 20)
//display: -webkit-box display: -webkit-box
-webkit-line-clamp: 2 /* number of lines to show */ -webkit-line-clamp: 2 /* number of lines to show */
line-clamp: 2 line-clamp: 2
-webkit-box-orient: vertical -webkit-box-orient: vertical
@@ -157,4 +157,14 @@ export default class Blog extends Vue
i i
font-size: 0.8em font-size: 0.8em
margin-left: 4px margin-left: 4px
// Phone layout
@media screen and (max-width: 570px)
#Blog
border-radius: 0
padding: 0
background: unset
.post
background-color: #fdf9f1
</style> </style>