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:
- bigstory
- editorial
- almostfamous
- phekingnews
- verbatim
- tech
new_articles:

29
_includes/footer.html
View File

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

1
_includes/head.html
View File

@ -38,7 +38,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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" />
<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>
<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 %}
<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="">
</div>
</div>
{% endif %}
<div class="col-md-4 cover-details">
@ -39,12 +41,12 @@
<div id="new-articles" class="container content">
<section>
<div class="row">
<div class="row outer-row">
{% for post in site.related_posts limit: 5 %}
{% if forloop.index == 3 %}
</div>
<div class="row">
<div class="row outer-row">
{% 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-tag-color: #ffd700;
$featured-articles-bg-color: #f7f7f7;
$featured-articles-title-color: #373737;
$featured-articles-title-color: #4e4e4e;
$article-cover-img-width: 355px;
$article-cover-img-height: 190px;
$carousel-bg-color: #333;
@ -94,7 +94,7 @@ body {
// ================ NAV ================//
.pre-nav {
.pre-nav, .pre-footer {
height: $pre-nav-logo-height * 1.6;
border-bottom: 1px solid #f3f3f3;
@ -156,10 +156,13 @@ nav {
.nav {
width: 100%;
position: relative;
left: -15px;
}
&.affix {
top: 0;
border-bottom: 2px solid #e5e5e5;
.navbar-brand {
display: block;
@ -203,15 +206,19 @@ nav {
// ============= HOME-HEADER ============= //
#header {
position: relative;
height: $home-header-height;
background: $home-header-bg-color;
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);
.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 {
height: $home-header-height;
@ -260,8 +267,6 @@ nav {
// ============= NEW-ARTICLES ============ //
#new-articles {
color: white;
overflow: hidden;
border-radius: 0px 0px 10px 10px;
margin-bottom: 60px;
.article {
@ -289,6 +294,18 @@ nav {
a:hover {
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 {
@ -376,135 +393,67 @@ nav {
// ========== FEATURED-ARTICLE =========== //
#featured-articles-container {
background: $featured-articles-bg-color;
padding-top: 3em;
}
padding-top: 20px;
padding-bottom: 30px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
#featured-articles-title {
font-size: 30px;
font-weight: bold;
color: $featured-articles-title-color;
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);
.article {
height: 180px;
padding: 1.5em 0 2em;
margin-left: 0;
}
a {
&:hover{
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);
}
}
.title {
font-size: 19px;
}
.article-container {
margin-bottom: 10px + 0.1 * $article-cover-img-height;
.tag {
font-size: 15px;
}
.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; ;
height: 120px;
font-size: 0.95em;
padding: 0 1em 0.5em;
.excerpt {
font-size: 14px;
}
.tag {
position: absolute;
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;
}
}
.img-container {
padding-left: 0;
}
}
// ========= /FEATURED-ARTICLES ========== //
// ============= CAROUSEL ============= //
/* Carousel base class */
.carousel {
height: $carousel-height;
// ================ VIDEO ================ //
#yt-videos-container {
padding-top: 20px;
margin-bottom: 10px;
}
.carousel-caption {
z-index: 10;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
h1 {
font-weight: bold;
line-height: 0.98;
text-align: center;
color: #ffffff;
}
.video-container {
height: 400px;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: $carousel-height;;
background-color: $carousel-bg-color;
}
.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;
.video-caption {
text-align: center;
.caption {
margin-top: 0;
font-size: 28px;
}
}
// ============ /CAROUSEL ============= //
.video-list {
list-style: none;
}
.list-video {
height: 100px;
margin-bottom: 15px;
.caption {
height: 100%;
}
}
// =============== /VIDEO ================ //
// ============== COMPONENTS ============== //
.center-vertical {
@ -561,6 +510,19 @@ nav {
.img-container {
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 {
@ -659,16 +621,22 @@ blockquote {
footer {
position: relative;
background: #1c1c1c;
height: 65px;
font-weight: normal;
color: #ffffff;
background: #f3f3f3;
color: #b8b8b8;
padding-top: 22px;
border-top: 1px solid #c5c5c5;
a:hover {
color: #ddd;
}
}
.copyright {
border-top: 1px solid #d9d9d9;
padding-top: 10px;
padding-bottom: 20px;
}
// ============== /FOOTER ============== //
// ============== CATEGORY-POSTS ===========//

116
index.html
View File

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