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

Home page navbar done

Browse Source
This commit is contained in:
Asutosh Palai
2016-12-24 17:34:24 +05:30
parent 84664ac6ee
commit 7161179222
6 changed files with 172 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
_data/categories.yaml
View File

@ -3,10 +3,6 @@
subcategories:
- name: cultural
subcategories:
- name: tech
subcategories:
- name: sac
subcategories:
- name: columns
subcategories:
- name: coverstory
@ -19,11 +15,16 @@
title: Pheking News
- name: guestcomentary
title: Guest Comentary
- name: tech
subcategories:
- name: career
subcategories:
- name: sac
title: SAC
subcategories:
- name: editorial
title: Editorial
- name: verbatim
subcategories:
- name: career
subcategories:
- name: sports
subcategories:

83
_includes/navbar.html
View File

@ -1,41 +1,48 @@
<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>
</nav>
<div class="pre-nav 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 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.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><!--/.nav-collapse -->
</div>
</nav>

166
css/base.scss
View File

@ -4,10 +4,16 @@
// ================ 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;
$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;*/
$pre-nav-logo-height: 65px;
$home-header-bg-color: #333;
$new-article-img-height: 150px;
$new-article-img-width: 225px;
@ -63,107 +69,119 @@ 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 {
height: $pre-nav-logo-height * 1.6;
.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;
> * {
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;
.navbar-brand {
text-transform: uppercase;
display: none;
}
.navbar-toggle {
margin-top: 10px;
margin-bottom: 10px;
.nav {
width: 100%;
}
.active a, .open a {
background: transparent !important;
color: white;
}
&.affix {
top: 0;
.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;
> li {
width: initial;
}
}
}
}
#navbar {
padding: 0;
}
.nav > li {
width: 1/9 * 100%;
text-align: center;
&:first-of-type a {
padding-left: 0;
text-align: left;
}
&:last-of-type a {
text-align: right;
}
}
.navbar-nav {
font-size: 16px;
text-transform: capitalize;
font-weight: bold;
}
// ================ /NAV ================//
// ============= HOME-HEADER ============= //

14
images/fb-logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/logo-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

14
images/youtube-play.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB