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

Working till listing of post

Browse Source
This commit is contained in:
Asutosh Palai
2016-06-18 22:58:48 +05:30
parent 412ad95e56
commit a42ed793c1
4 changed files with 157 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/home_header.html
View File

@ -1,7 +1,7 @@
{% assign cover_post = site.categories.cover.first %} {% assign cover_post = site.posts.first %}
<div id="home-header" class="container-fluid"> <div id="home-header" class="container-fluid">
<div class="cover-image"><img class="img-responsive" src="/images/posts/{{ cover_post.image }}" alt=""></div> <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ cover_post.image }}" alt=""></div>
<div class="cover text-center"> <div class="cover center-both text-center">
<h1 class="title">{{ cover_post.title }}</h1> <h1 class="title">{{ cover_post.title }}</h1>
<!--<p>{{ cover_post.excerpt | markdownify }}</p>--> <!--<p>{{ cover_post.excerpt | markdownify }}</p>-->
</div> </div>

169
css/base.scss
View File

@ -7,6 +7,14 @@ $navbar-default-link-color: white;
$navbar-default-link-active-color: darken($navbar-default-link-color, 25%); $navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
$navbar-default-link-hover-color: darken($navbar-default-link-color, 35%); $navbar-default-link-hover-color: darken($navbar-default-link-color, 35%);
$home-header-bg-color: #333; $home-header-bg-color: #333;
$new-article-img-height: 150px;
$new-article-img-width: 225px;
$new-article-title-color: black;
$new-article-tag-color: #e5cb52;
$featured-articles-bg-color: #f7f7f7;
$featured-articles-title-color: #373737;
$article-cover-img-width: 355px;
$article-cover-img-height: 190px;
$carousel-bg-color: #333; $carousel-bg-color: #333;
$carousel-height: 500px; $carousel-height: 500px;
@ -40,27 +48,7 @@ $carousel-height: 500px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
} }
@mixin center-vertical() {
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
bottom: 50%;
}
@mixin center-horizontal() {
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
@mixin center-both() {
-ms-transform: translate(-50%, 50%);
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
left: 50%;
bottom: 50%;
}
// ============== /MIXINS ============== // // ============== /MIXINS ============== //
@font-face { @font-face {
@ -87,12 +75,12 @@ $carousel-height: 500px;
body { body {
font-size: 13px; font-size: 13px;
color: #081522; color: #081522;
background: #ddd url('/images/bg.png'); background: #fff;
@include box-sizing(); @include box-sizing();
} }
*{ *{
font-family: Open Sans, sans-serif; font-family: Merriweather, Open Sans, sans-serif;
} }
@ -155,18 +143,15 @@ body {
#home-header { #home-header {
position: relative; position: relative;
height: 500px; height: 500px;
margin-bottom: -60px; margin-bottom: -($new-article-img-height / 4);
background: $home-header-bg-color; background: $home-header-bg-color;
padding: 0; padding: 0;
z-index: -10; z-index: -10;
overflow: hidden; overflow: hidden;
.cover { .cover {
position: absolute;
z-index: 10; z-index: 10;
@include center-vertical(); color: white;
@include center-horizontal();
color: white;
} }
.title { .title {
@ -179,7 +164,6 @@ body {
.cover-image { .cover-image {
width: 100%; width: 100%;
position: absolute; position: absolute;
@include center-vertical();
.img-responsive { .img-responsive {
width: 100%; width: 100%;
@ -210,15 +194,86 @@ body {
// ============= NEW-ARTICLES ============ // // ============= NEW-ARTICLES ============ //
#new-articles { #new-articles {
.img-container { .img-container {
position: absolute; width: $new-article-img-width;
margin: 0 auto; height: $new-article-img-height;
width: 250px; border-radius: 1%;
height: 175px; }
overflow: hidden;
.details {
margin: 10 auto;
font-weight: bold;
.title {
color: $new-article-title-color;
text-transform: capitalize;
font-size: 20px;
}
.tag {
text-transform: uppercase;
font-family: AvenirNext;
font-size: 14px;
color: $new-article-title-color;
}
} }
} }
// ============ /NEW-ARTICLES ============ // // ============ /NEW-ARTICLES ============ //
// ========== FEATURED-ARTICLE =========== //
#featured-articles-container {
background: $featured-articles-bg-color;
}
#featured-articles-title {
font-size: 30px;
font-weight: bold;
color: $featured-articles-title-color;
margin-top: 22px;
margin-bottom: 22px;
}
#featured-articles {
.article-cover-container {
width: $article-cover-img-width;
height: $article-cover-img-height;
box-shadow: 0px 35px 40px -20px;
}
.article-container {
margin-bottom: 10px + 0.1 * $article-cover-img-height;
.details {
position: relative;
z-index: 10;
margin: 0 auto;
top: -0.1 * $article-cover-img-height;
background: $featured-articles-bg-color;
width: 0.9 * $article-cover-img-width; ;
.tag {
position: absolute;
top:0;
left: 50%;
transform: translate(-50%,-100%);
text-transform: capitalize;
font-weight: bold;
font-size: 14px;
color: #ffffff;
}
.title {
}
&:before {
content: " ";
display: table;
}
}
}
}
// ========= /FEATURED-ARTICLES ========== //
// ============= CAROUSEL ============= // // ============= CAROUSEL ============= //
/* Carousel base class */ /* Carousel base class */
@ -249,10 +304,38 @@ body {
// ============ /CAROUSEL ============= // // ============ /CAROUSEL ============= //
// ============== COMPONENTS ============== // // ============== COMPONENTS ============== //
.center-vertical {
position: absolute;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
bottom: 50%;
}
.center-horizontal {
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
.center-both {
position: absolute;
-ms-transform: translate(-50%, 50%);
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
left: 50%;
bottom: 50%;
}
.center-fill-container {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.img-center-fill { .img-center-fill {
position: absolute; position: absolute;
@include center-both();
width: 100%; width: 100%;
&.wide { &.wide {
@ -370,23 +453,7 @@ blockquote {
} }
.content { .article-old {
.pure-u-1-3 {
@include box-sizing();
}
}
.article-container {
/*width: 280px;*/
width: 30%;
margin: 0 1.5%;
margin-bottom: 50px;
float: left;
@include box-sizing();
}
.article {
border: 1px solid #ccc; border: 1px solid #ccc;
background: white; background: white;
padding-bottom: 10px; padding-bottom: 10px;

81
index.html
View File

@ -5,55 +5,57 @@ title: "Home"
{% include home_header.html %} {% include home_header.html %}
<div class="container"> <div class="container content">
<section id="new-articles" class="row"> <section id="new-articles" class="row">
{% for post in site.posts limit: 4 %} {% for post in site.posts limit: 4 offset: 1 %}
<div class="col-sm-3"> <div class="new-article col-sm-3">
<a href="{{ post.url }}"> <a href="{{ post.url }}">
<div class="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 %}">
</div> </div>
<div class="details"> <div class="details text-center ">
<h2>{{ post.title }}</h2> <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
{{ post.excerpt | markdownify }} <p class="tag">{{ post.tag}}</p>
</div> </div>
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</section> </section>
</div>
<div class="content masonry"> <div id="featured-articles-container" class=" container-fluid">
{% for post in paginator.posts %} <div id="featured-articles" class=" container">
{% if post.categories contains 'wona' %} <div class="row">
{% if post.categories contains 'cover' %} <h1 class="col-sm-12" id="featured-articles-title">Featured Articles</h1>
{% else %} {% for cat in site.categories %}
<div class="article-container"> {{ cat | inspect }}
<div class="article {{post.tag}}"> {% assign post = cat.second.first %}
{% if post.categories contains 'wona' and post.image != null %}
<div class="article-container col-sm-4">
<div class="article {{post.tag}}">
{% if post.tag %} <a href="{{ post.url }}">
<img src="/images/tags/{{post.tag}}.png" class="tag"> {% if post.image %}
{% endif %} <div class="center-fill-container article-cover-container">
<img src="/images/posts/{{ post.image }}" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
<a href="{{ post.url }}"> </div>
{% if post.image %} {% else %}
<div class="article-cover-container"> <br><br>
<img src="/images/posts/{{ post.image }}" class="article-cover"> {% endif %}
<div class="details text-center">
<span class="tag">{{ post.tag }}</span>
<h3 class="title">{{ post.title | truncatewords: 4}}</h3>
<p class="excerpt">{{ post.excerpt | markdownify | truncate: 75 }}</p>
</div> </div>
{% else %} </a>
<br><br> </div>
{% endif %}
<div class="details">
<h3>{{ post.title }}</h3>
{{ post.excerpt | markdownify }}
</div>
</a>
</div> </div>
</div>
{% endif %} {% endif %}
{% endif %} {% endfor %}
{% endfor %} </div>
</div> </div>
</div>
<div class="pagination"> <div class="pagination">
{% if paginator.previous_page == 1 %} {% if paginator.previous_page == 1 %}
@ -70,16 +72,3 @@ title: "Home"
<span class="next "><img src="/images/right.png" class="disabled"></span> <span class="next "><img src="/images/right.png" class="disabled"></span>
{% endif %} {% endif %}
</div> </div>
</div>
<script>
window.onload = function(){
width = document.getElementsByClassName('content')[0].offsetWidth;
width = Math.floor(width/3) - 1;
container = document.querySelector('.content');
msnry = new Masonry( container, {
columnWidth: width,
itemSelector: '.article-container'
});
}
</script>

2
js/application.js
View File

@ -1,6 +1,6 @@
// Your JavaScript // Your JavaScript
$(function() { $(function() {
$('.container').find('img').each(function(){ $('.img-center-fill').each(function(){
var parent = $(this).parent(); var parent = $(this).parent();
var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall'; var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
$(this).addClass(imgClass); $(this).addClass(imgClass);