varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-01-01 01:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completed homepage

Browse Source
This commit is contained in:
Asutosh Palai
2016-12-25 10:11:18 +05:30
parent 6e5186bda0
commit 803cf00516
6 changed files with 168 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_data/homepage_categories.yaml
View File

@ -1,10 +1,8 @@
--- ---
featured_articles: featured_articles:
- bigstory
- editorial - editorial
- almostfamous - almostfamous
- phekingnews - phekingnews
- verbatim
- tech - tech
new_articles: new_articles:

29
_includes/footer.html
View File

@ -1,15 +1,22 @@
<footer class="container-fluid"> <footer class="container-fluid">
<div class="center-both"> <div class="pre-footer container">
<div class="container"> <div class="brand pull-left">
<div class="row"> <img class="logo" src="/images/logo-black.png">
<p class="col-sm-4 pull-left">&copy; Copyright 2016 &#8212; Watch Out! News Agency</p> <div class="name-container">
<div class="col-sm-4 pull-right"> <div class="name">Watch Out!</div>
<div class="row"> <div class="desc">Official News<br>Body of IITR</div>
<a class="col-sm-4" href="/about/">About Us</a>
<a class="col-sm-4" href="http://fb.com/WatchOutNewsAgency">Facebook</a>
</div>
</div> </div>
</div>
</div> </div>
</div> <div class="social pull-right">
<a href="/team">Team</a>
<a href="/about">About</a>
<img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">
<img src="/images/youtube-play.svg" href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A">
</div>
</div>
<div class="container copyright">
<p>&copy; Copyright 2016 &#8212; Watch Out! News Agency</p>
</div>
</footer> </footer>

1
_includes/head.html
View File

@ -38,7 +38,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="alternate" type="application/rss+xml" href="/atom.xml" /> <link rel="alternate" type="application/rss+xml" href="/atom.xml" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="/css/base.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>

10
_includes/header.html
View File

@ -13,10 +13,12 @@
}(document, 'script', 'facebook-jssdk'));</script> }(document, 'script', 'facebook-jssdk'));</script>
<div id="header" class="container {% if page.is_post %}post-header{% endif %}"> <div id="header" class="container {% if page.is_post %}post-header{% endif %}">
<div class="row"> <div class="row header-row outer-row">
{% if post.image != nil %} {% if post.image != nil %}
<div class="col-md-8 tinted cover-image center-fill-container img-container"> <div class="col-md-8 tinted cover-image center-fill-container">
<div class="img-container">
<img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt=""> <img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
</div>
</div> </div>
{% endif %} {% endif %}
<div class="col-md-4 cover-details"> <div class="col-md-4 cover-details">
@ -39,12 +41,12 @@
<div id="new-articles" class="container content"> <div id="new-articles" class="container content">
<section> <section>
<div class="row"> <div class="row outer-row">
{% for post in site.related_posts limit: 5 %} {% for post in site.related_posts limit: 5 %}
{% if forloop.index == 3 %} {% if forloop.index == 3 %}
</div> </div>
<div class="row"> <div class="row outer-row">
{% endif %} {% endif %}
<div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}"> <div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}">

222
css/base.scss
View File

