mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
Asutosh Palai
@ -1,13 +1,12 @@
|
||||
---
|
||||
- name: academics
|
||||
title: Academics
|
||||
subcategories:
|
||||
- name: cultural
|
||||
subcategories:
|
||||
- name: tech
|
||||
subcategories:
|
||||
- name: sac
|
||||
title: Cultural
|
||||
subcategories:
|
||||
- name: columns
|
||||
title: Columns
|
||||
subcategories:
|
||||
- name: coverstory
|
||||
title: Cover Story
|
||||
@ -15,15 +14,25 @@
|
||||
title: Big Story
|
||||
- name: almostfamous
|
||||
title: Almost Famous
|
||||
- name: phekingnews
|
||||
title: Pheking News
|
||||
- name: guestcomentary
|
||||
title: Guest Comentary
|
||||
- name: editorial
|
||||
title: Editorial
|
||||
- name: verbatim
|
||||
- name: editorial
|
||||
title: Editorial
|
||||
- name: tech
|
||||
title: Tech
|
||||
subcategories:
|
||||
- name: career
|
||||
title: Career
|
||||
subcategories:
|
||||
- name: sac
|
||||
title: SAC
|
||||
subcategories:
|
||||
- name: phekingnews
|
||||
title: Pheking News
|
||||
subcategories:
|
||||
- name: verbatim
|
||||
title: Verbatim
|
||||
subcategories:
|
||||
- name: sports
|
||||
title: Sports
|
||||
subcategories:
|
||||
|
||||
15
_data/categories_name.yaml
Normal file
15
_data/categories_name.yaml
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
academics: Academics
|
||||
cultural: Cultual
|
||||
columns: Columns
|
||||
coverstory: Cover Story
|
||||
bigstory: Big Story
|
||||
almostfamous: Almost Famous
|
||||
phekingnews: Pheking News
|
||||
guestcomentary: Guest Comentary
|
||||
tech: Tech
|
||||
career: Career
|
||||
sac: SAC
|
||||
editorial: Editorial
|
||||
verbatim: Verbatim
|
||||
sports: Sports
|
||||
@ -1,10 +1,8 @@
|
||||
---
|
||||
featured_articles:
|
||||
- bigstory
|
||||
- editorial
|
||||
- almostfamous
|
||||
- phekingnews
|
||||
- verbatim
|
||||
- tech
|
||||
|
||||
new_articles:
|
||||
|
||||
@ -1,12 +1,25 @@
|
||||
<div id="header" class="container-fluid category-header">
|
||||
<div class="cover center-both text-center">
|
||||
<h1 class="title">{{ page.category | capitalize }}</h1>
|
||||
</div>
|
||||
{% assign post = site.categories[page.category].first %}
|
||||
<div id="header" class="container category-header">
|
||||
<div class="row">
|
||||
<div class="col-md-8 tinted cover-image center-fill-container">
|
||||
{% if post.image != nil %}
|
||||
<div class="img-container">
|
||||
<img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<div class="col-md-4 cover-details">
|
||||
<div class="cover-title">
|
||||
<a href="{{ post.url }}" class="cover-link">
|
||||
<h1 class="title">{{ post.title }}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="date">{{ post.date | date: "%-d %B %Y" }}</div>
|
||||
<div class="cover-excerpt">
|
||||
{{ post.excerpt | truncate: 350 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -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">© Copyright 2016 — 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>© Copyright 2016 — Watch Out! News Agency</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,50 +3,66 @@
|
||||
{% assign post = page %}
|
||||
{% endif %}
|
||||
|
||||
<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="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>
|
||||
<a href="{{ post.url }}">
|
||||
<div id="header" class="container {% if page.is_post %}post-header{% endif %}">
|
||||
<div class="row header-row outer-row">
|
||||
{% if post.image != nil %}
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<div id="new-articles" class="container content">
|
||||
<div class="container-title">New Articles</div>
|
||||
<section>
|
||||
<div class="row outer-row">
|
||||
{% for post in site.related_posts limit: 5 %}
|
||||
|
||||
{% if forloop.index == 3 %}
|
||||
</div>
|
||||
<div class="row outer-row">
|
||||
{% endif %}
|
||||
|
||||
<div class="col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %} article-col">
|
||||
<a href="{{ post.url }}">
|
||||
<div class="article">
|
||||
<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 }}/">{{ site.data.categories_name[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> <!-- details -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
17
_includes/horizontal_post.html
Normal file
17
_includes/horizontal_post.html
Normal file
@ -0,0 +1,17 @@
|
||||
{% assign post = include.post %}
|
||||
<div class="row article article-horiozntal">
|
||||
<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 }}/">{{ site.data.categories_name[post.category] }}</a></div>
|
||||
<span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
|
||||
</div>
|
||||
<div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 250 }}{% endif %}</div>
|
||||
</div> <!--details-->
|
||||
</div> <!--details-container-->
|
||||
</div> <!--article-->
|
||||
|
||||
@ -1,41 +1,50 @@
|
||||
<div class="navbar-wrapper" data-spy="affix" data-offset-top="0">
|
||||
<div class="container-fuild">
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-left" href="/"><img class="navbar-logo" src="/images/watchout.svg" alt="WONA Logo"></a>
|
||||
</div>
|
||||
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
{% for cat in site.data.categories %}
|
||||
{% if cat.subcategories != nil %}
|
||||
<li class = "dropdown">
|
||||
<a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.name | uppercase }} <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for subcat in cat.subcategories %}
|
||||
{% if site.categories[subcat.name] != nil %}
|
||||
<li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title | uppercase }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% elsif site.categories[cat.name] != nil%}
|
||||
<li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.name | uppercase }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pre-nav container">
|
||||
<a href="/">
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
</a>
|
||||
<div class="social pull-right">
|
||||
<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>
|
||||
|
||||
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">Watch Out!</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% for cat in site.data.categories %}
|
||||
{% if cat.subcategories != nil %}
|
||||
<li class = "dropdown">
|
||||
<a class="hover-underline" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.title }} <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for subcat in cat.subcategories %}
|
||||
{% if site.categories[subcat.name] != nil %}
|
||||
<li><a class="hover-underline" href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% elsif site.categories[cat.name] != nil%}
|
||||
<li><a class="hover-underline" href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -5,25 +5,15 @@ layout: layout
|
||||
{% include cat_header.html %}
|
||||
|
||||
<div class="category-posts container">
|
||||
{% for post in site.categories[page.category] %}
|
||||
<div class="category-post row">
|
||||
{% if post.image != nil %}
|
||||
<div class="col-sm-3 center-fill-container img-container">
|
||||
<a href="{{ post.url }}">
|
||||
<img src="/images/posts/{{post.image}}" alt="" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-9 details">
|
||||
<h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
|
||||
<p class="tag">{{ post.excerpt }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-sm-12 details">
|
||||
<h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
|
||||
<p class="tag">{{ post.excerpt }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
{% for post in site.categories[page.category] offset: 1 %}
|
||||
{% include horizontal_post.html post=post %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-md-4">
|
||||
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,6 +5,15 @@
|
||||
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
{% include navbar.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
@ -1,49 +1,63 @@
|
||||
---
|
||||
layout: layout
|
||||
---
|
||||
{% include header.html %}
|
||||
|
||||
<section class="post container">
|
||||
<h1>
|
||||
<a href="{{ page.url }}">{{ page.title }}</a>
|
||||
</h1>
|
||||
|
||||
<section class="byline col-md-12">
|
||||
{{ page.date | date: "%B %e, %Y" }}
|
||||
</section>
|
||||
|
||||
<div class="col-md-8">
|
||||
<section class="content{% if page.justify %} justify{% endif %}">
|
||||
{{ content }}
|
||||
</section>
|
||||
<div class="header">
|
||||
<h3 class="tag">
|
||||
<a href="/category/{{ page.category }}/">{{ site.data.categories_name[page.category] }}</a>
|
||||
</h3>
|
||||
<h1 class="title">
|
||||
<a href="{{ page.url }}">{{ page.title }}</a>
|
||||
</h1>
|
||||
<div class="date">
|
||||
{{ page.date | date: "%B %e, %Y" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row body">
|
||||
|
||||
<div class="fb-page col-md-4" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
|
||||
<section class="col-md-8 content{% if page.justify %} justify{% endif %}">
|
||||
{{ content }}
|
||||
|
||||
<br/>
|
||||
<div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
|
||||
<div class="fb-content">
|
||||
<div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
|
||||
|
||||
<br/>
|
||||
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
|
||||
</section>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
|
||||
</div>
|
||||
</div> <!-- body -->
|
||||
|
||||
</section>
|
||||
|
||||
<div id="related-articles-container" class="container-fluid">
|
||||
<section id="related-articles" class="row">
|
||||
<div id="more-articles-container" class="container">
|
||||
<div class="head-wrapper">
|
||||
<h1 class="container-title">More from {{ page.category | capitalize }}</h1>
|
||||
<span class="view-all">view all</span>
|
||||
</div>
|
||||
<section id="more-articles" class="row">
|
||||
|
||||
{% for post in site.related_posts limit: 4 %}
|
||||
{% for post in site.categories[page.category] limit: 5 %}
|
||||
{% if post.url != page.url %}
|
||||
{% if forloop.index < 5 or found %}
|
||||
<div class="article col-sm-3">
|
||||
<a href="{{ post.url }}">
|
||||
<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 class="details text-center ">
|
||||
<h3 class="title">{{ post.title | truncatewords: 4}}</h3>
|
||||
<p class="tag">{{ post.tag }}</p>
|
||||
<div class="details">
|
||||
<h3 class="title">{{ post.title | truncatewords: 7}}</h3>
|
||||
<div class="date">{{ post.date | date: "%B %e, %Y" }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign found = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
701
css/base.scss
701
css/base.scss
@ -3,18 +3,24 @@
|
||||
|
||||
// ================ VARS ===============//
|
||||
|
||||
// Bootstrap vars
|
||||
$font-color: #333;
|
||||
$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;
|
||||
$home-header-bg-color: #333;
|
||||
$container-lg: 1040px;
|
||||
$navbar-default-brand-color: #4e4e4e;
|
||||
$navbar-default-bg: #fff;
|
||||
$navbar-default-border: none;
|
||||
|
||||
// Other vars
|
||||
$pre-nav-logo-height: 65px;
|
||||
$home-header-bg-color: #22221f;
|
||||
$home-header-height: 340px;
|
||||
$home-header-shadow: 0 0 30px 0px rgba(0,0,0,0.4);
|
||||
$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;
|
||||
$featured-articles-title-color: #4e4e4e;
|
||||
$article-cover-img-width: 355px;
|
||||
$article-cover-img-height: 190px;
|
||||
$carousel-bg-color: #333;
|
||||
@ -59,135 +65,177 @@ $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;
|
||||
background: #fff;
|
||||
font-family: Lato, Merriweather, Open Sans, sans-serif;
|
||||
@include box-sizing();
|
||||
}
|
||||
|
||||
*{
|
||||
font-family: Merriweather, Open Sans, sans-serif;
|
||||
font-family: Lato, Merriweather, Open Sans, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
// ================ NAV ================//
|
||||
.pre-nav, .pre-footer {
|
||||
height: $pre-nav-logo-height * 1.6;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
|
||||
.navbar-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
transition: background-color 1s ease-in;
|
||||
background: black;
|
||||
background: rgba(45, 44, 40, 0.6);
|
||||
|
||||
&.affix {
|
||||
position: fixed;
|
||||
.brand {
|
||||
height: 100%;
|
||||
padding: $pre-nav-logo-height * .3 0;
|
||||
}
|
||||
|
||||
-webkit-transition-duration: .5s;
|
||||
transition-duration: .5s;
|
||||
.name-container {
|
||||
height: $pre-nav-logo-height;
|
||||
position: relative;
|
||||
margin-left: 2em;
|
||||
line-height: 1;
|
||||
|
||||
-webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
|
||||
transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
|
||||
.name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 7em;
|
||||
font-size: 18px;
|
||||
color: $navbar-default-brand-color;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 22px;
|
||||
width: 7em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #ababab;
|
||||
}
|
||||
}
|
||||
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
}
|
||||
.logo {
|
||||
height: $pre-nav-logo-height;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar--hidden
|
||||
{
|
||||
-webkit-transform: translateY( -100% );
|
||||
-ms-transform: translateY( -100% );
|
||||
transform: translateY( -100% );
|
||||
.social {
|
||||
height: 100%;
|
||||
padding: $pre-nav-logo-height * .623 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #ababab;
|
||||
|
||||
> * {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.navbar-logo {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
height: 2.5em;
|
||||
padding: .5em;
|
||||
}
|
||||
@media (max-width: $screen-xs-max) {
|
||||
height: 2.5em;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-top: 5px;
|
||||
font-weight: bold;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 0px;
|
||||
|
||||
.navbar-header {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
nav {
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
text-transform: uppercase;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
.nav {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.active a, .open a {
|
||||
background: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
&.affix {
|
||||
top: 0;
|
||||
border-bottom: 2px solid #e5e5e5;
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #565553;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.navbar-nav {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
text-transform: uppercase;
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
text-align: center;
|
||||
.nav {
|
||||
width: initial;
|
||||
|
||||
&:after {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav > li {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin-bottom: -100%; // Hack to fix the spacing between header and navbar
|
||||
|
||||
&:first-of-type a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type a {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
font-size: 16px;
|
||||
text-align: justify;
|
||||
font-weight: bold;
|
||||
|
||||
&:after {
|
||||
width: 100%; /* Ensures justification for single lines */
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// ================ /NAV ================//
|
||||
|
||||
// ============= HOME-HEADER ============= //
|
||||
|
||||
#header {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
margin-bottom: -($new-article-img-height / 4);
|
||||
background: $home-header-bg-color;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
&.category-header {
|
||||
height: 300px;
|
||||
box-shadow: 0 100px 125px -100px;
|
||||
}
|
||||
|
||||
&.about-header {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
z-index: 10;
|
||||
.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: $home-header-shadow;
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
height: $home-header-height;
|
||||
}
|
||||
|
||||
.cover-details {
|
||||
padding: 2em 1.5em;
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
@ -196,61 +244,143 @@ body {
|
||||
|
||||
.cover-link:hover {
|
||||
text-decoration: none;
|
||||
color: rgb(174, 170, 170);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#header.category-header {
|
||||
font-size: 16px;
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
.img-responsive {
|
||||
width: 100%;
|
||||
}
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scroll-buttons {
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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));
|
||||
.date {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #e7ce00;
|
||||
}
|
||||
.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));
|
||||
}
|
||||
.red-strip {
|
||||
height: 0px;
|
||||
width: 90px;
|
||||
border-bottom: 8px solid red;
|
||||
}
|
||||
|
||||
.cover-excerpt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
// ============= /HOME-HEADER ============= //
|
||||
|
||||
// ============= NEW-ARTICLES ============ //
|
||||
#new-articles, #related-articles {
|
||||
#new-articles {
|
||||
color: white;
|
||||
margin-bottom: 60px;
|
||||
position: relative;
|
||||
|
||||
.container-title {
|
||||
position: absolute;
|
||||
top: -2.25em;
|
||||
left: -.5em;
|
||||
z-index: 10;
|
||||
color: #252525;
|
||||
background: #fafafa;
|
||||
font-size: 14px;
|
||||
padding: 0.35em 2.35em;
|
||||
box-shadow: $home-header-shadow;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.article-col {
|
||||
padding: 0 5px;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article {
|
||||
position: relative;
|
||||
height: 340px;
|
||||
margin-top: 10px;
|
||||
box-shadow: $home-header-shadow;
|
||||
}
|
||||
|
||||
.details {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 1.5em 1.5em .25em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.row:last-of-type {
|
||||
.article-col:first-of-type .article {
|
||||
overflow: hidden;
|
||||
border-radius: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.article-col:last-of-type .article {
|
||||
overflow: hidden;
|
||||
border-radius: 0px 0px 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -305,135 +435,67 @@ body {
|
||||
|
||||
// ========== FEATURED-ARTICLE =========== //
|
||||
#featured-articles-container {
|
||||
background: $featured-articles-bg-color;
|
||||
padding-top: 3em;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
.article-horiozntal {
|
||||
height: 10em;
|
||||
margin-bottom: 3.5em;
|
||||
margin-left: 0;
|
||||
|
||||
#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);
|
||||
.title {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
margin-bottom: 10px + 0.1 * $article-cover-img-height;
|
||||
.excerpt {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -480,6 +542,31 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.tinted {
|
||||
background: black;
|
||||
|
||||
img {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@ -527,21 +614,18 @@ blockquote {
|
||||
// ============== POST ============== //
|
||||
|
||||
.post {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 10px 50px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
color: #333332;
|
||||
|
||||
.content {
|
||||
margin-top: 2em;
|
||||
.header {
|
||||
border-bottom: 4px solid #e7ce00;
|
||||
font-weight: bold;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.fb-page {
|
||||
top:2em;
|
||||
.body {
|
||||
padding-top: 4em;
|
||||
}
|
||||
|
||||
p img {
|
||||
@ -554,20 +638,80 @@ blockquote {
|
||||
.justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.fb-content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.fb-like {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-header {
|
||||
box-shadow: 0 100px 125px -100px;
|
||||
.header {
|
||||
.tag {
|
||||
text-transform: uppercase;
|
||||
color: #e7ce00;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #8b8b8b;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// ============== /POST ============== //
|
||||
|
||||
// ========= RELATED-ARTICLES ======== //
|
||||
#more-articles-container {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 40px;
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
|
||||
#related-articles {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
background: #f0f0f0;
|
||||
.head-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
font-family: Merriweather;
|
||||
font-style: italic;
|
||||
color: #ababab;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#more-articles {
|
||||
color: white;
|
||||
|
||||
.article {
|
||||
height: 155px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// ========= /RELATED-ARTICLES ======= //
|
||||
@ -576,36 +720,45 @@ blockquote {
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
background: #1c1c1c;
|
||||
height: 65px;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
background: #f3f3f3;
|
||||
color: #b8b8b8;
|
||||
margin-top: 20px;
|
||||
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 ===========//
|
||||
.category-posts {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
padding-top: 20px;
|
||||
min-height: 100px;
|
||||
|
||||
.category-post {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 10px 30px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
.category-posts {
|
||||
margin-top: 20px;
|
||||
|
||||
.tag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
height: $article-cover-img-height;
|
||||
.date {
|
||||
display: block;
|
||||
position: static;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// ============= /CATEGORY-POSTS ===========//
|
||||
|
||||
// ============== TEAM ============== //
|
||||
|
||||
14
images/fb-logo.svg
Normal file
14
images/fb-logo.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="9px" height="19px" viewBox="0 0 9 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>7B296AC4-1149-4090-BBA4-E1F8D3190145</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
|
||||
<g id="Home---final" transform="translate(-1195.000000, -50.000000)" fill="#7B7B7B">
|
||||
<g id="facebook" transform="translate(1195.000000, 50.000000)">
|
||||
<path d="M5.9847592,19 L1.99410689,19 L1.99410689,9.49880081 L0,9.49880081 L0,6.22500631 L1.99410689,6.22500631 L1.99410689,4.25953042 C1.99410689,1.58892956 3.11948791,0 6.31883763,0 L8.98171103,0 L8.98171103,3.27499369 L7.31741516,3.27499369 C6.0719366,3.27499369 5.98963625,3.73248548 5.98963625,4.58631028 L5.98414956,6.22500631 L9,6.22500631 L8.64702296,9.49880081 L5.98414956,9.49880081 L5.98414956,19 L5.9847592,19 Z" id="Shape" opacity="0.6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/logo-black.png
Normal file
BIN
images/logo-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
14
images/youtube-play.svg
Normal file
14
images/youtube-play.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="11px" viewBox="0 0 16 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>D5BAB643-0437-451A-9EBD-C075AAAD4F85</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
|
||||
<g id="Home---final" transform="translate(-1224.000000, -54.000000)" fill="#7B7B7B">
|
||||
<g id="youtube-play" transform="translate(1224.000000, 54.000000)">
|
||||
<path d="M16,8.30042703 L16,2.69957297 C16,2.69957297 16,0 13.2427093,0 L2.75634995,0 C2.75634995,0 0,0 0,2.69957297 L0,8.30042703 C0,8.30042703 0,11 2.75634995,11 L13.2427093,11 C13.2427093,11 16,11 16,8.30042703 M11.1063029,5.50782885 L5.86829727,8.51963493 L5.86829727,2.49510173 L11.1063029,5.50782885" id="Shape" opacity="0.6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
133
index.html
133
index.html
@ -4,105 +4,50 @@ 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">
|
||||
<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>
|
||||
</div>
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for post in site.categories[cat] %}
|
||||
{% if post.image != null %}
|
||||
{% include horizontal_post.html post=post %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
|
||||
</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>
|
||||
|
||||
@ -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