mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
Category page complete
This commit is contained in:
Asutosh Palai
@ -1,12 +1,25 @@
|
||||
<div id="header" class="container-fluid category-header">
|
||||
<div class="cover center-both text-center">
|
||||
<h1 class="title">{{ page.category | capitalize }}</h1>
|
||||
</div>
|
||||
{% assign post = site.categories[page.category].first %}
|
||||
<div id="header" class="container category-header">
|
||||
<div class="row">
|
||||
<div class="col-md-8 tinted cover-image center-fill-container">
|
||||
{% if post.image != nil %}
|
||||
<div class="img-container">
|
||||
<img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<div class="col-md-4 cover-details">
|
||||
<div class="cover-title">
|
||||
<a href="{{ post.url }}" class="cover-link">
|
||||
<h1 class="title">{{ post.title }}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="date">{{ post.date | date: "%-d %B %Y" }}</div>
|
||||
<div class="cover-excerpt">
|
||||
{{ post.excerpt | truncate: 350 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,15 +3,6 @@
|
||||
{% assign post = page %}
|
||||
{% endif %}
|
||||
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<div id="header" class="container {% if page.is_post %}post-header{% endif %}">
|
||||
<div class="row header-row outer-row">
|
||||
{% if post.image != nil %}
|
||||
|
||||
17
_includes/horizontal_post.html
Normal file
17
_includes/horizontal_post.html
Normal file
@ -0,0 +1,17 @@
|
||||
{% assign post = include.post %}
|
||||
<div class="row article article-horiozntal">
|
||||
<div class="col-md-4 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-container col-md-8">
|
||||
<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>
|
||||
<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>
|
||||
</div> <!--details-->
|
||||
</div> <!--details-container-->
|
||||
</div> <!--article-->
|
||||
|
||||
@ -5,25 +5,15 @@ layout: layout
|
||||
{% include cat_header.html %}
|
||||
|
||||
<div class="category-posts container">
|
||||
{% for post in site.categories[page.category] %}
|
||||
<div class="category-post row">
|
||||
{% if post.image != nil %}
|
||||
<div class="col-sm-3 center-fill-container img-container">
|
||||
<a href="{{ post.url }}">
|
||||
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-9 details">
|
||||
<h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
|
||||
<p class="tag">{{ post.excerpt }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-sm-12 details">
|
||||
<h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
|
||||
<p class="tag">{{ post.excerpt }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{% for post in site.categories[page.category] offset: 1 %}
|
||||
{% include horizontal_post.html post=post %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-md-4">
|
||||
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" 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>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,6 +5,15 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
{% include navbar.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
@ -220,6 +220,10 @@ nav {
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
height: $home-header-height;
|
||||
}
|
||||
@ -253,6 +257,25 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
#header.category-header {
|
||||
font-size: 16px;
|
||||
|
||||
.cover-image {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #e7ce00;
|
||||
}
|
||||
}
|
||||
|
||||
.red-strip {
|
||||
height: 0px;
|
||||
width: 90px;
|
||||
@ -394,15 +417,16 @@ nav {
|
||||
// ========== FEATURED-ARTICLE =========== //
|
||||
#featured-articles-container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-top: 1px solid #ededed;
|
||||
border-bottom: 1px solid #ededed;
|
||||
|
||||
.article {
|
||||
height: 180px;
|
||||
padding: 1.5em 0 2em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-horiozntal {
|
||||
height: 10em;
|
||||
margin-bottom: 3.5em;
|
||||
margin-left: 0;
|
||||
|
||||
.title {
|
||||
font-size: 19px;
|
||||
@ -426,7 +450,6 @@ nav {
|
||||
// ================ VIDEO ================ //
|
||||
#yt-videos-container {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
@ -623,6 +646,7 @@ footer {
|
||||
position: relative;
|
||||
background: #f3f3f3;
|
||||
color: #b8b8b8;
|
||||
margin-top: 20px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid #c5c5c5;
|
||||
|
||||
@ -640,23 +664,25 @@ footer {
|
||||
// ============== /FOOTER ============== //
|
||||
|
||||
// ============== CATEGORY-POSTS ===========//
|
||||
.category-posts {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
padding-top: 20px;
|
||||
min-height: 100px;
|
||||
|
||||
.category-post {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 10px 30px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
.category-posts {
|
||||
margin-top: 20px;
|
||||
|
||||
.tag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
height: $article-cover-img-height;
|
||||
.date {
|
||||
display: block;
|
||||
position: static;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// ============= /CATEGORY-POSTS ===========//
|
||||
|
||||
// ============== TEAM ============== //
|
||||
|
||||
19
index.html
19
index.html
@ -11,26 +11,15 @@ title: "Watch Out!, IIT Roorkee"
|
||||
{% for cat in site.data.homepage_categories.featured_articles %}
|
||||
{% for post in site.categories[cat] %}
|
||||
{% if post.image != null %}
|
||||
<div class="row article">
|
||||
<div class="col-md-4 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-container col-md-8">
|
||||
<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>
|
||||
<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>
|
||||
</div> <!--details-->
|
||||
</div> <!--details-container-->
|
||||
</div> <!--article-->
|
||||
{% include horizontal_post.html post=post %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" 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>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user