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

Home page header is complete

Browse Source
This commit is contained in:
Asutosh Palai
2016-12-24 21:10:55 +05:30
parent 7161179222
commit 6e5186bda0
4 changed files with 190 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
_includes/header.html
View File

@ -12,41 +12,57 @@
fjs.parentNode.insertBefore(js, fjs); fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> }(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div> <div id="header" class="container {% if page.is_post %}post-header{% endif %}">
<script>(function(d, s, id) { <div class="row">
var js, fjs = d.getElementsByTagName(s)[0]; {% if post.image != nil %}
if (d.getElementById(id)) return; <div class="col-md-8 tinted cover-image center-fill-container img-container">
js = d.createElement(s); js.id = id; <img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476"; </div>
fjs.parentNode.insertBefore(js, fjs); {% endif %}
}(document, 'script', 'facebook-jssdk'));</script> <div class="col-md-4 cover-details">
<div class="cover-title-label">
<div id="header" class="container-fluid {% if page.is_post %}post-header{% endif %}"> Cover Story
{% if post.image != nil %} </div>
<div class="cover-image center-vertical"><img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""></div> <div class="cover-title">
{% endif %} <a href="{{ post.url }}" class="cover-link">
{% unless page.is_post == true %} <h1 class="title">{{ post.title }}</h1>
<div class="cover center-both text-center"> </a>
<a href="{{ post.url }}" class="cover-link"> <h1 class="title">{{ post.title }}</h1></a> </div>
<div class="red-strip"></div>
<div class="cover-excerpt">
{{ post.excerpt }}
</div>
</div>
</div>
</div> </div>
{% endunless %} </div>
<div class="left"> <div id="new-articles" class="container content">
{% if page.is_post and post.next %} <section>
<a class="center-both scroll-buttons" href="{{ post.next.url }}"> <div class="row">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> {% for post in site.related_posts limit: 5 %}
<span class="sr-only">Next</span>
</a> {% if forloop.index == 3 %}
{% endif %} </div>
</div> <div class="row">
{% endif %}
<div class="right">
{% if page.is_post and post.next %} <div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}">
<a class="center-both scroll-buttons" href="{{ post.previous.url }}"> <div class="center-fill-container img-container tinted">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <img src="/images/posts/{{post.image}}" alt="" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
<span class="sr-only">Previous</span> </div>
</a> <div class="details">
{% endif %} <div class="head">
</div> <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>
{% if forloop.index < 3 %}
<div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</section>
</div> </div>

187
css/base.scss
View File