@ -19,7 +19,7 @@ $new-article-img-width: 225px;
$new-article-title-color: black; $new-article-title-color: black;
$new-article-tag-color: #ffd700; $new-article-tag-color: #ffd700;
$featured-articles-bg-color: #f7f7f7; $featured-articles-bg-color: #f7f7f7;
$featured-articles-title-color: #373737; $featured-articles-title-color: #4e4e4e;
$article-cover-img-width: 355px; $article-cover-img-width: 355px;
$article-cover-img-height: 190px; $article-cover-img-height: 190px;
$carousel-bg-color: #333; $carousel-bg-color: #333;
@ -94,7 +94,7 @@ body {
// ================ NAV ================// // ================ NAV ================//
.pre-nav { .pre-nav, .pre-footer {
height: $pre-nav-logo-height * 1.6; height: $pre-nav-logo-height * 1.6;
border-bottom: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3;
@ -156,10 +156,13 @@ nav {
.nav { .nav {
width: 100%; width: 100%;
position: relative;
left: -15px;
} }
&.affix { &.affix {
top: 0; top: 0;
border-bottom: 2px solid #e5e5e5;
.navbar-brand { .navbar-brand {
display: block; display: block;
@ -203,15 +206,19 @@ nav {
// ============= HOME-HEADER ============= // // ============= HOME-HEADER ============= //
#header { #header {
position: relative;
height: $home-header-height;
background: $home-header-bg-color;
margin-top: 25px; margin-top: 25px;
border-radius: 8px 8px 0 0;
overflow: hidden;
color: white;
font-size: 12px; font-size: 12px;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
.header-row {
position: relative;
height: $home-header-height;
background: $home-header-bg-color;
border-radius: 8px 8px 0 0;
overflow: hidden;
color: white;
box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
}
.cover-image { .cover-image {
height: $home-header-height; height: $home-header-height;
@ -260,8 +267,6 @@ nav {
// ============= NEW-ARTICLES ============ // // ============= NEW-ARTICLES ============ //
#new-articles { #new-articles {
color: white; color: white;
overflow: hidden;
border-radius: 0px 0px 10px 10px;
margin-bottom: 60px; margin-bottom: 60px;
.article { .article {
@ -289,6 +294,18 @@ nav {
a:hover { a:hover {
color: #ddd; color: #ddd;
} }
.row:last-of-type {
.article:first-of-type {
overflow: hidden;
border-radius: 0px 0px 0px 10px;
}
.article:last-of-type {
overflow: hidden;
border-radius: 0px 0px 10px 0px;
}
}
} }
.details { .details {
@ -376,135 +393,67 @@ nav {
// ========== FEATURED-ARTICLE =========== // // ========== FEATURED-ARTICLE =========== //
#featured-articles-container { #featured-articles-container {
background: $featured-articles-bg-color; padding-top: 20px;
padding-top: 3em; padding-bottom: 30px;
} border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
#featured-articles-title { .article {
font-size: 30px; height: 180px;
font-weight: bold; padding: 1.5em 0 2em;
color: $featured-articles-title-color; margin-left: 0;
margin-top: 22px;
margin-bottom: 22px;
}
#featured-articles {
color: lighten($font-color, 10%);
.article-cover-container {
width: $article-cover-img-width;
height: $article-cover-img-height;
box-shadow: 0px 35px 40px -20px rgba(0,0,0, 0.4);
} }
a { .title {
&:hover{ font-size: 19px;
color: darken($font-color, 10%);
text-decoration: none;
@include transition(all, 0.2s, ease-in);
.details {
box-shadow: -3px -3px 15px 0 rgba(0,0,0,0.25);
}
}
} }
.article-container { .tag {
margin-bottom: 10px + 0.1 * $article-cover-img-height; font-size: 15px;
}
.details { .excerpt {
position: relative; font-size: 14px;
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; ;
height: 120px;
font-size: 0.95em;
padding: 0 1em 0.5em;
.tag { .img-container {
position: absolute; padding-left: 0;
top:0;
left: 50%;
transform: translate(-50%,-75%);
text-transform: uppercase;
font-weight: bold;
font-size: 1.1em;
color: #ffffff;
background-color: rgba(146, 204, 102, 0.85);
padding: 0.5em 1em;
opacity: 0.9;
}
.title {
font-size: 1.85em;
font-family: 'Montserrat', sans-serif;
}
&:before {
content: " ";
display: table;
}
}
} }
} }
// ========= /FEATURED-ARTICLES ========== // // ========= /FEATURED-ARTICLES ========== //
// ============= CAROUSEL ============= //
/* Carousel base class */ // ================ VIDEO ================ //
.carousel { #yt-videos-container {
height: $carousel-height; padding-top: 20px;
margin-bottom: 10px;
} }
.carousel-caption { .video-container {
z-index: 10; height: 400px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
h1 {
font-weight: bold;
line-height: 0.98;
text-align: center;
color: #ffffff;
}
} }
/* Declare heights because of positioning of img element */ .video-caption {
.carousel .item { text-align: center;
height: $carousel-height;; .caption {
background-color: $carousel-bg-color; margin-top: 0;
} font-size: 28px;
.carousel-inner{
.cover-image {
width: 100%;
position: absolute;
.img-responsive {
width: 100%;
}
img {
-webkit-filter: blur(15px);
filter: blur(15px);
}
}
.video-container {
width: 70%;
padding: 2%;
}
> .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
} }
} }
// ============ /CAROUSEL ============= //
.video-list {
list-style: none;
}
.list-video {
height: 100px;
margin-bottom: 15px;
.caption {
height: 100%;
}
}
// =============== /VIDEO ================ //
// ============== COMPONENTS ============== // // ============== COMPONENTS ============== //
.center-vertical { .center-vertical {
@ -561,6 +510,19 @@ nav {
.img-container { .img-container {
height: 100%; height: 100%;
overflow: hidden;
}
.container-title {
font-size: 24px;
font-weight: bold;
color: $featured-articles-title-color;
margin-top: 22px;
margin-bottom: 22px;
}
.outer-row {
margin: 0;
} }
a { a {
@ -659,16 +621,22 @@ blockquote {
footer { footer {
position: relative; position: relative;
background: #1c1c1c; background: #f3f3f3;
height: 65px; color: #b8b8b8;
font-weight: normal; padding-top: 22px;
color: #ffffff; border-top: 1px solid #c5c5c5;
a:hover { a:hover {
color: #ddd; color: #ddd;
} }
} }
.copyright {
border-top: 1px solid #d9d9d9;
padding-top: 10px;
padding-bottom: 20px;
}
// ============== /FOOTER ============== // // ============== /FOOTER ============== //
// ============== CATEGORY-POSTS ===========// // ============== CATEGORY-POSTS ===========//

116
index.html
View File

@ -4,79 +4,61 @@ title: "Watch Out!, IIT Roorkee"
--- ---
{% include header.html %} {% include header.html %}
<div id="featured-articles-container" class=" container-fluid"> <div id="featured-articles-container" class="container">
<div id="featured-articles" class=" container"> <h1 class="container-title">Featured Articles</h1>
<div class="row"> <div class="row">
<div id="featured-articles" class="col-md-8">
{% for cat in site.data.homepage_categories.featured_articles %} {% for cat in site.data.homepage_categories.featured_articles %}
{% for post in site.categories[cat] %} {% for post in site.categories[cat] %}
{% if post.image != null %} {% if post.image != null %}
<div class="article-container col-sm-4"> <div class="row article">
<div class="article {{post.category}}"> <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 %}">
<a href="{{ post.url }}"> </div>
<div class="center-fill-container article-cover-container"> <div class="details-container col-md-8">
<img src="/images/posts/{{ post.image }}" class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}"> <div class="details">
</div> <div class="head">
<div class="details text-center"> <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
<div class="tag">{{ post.category }}</div> <div class="tag"><a href="/category/{{ post.category }}/">{{ post.category }}</a></div>
<h3 class="title">{{ post.title }}</h3> <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
<p class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 75 }}{% endif %}</p>
</div>
</a>
</div>
</div> </div>
{% break %} <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 250 }}{% endif %}</div>
{% endif %} </div> <!--details-->
{% endfor %} </div> <!--details-container-->
</div> <!--article-->
{% break %}
{% endif %}
{% endfor %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>
<!-- Carousel <div id="yt-videos-container" class="container">
================================================== --> <h1 class="container-title">Videos</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="row">
<!-- Indicators --> <div class="col-md-8">
<ol class="carousel-indicators"> {% assign video = site.data.youtube.first %}
{% for video in site.data.youtube %} <div class="video-container">
<li data-target="#myCarousel" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.first %}active{% endif %}"></li> <div class="embed-responsive embed-responsive-16by9">
{% endfor %} <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
<!--
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
-->
</ol>
<div class="carousel-inner" role="listbox">
{% for video in site.data.youtube %}
<div class="item {% if forloop.first %}active{% endif %}">
<div class="cover-image center-vertical"><img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id }}/hqdefault.jpg" alt=""></div>
<div class="container">
<div class="video-container center-both">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
</div>
</div>
<div class="carousel-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
<h1>{{ video.title }}</h1>
</div>
</div>
</div> </div>
{% endfor %}
</div> </div>
<a class="left carousel-control" href="#myCarousel" role="button" <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
data-slide="prev"> <h2 class="caption">{{ video.title }}</h2>
<span class="glyphicon glyphicon-chevron-left" </div>
aria-hidden="true"></span> </div> <!-- col-md-8 -->
<span class="sr-only">Previous</span> <ul class="col-md-4 video-list">
</a> {% for video in site.data.youtube offset: 1 limit: 4 %}
<a class="right carousel-control" <li class="row list-video">
href="#myCarousel" role="button" <a href="https://www.youtube.com/watch?v={{ video.id }}">
data-slide="next"> <div class="col-md-6 img-container">
<span class="glyphicon glyphicon-chevron-right" <img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id }}/mqdefault.jpg">
aria-hidden="true"></span> </div>
<span <div class="col-md-6 caption"><span class="center-vertical">{{ video.title }}</span></div>
class="sr-only">Next</span> </a>
</a> </li>
<script type="text/javascript" src="https://www.youtube.com/iframe_api" async></script> {% endfor %}
</div><!-- /.carousel --> </ul>
</div> <!-- row -->
</div>