varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-02-09 00:10:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completed post page

Browse Source
This commit is contained in:
Asutosh Palai
2016-06-19 16:18:46 +05:30
parent d5f0d21328
commit a81c945ec7
4 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/header.html
View File

@ -3,8 +3,10 @@
{% assign post = page %} {% assign post = page %}
{% endif %} {% endif %}
<div id="home-header" class="container-fluid"> <div id="header" class="container-fluid {% if page.is_post %}post-header{% endif %}">
{% if post.image != nil %}
<div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div> <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div>
{% endif %}
<div class="cover center-both text-center"> <div class="cover center-both text-center">
<h1 class="title">{{ post.title }}</h1> <h1 class="title">{{ post.title }}</h1>
</div> </div>
@ -12,7 +14,7 @@
<div class="left"> <div class="left">
{% if page.is_post and post.next %} {% if page.is_post and post.next %}
<a class="center-both scroll-buttons" href="{{ post.next.url }}"> <a class="center-both scroll-buttons" href="{{ post.next.url }}">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
{% endif %} {% endif %}
@ -21,7 +23,7 @@
<div class="right"> <div class="right">
{% if page.is_post and post.next %} {% if page.is_post and post.next %}
<a class="center-both scroll-buttons" href="{{ post.previous.url }}"> <a class="center-both scroll-buttons" href="{{ post.previous.url }}">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
{% endif %} {% endif %}

32
_layouts/post.html
View File

@ -1,12 +1,7 @@
--- ---
layout: layout layout: layout
--- ---
<section class="post"> <section class="post container">
<h1>
<a href="{{ page.url }}">{{ page.title }}</a>
</h1>
<section class="byline"> <section class="byline">
{{ page.date | date: "%B %e, %Y" }} {{ page.date | date: "%B %e, %Y" }}
</section> </section>
@ -17,10 +12,21 @@ layout: layout
</section> </section>
{% if page.isImageCover == false %} <div id="related-articles-container" class="container-fluid">
{% if page.image %} <section id="related-articles" class="row">
<div class="cover">
<img src="/images/posts/{{ page.image }}" alt=""> {% for post in site.related_posts limit: 4 %}
</div> <div class="article col-sm-3">
{% endif %} <a href="{{ post.url }}">
{% endif %} <div class="center-fill-container img-container">
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
</div>
<div class="details text-center ">
<h3 class="title">{{ post.title | truncatewords: 4}}</h3>
<p class="tag">{{ post.tag }}</p>
</div>
</a>
</div>
{% endfor %}
</section>
</div>

23
css/base.scss
View File

@ -140,7 +140,7 @@ body {
// ============= HOME-HEADER ============= // // ============= HOME-HEADER ============= //
#home-header { #header {
position: relative; position: relative;
height: 500px; height: 500px;
margin-bottom: -($new-article-img-height / 4); margin-bottom: -($new-article-img-height / 4);
@ -197,7 +197,7 @@ body {
// ============= /HOME-HEADER ============= // // ============= /HOME-HEADER ============= //
// ============= NEW-ARTICLES ============ // // ============= NEW-ARTICLES ============ //
#new-articles { #new-articles, #related-articles {
z-index: 10; z-index: 10;
.img-container { .img-container {
@ -389,12 +389,15 @@ blockquote {
// ============== POST ============== // // ============== POST ============== //
.post { .post {
z-index: 10;
position: relative;
background: white; background: white;
padding: 10px 50px; padding: 10px 50px;
@include shadow(); margin-bottom: 20px;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.5em; line-height: 1.5em;
color: #333332; color: #333332;
font-family: AvenirNext;
p img { p img {
display: block; display: block;
@ -408,8 +411,22 @@ blockquote {
} }
} }
.post-header {
box-shadow: 0 100px 125px -100px;
}
// ============== /POST ============== // // ============== /POST ============== //
// ========= RELATED-ARTICLES ======== //
#related-articles {
padding-top: 40px;
padding-bottom: 20px;
background: #f0f0f0;
}
// ========= /RELATED-ARTICLES ======= //
// ============== FOOTER ============== // // ============== FOOTER ============== //
footer { footer {

2
index.html
View File

@ -6,7 +6,7 @@ title: "Home"
<section id="new-articles" class="row"> <section id="new-articles" class="row">
{% for post in site.posts limit: 4 offset: 1 %} {% for post in site.posts limit: 4 offset: 1 %}
<div class="new-article col-sm-3"> <div class="article col-sm-3">
<a href="{{ post.url }}"> <a href="{{ post.url }}">
<div class="center-fill-container img-container"> <div class="center-fill-container img-container">
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}"> <img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}">