varun-r-mallya/watchout-website-backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished article page

Browse Source
This commit is contained in:
Asutosh Palai
2016-12-26 01:03:56 +05:30
parent 227ba42774
commit 5628819535
6 changed files with 138 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
_data/categories_name.yaml Normal file
View File

@ -0,0 +1,15 @@
---
academics: Academics
cultural: Cultual
columns: Columns
coverstory: Cover Story
bigstory: Big Story
almostfamous: Almost Famous
phekingnews: Pheking News
guestcomentary: Guest Comentary
tech: Tech
career: Career
sac: SAC
editorial: Editorial
verbatim: Verbatim
sports: Sports

2
_includes/header.html
View File

@ -47,7 +47,7 @@
<div class="details">
<div class="head">
<h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
<div class="tag"><a href="/category/{{ post.category }}/">{{ post.category }}</a></div>
<div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
<span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
</div>
{% if forloop.index < 3 %}

2
_includes/horizontal_post.html
View File

@ -7,7 +7,7 @@
<div class="details">
<div class="head">
<h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
<div class="tag"><a href="/category/{{ post.category }}/">{{ post.category }}</a></div>
<div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
<span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
</div>
<div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 250 }}{% endif %}</div>

14
_includes/navbar.html
View File

@ -1,11 +1,13 @@
<div class="pre-nav container">
<div class="brand pull-left">
<img class="logo" src="/images/logo-black.png">
<div class="name-container">
<div class="name">Watch Out!</div>
<div class="desc">Official News<br>Body of IITR</div>
<a href="/">
<div class="brand pull-left">
<img class="logo" src="/images/logo-black.png">
<div class="name-container">
<div class="name">Watch Out!</div>
<div class="desc">Official News<br>Body of IITR</div>
</div>
</div>
</div>
</a>
<div class="social pull-right">
<a href="/about">About</a>
<img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">

66
_layouts/post.html
View File

@ -1,49 +1,63 @@
---
layout: layout
---
{% include header.html %}
<section class="post container">
<h1>
<a href="{{ page.url }}">{{ page.title }}</a>
</h1>
<section class="byline col-md-12">
{{ page.date | date: "%B %e, %Y" }}
</section>
<div class="col-md-8">
<section class="content{% if page.justify %} justify{% endif %}">
{{ content }}
</section>
<div class="header">
<h3 class="tag">
<a href="/category/{{ page.category }}/">{{ site.data.categories_name[page.category] }}</a>
</h3>
<h1 class="title">
<a href="{{ page.url }}">{{ page.title }}</a>
</h1>
<div class="date">
{{ page.date | date: "%B %e, %Y" }}
</div>
</div>
<div class="row body">
<div class="fb-page col-md-4" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
<section class="col-md-8 content{% if page.justify %} justify{% endif %}">
{{ content }}
<br/>
<div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<div class="fb-content">
<div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<br/>
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
</div>
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
</section>
<div class="col-md-4">
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
</div>
</div> <!-- body -->
</section>
<div id="related-articles-container" class="container-fluid">
<section id="related-articles" class="row">
<div id="more-articles-container" class="container">
<div class="head-wrapper">
<h1 class="container-title">More from {{ page.category | capitalize }}</h1>
<span class="view-all">view all</span>
</div>
<section id="more-articles" class="row">
{% for post in site.related_posts limit: 4 %}
{% for post in site.categories[page.category] limit: 5 %}
{% if post.url != page.url %}
{% if forloop.index < 5 or found %}
<div class="article col-sm-3">
<a href="{{ post.url }}">
<div class="center-fill-container img-container">
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill center-both {% 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 class="details">
<h3 class="title">{{ post.title | truncatewords: 7}}</h3>
<div class="date">{{ post.date | date: "%B %e, %Y" }}</div>
</div>
</a>
</div>
{% endfor %}
{% endif %}
{% else %}
{% assign found = true %}
{% endif %}
{% endfor %}
</section>
</div>

90
css/base.scss
View File

@ -360,7 +360,6 @@ nav {
}
}
#related-articles {
z-index: 10;
@ -595,21 +594,18 @@ blockquote {
// ============== POST ============== //
.post {
z-index: 10;
position: relative;
background: white;
padding: 10px 50px;
margin-bottom: 20px;
font-size: 1.1em;
font-size: 1.1em;
line-height: 1.5em;
color: #333332;
.content {
margin-top: 2em;
.header {
border-bottom: 4px solid #e7ce00;
font-weight: bold;
padding-bottom: 30px;
}
.fb-page {
top:2em;
.body {
padding-top: 4em;
}
p img {
@ -622,20 +618,80 @@ blockquote {
.justify {
text-align: justify;
}
.fb-content {
margin-top: 40px;
}
.fb-like {
margin-bottom: 30px;
}
}
.post-header {
box-shadow: 0 100px 125px -100px;
.header {
.tag {
text-transform: uppercase;
color: #e7ce00;
font-size: 16px;
}
.title {
font-size: 24px;
color: #333333;
}
.date {
color: #8b8b8b;
font-size: 12px;
}
}
// ============== /POST ============== //
// ========= RELATED-ARTICLES ======== //
#more-articles-container {
margin-top: 35px;
margin-bottom: 40px;
border-top: 1px solid #ededed;
padding-top: 15px;
#related-articles {
padding-top: 40px;
padding-bottom: 20px;
background: #f0f0f0;
.head-wrapper {
position: relative;
}
.view-all {
font-family: Merriweather;
font-style: italic;
color: #ababab;
font-size: 16px;
position: absolute;
right: 0;
top: 0;
}
}
#more-articles {
color: white;
.article {
height: 155px;
position: relative;
}
.details {
position: absolute;
width: 100%;
bottom: 0;
padding: 1.5em;
}
.title {
font-size: 16px;
}
.date {
position: static;
}
}
// ========= /RELATED-ARTICLES ======= //