Minor fixes in new articles

This commit is contained in:
Asutosh Palai
2016-12-26 01:25:33 +05:30
parent 5628819535
commit 2e9b61cd77
2 changed files with 28 additions and 8 deletions

View File

@ -31,6 +31,7 @@
</div> </div>
<div id="new-articles" class="container content"> <div id="new-articles" class="container content">
<div class="container-title">New Articles</div>
<section> <section>
<div class="row outer-row"> <div class="row outer-row">
{% for post in site.related_posts limit: 5 %} {% for post in site.related_posts limit: 5 %}
@ -40,7 +41,8 @@
<div class="row outer-row"> <div class="row outer-row">
{% endif %} {% endif %}
<div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}"> <div class="col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %} article-col">
<div class="article">
<div class="center-fill-container img-container tinted"> <div class="center-fill-container img-container tinted">
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}"> <img src="/images/posts/{{post.image}}" alt="" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
</div> </div>
@ -53,6 +55,7 @@
{% if forloop.index < 3 %} {% if forloop.index < 3 %}
<div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div> <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
{% endif %} {% endif %}
</div> <!-- details -->
</div> </div>
</div> </div>
{% endfor %} {% endfor %}

View File

@ -291,13 +291,23 @@ nav {
#new-articles { #new-articles {
color: white; color: white;
margin-bottom: 60px; margin-bottom: 60px;
position: relative;
.article { .container-title {
position: relative; position: absolute;
height: 340px; top: -2.25em;
padding: 0 5px; left: -.5em;
margin-top: 10px; z-index: 10;
color: #252525;
background: #fafafa;
font-size: 14px;
padding: 0.35em 2.35em;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35); box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
border-radius: 0.4em;
}
.article-col {
padding: 0 5px;
&:first-of-type { &:first-of-type {
padding-left: 0; padding-left: 0;
@ -308,6 +318,13 @@ nav {
} }
} }
.article {
position: relative;
height: 340px;
margin-top: 10px;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
}
.details { .details {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -319,12 +336,12 @@ nav {
} }
.row:last-of-type { .row:last-of-type {
.article:first-of-type { .article-col:first-of-type .article {
overflow: hidden; overflow: hidden;
border-radius: 0px 0px 0px 10px; border-radius: 0px 0px 0px 10px;
} }
.article:last-of-type { .article-col:last-of-type .article {
overflow: hidden; overflow: hidden;
border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px;
} }