Fix layout

This commit is contained in:
lostinlight 2018-10-14 21:09:20 +03:00
parent 6cc034bed2
commit e047db03c7
2 changed files with 19 additions and 16 deletions

View file

@ -8,7 +8,10 @@
<h4><%- __('featured') %></h4>
</div>
<a href="<%- post.url %>" class="post__preview featured">
<img src="/<%- post.path %><%- post.banner%>" alt="featured post image">
<div class="post__image">
<img src="/<%- post.path %><%- post.banner%>" alt="featured post image">
</div>
<div class="post__content">
<p class="post__title u-emphasize u-center">
<%- post.title %>

View file

@ -90,7 +90,6 @@
border: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 4em 0;
max-height: 300px;
&:hover,
@ -106,16 +105,16 @@
}
.post__preview.featured > img,
.post__preview.featured > .post__image,
.post__preview.featured .post__content {
flex: 48% 0 0;
}
.post__preview.featured > img {
.post__preview.featured img {
border-radius: 10px;
height: 220px;
}
.post__preview.featured .post__content {
display: flex;
flex-direction: column;
@ -191,6 +190,18 @@ $taglist: (diaspora, $diaspora),
.post__preview:not(.wanted):not(.featured) {
flex: 46% 0 0;
}
.post__preview.featured {
flex-wrap: wrap;
max-height: inherit;
margin: 1.5em 0;
}
.post__preview.featured > .post__image,
.post__preview.featured .post__content {
flex: 100% 0 0;
margin-bottom: 2em
};
}
@media screen and (max-width: $mq-medium) {
@ -200,17 +211,6 @@ $taglist: (diaspora, $diaspora),
margin: -90px auto 3em;
}
.post__preview.featured {
max-height: inherit;
margin: 1.5em 0;
}
.post__preview.featured > img,
.post__preview.featured .post__content {
flex: 100% 0 0;
margin-bottom: 2em;
}
.post__preview:not(.wanted):not(.featured) {
flex: 100% 0 0;
height: 200px;