@ -3,22 +3,21 @@
// ================ VARS ===============// // ================ VARS ===============//
// Bootstrap vars
$font-color: #333; $font-color: #333;
$container-lg: 1040px; $container-lg: 1040px;
$navbar-default-brand-color: #4e4e4e; $navbar-default-brand-color: #4e4e4e;
$navbar-default-bg: #fff; $navbar-default-bg: #fff;
$navbar-default-border: none; $navbar-default-border: none;
/*$navbar-default-link-color: white;*/
/*$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);*/
/*$navbar-default-link-hover-color: $navbar-default-link-color;*/
/*$dropdown-link-hover-color: $navbar-default-link-color;*/
// Other vars
$pre-nav-logo-height: 65px; $pre-nav-logo-height: 65px;
$home-header-bg-color: #333; $home-header-bg-color: #22221f;
$home-header-height: 340px;
$new-article-img-height: 150px; $new-article-img-height: 150px;
$new-article-img-width: 225px; $new-article-img-width: 225px;
$new-article-title-color: black; $new-article-title-color: black;
$new-article-tag-color: #e5cb52; $new-article-tag-color: #ffd700;
$featured-articles-bg-color: #f7f7f7; $featured-articles-bg-color: #f7f7f7;
$featured-articles-title-color: #373737; $featured-articles-title-color: #373737;
$article-cover-img-width: 355px; $article-cover-img-width: 355px;
@ -65,6 +64,22 @@ $carousel-height: 625px;
src: local('Merriweather'), local('Merriweather Regular'), url(/fonts/Merriweather-Regular.ttf) format('woff'); src: local('Merriweather'), local('Merriweather Regular'), url(/fonts/Merriweather-Regular.ttf) format('woff');
} }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v7/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body { body {
font-size: 13px; font-size: 13px;
color: $font-color; color: $font-color;
@ -81,6 +96,7 @@ body {
// ================ NAV ================// // ================ NAV ================//
.pre-nav { .pre-nav {
height: $pre-nav-logo-height * 1.6; height: $pre-nav-logo-height * 1.6;
border-bottom: 1px solid #f3f3f3;
.brand { .brand {
height: 100%; height: 100%;
@ -120,6 +136,7 @@ body {
padding: $pre-nav-logo-height * .623 0; padding: $pre-nav-logo-height * .623 0;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #ababab;
> * { > * {
margin-left: 1em; margin-left: 1em;
@ -131,6 +148,7 @@ body {
nav { nav {
width: 100%; width: 100%;
z-index: 200; z-index: 200;
border-radius: 0;
.navbar-brand { .navbar-brand {
display: none; display: none;
@ -154,8 +172,6 @@ nav {
width: initial; width: initial;
} }
} }
} }
} }
@ -188,24 +204,21 @@ nav {
#header { #header {
position: relative; position: relative;
height: 500px; height: $home-header-height;
margin-bottom: -($new-article-img-height / 4);
background: $home-header-bg-color; background: $home-header-bg-color;
padding: 0; margin-top: 25px;
border-radius: 8px 8px 0 0;
overflow: hidden; overflow: hidden;
color: white;
font-size: 12px;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
&.category-header { .cover-image {
height: 300px; height: $home-header-height;
box-shadow: 0 100px 125px -100px;
} }
&.about-header { .cover-details {
height: 200px; padding: 2em 1.5em;
}
.cover {
z-index: 10;
color: white;
} }
.cover-link { .cover-link {
@ -215,60 +228,100 @@ nav {
.cover-link:hover { .cover-link:hover {
text-decoration: none; text-decoration: none;
} }
.cover-title-label {
font-size: 14px;
font-weight: bold;
}
.title { .title {
font-size: 42px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #ffffff; margin-top: 0;
text-shadow: 1px 1px 10px #000000; margin-bottom: 20px;
-webkit-transition: text-shadow 0.5s ease;
-moz-transition: text-shadow 0.5s ease;
-o-transition: text-shadow 0.5s ease;
transition: text-shadow 0.5s ease;
} }
.title:hover { .title:hover {
text-shadow: 1px 1px 10px #777777; text-shadow: 1px 1px 10px #777777;
} }
}
.cover-image { .red-strip {
width: 100%; height: 0px;
position: absolute; width: 90px;
border-bottom: 8px solid red;
}
.img-responsive { .cover-excerpt {
width: 100%; margin-top: 20px;
}
}
.scroll-buttons {
color: white;
font-size: 32px;
}
.left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10%;
@include gradient-horizontal($start-color: rgba(0,0,0,.4), $end-color: rgba(0,0,0,.0001));
}
.right {
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: 10%;
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.4));
}
} }
// ============= /HOME-HEADER ============= // // ============= /HOME-HEADER ============= //
// ============= NEW-ARTICLES ============ // // ============= NEW-ARTICLES ============ //
#new-articles, #related-articles { #new-articles {
color: white;
overflow: hidden;
border-radius: 0px 0px 10px 10px;
margin-bottom: 60px;
.article {
position: relative;
height: 340px;
padding: 0 5px;
margin-top: 10px;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
.details {
position: absolute;
bottom: 0;
padding: 1.5em 1.5em .25em;
}
a:hover {
color: #ddd;
}
}
.details {
width: 100%;
font-size: 12px;
.title {
text-transform: capitalize;
font-size: 20px;
margin: 0;
}
.tag {
margin-bottom: 5px;
text-transform: uppercase;
color: $new-article-tag-color;
}
.head {
width: 100%;
position: relative;
}
.date {
position: absolute;
right: 0;
bottom: 0;
font-style: italic;
}
}
#related-articles {
z-index: 10; z-index: 10;
.article:hover { .article:hover {
@ -498,6 +551,18 @@ nav {
} }
} }
.tinted {
background: black;
img {
opacity: 0.6;
}
}
.img-container {
height: 100%;
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

26
index.html
View File

@ -4,32 +4,6 @@ title: "Watch Out!, IIT Roorkee"
--- ---
{% include header.html %} {% include header.html %}
<div class="container content">
<section id="new-articles" class="row">
{% for cat in site.data.homepage_categories.new_articles %}
{% for post in site.categories[cat] %}
{% if post.image != null %}
<div class="article col-sm-3">
<a href="{{ post.url }}">
<div class="cover-container-container">
<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>
<div class="details text-center ">
<p class="tag">{{ post.category }}</p>
<h3 class="title">{{ post.title }}</h3>
</div>
</a>
</div>
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
</section>
</div>
<div id="featured-articles-container" class=" container-fluid"> <div id="featured-articles-container" class=" container-fluid">
<div id="featured-articles" class=" container"> <div id="featured-articles" class=" container">
<div class="row"> <div class="row">

14
js/application.js
View File

@ -1,10 +1,20 @@
// Your JavaScript // Your JavaScript
$(function() { $(function() {
$('.img-center-fill').load(function(){ function gradeImage(){
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);
}) console.log(this);
}
$('.img-center-fill').each(function () {
if(this.complete) {
gradeImage.call(this);
}
else {
this.addEventListener('load', gradeImage);
}
});
/* /*
var switchPos = $('#new-articles').position().top + $('#new-articles').height(); var switchPos = $('#new-articles').position().top + $('#new-articles').height();