mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
Home page header is complete
This commit is contained in:
Asutosh Palai
@ -12,41 +12,57 @@
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<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-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>
|
||||
{% endif %}
|
||||
{% unless page.is_post == true %}
|
||||
<div class="cover center-both text-center">
|
||||
<a href="{{ post.url }}" class="cover-link"> <h1 class="title">{{ post.title }}</h1></a>
|
||||
<div id="header" class="container {% if page.is_post %}post-header{% endif %}">
|
||||
<div class="row">
|
||||
{% if post.image != nil %}
|
||||
<div class="col-md-8 tinted cover-image center-fill-container img-container">
|
||||
<img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-md-4 cover-details">
|
||||
<div class="cover-title-label">
|
||||
Cover Story
|
||||
</div>
|
||||
<div class="cover-title">
|
||||
<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>
|
||||
{% endunless %}
|
||||
|
||||
<div class="left">
|
||||
{% if page.is_post and post.next %}
|
||||
<a class="center-both scroll-buttons" href="{{ post.next.url }}">
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
{% if page.is_post and post.next %}
|
||||
<a class="center-both scroll-buttons" href="{{ post.previous.url }}">
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="new-articles" class="container content">
|
||||
<section>
|
||||
<div class="row">
|
||||
{% for post in site.related_posts limit: 5 %}
|
||||
|
||||
{% if forloop.index == 3 %}
|
||||
</div>
|
||||
<div class="row">
|
||||
{% endif %}
|
||||
|
||||
<div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}">
|
||||
<div class="center-fill-container img-container tinted">
|
||||
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
|
||||
</div>
|
||||
<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>
|
||||
{% if forloop.index < 3 %}
|
||||
<div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
187
css/base.scss
187
css/base.scss
@ -3,22 +3,21 @@
|
||||
|
||||
// ================ VARS ===============//
|
||||
|
||||
// Bootstrap vars
|
||||
$font-color: #333;
|
||||
$container-lg: 1040px;
|
||||
$navbar-default-brand-color: #4e4e4e;
|
||||
$navbar-default-bg: #fff;
|
||||
$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;
|
||||
$home-header-bg-color: #333;
|
||||
$home-header-bg-color: #22221f;
|
||||
$home-header-height: 340px;
|
||||
$new-article-img-height: 150px;
|
||||
$new-article-img-width: 225px;
|
||||
$new-article-title-color: black;
|
||||
$new-article-tag-color: #e5cb52;
|
||||
$new-article-tag-color: #ffd700;
|
||||
$featured-articles-bg-color: #f7f7f7;
|
||||
$featured-articles-title-color: #373737;
|
||||
$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');
|
||||
}
|
||||
|
||||
@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 {
|
||||
font-size: 13px;
|
||||
color: $font-color;
|
||||
@ -81,6 +96,7 @@ body {
|
||||
// ================ NAV ================//
|
||||
.pre-nav {
|
||||
height: $pre-nav-logo-height * 1.6;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
.brand {
|
||||
height: 100%;
|
||||
@ -120,6 +136,7 @@ body {
|
||||
padding: $pre-nav-logo-height * .623 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #ababab;
|
||||
|
||||
> * {
|
||||
margin-left: 1em;
|
||||
@ -131,6 +148,7 @@ body {
|
||||
nav {
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
display: none;
|
||||
@ -154,8 +172,6 @@ nav {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,24 +204,21 @@ nav {
|
||||
|
||||
#header {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
margin-bottom: -($new-article-img-height / 4);
|
||||
height: $home-header-height;
|
||||
background: $home-header-bg-color;
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
|
||||
|
||||
&.category-header {
|
||||
height: 300px;
|
||||
box-shadow: 0 100px 125px -100px;
|
||||
.cover-image {
|
||||
height: $home-header-height;
|
||||
}
|
||||
|
||||
&.about-header {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
z-index: 10;
|
||||
color: white;
|
||||
.cover-details {
|
||||
padding: 2em 1.5em;
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
@ -215,60 +228,100 @@ nav {
|
||||
.cover-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cover-title-label {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 42px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1px 10px #000000;
|
||||
-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;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
text-shadow: 1px 1px 10px #777777;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
.red-strip {
|
||||
height: 0px;
|
||||
width: 90px;
|
||||
border-bottom: 8px solid red;
|
||||
}
|
||||
|
||||
.img-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
.cover-excerpt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
// ============= /HOME-HEADER ============= //
|
||||
|
||||
// ============= 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;
|
||||
|
||||
.article:hover {
|
||||
@ -498,6 +551,18 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.tinted {
|
||||
background: black;
|
||||
|
||||
img {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.img-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
26
index.html
26
index.html
@ -4,32 +4,6 @@ title: "Watch Out!, IIT Roorkee"
|
||||
---
|
||||
{% 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" class=" container">
|
||||
<div class="row">
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
// Your JavaScript
|
||||
$(function() {
|
||||
$('.img-center-fill').load(function(){
|
||||
function gradeImage(){
|
||||
var parent = $(this).parent();
|
||||
var imgClass = (this.width/this.height > parent.width()/parent.height()) ? 'wide' : 'tall';
|
||||
$(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();
|
||||
|
||||
Reference in New Issue
Block a user