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

View file

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