Home page navbar done

_data/categories.yaml

@@ -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:

_includes/navbar.html

@@ -1,41 +1,48 @@
-<div class="navbar-wrapper" data-spy="affix" data-offset-top="0">
+<div class="pre-nav container">
-  <div class="container-fuild">
+  <div class="brand pull-left">
-
+    <img class="logo" src="/images/logo-black.png">
-    <nav class="navbar navbar-default">
+    <div class="name-container">
-      <div class="container">
+      <div class="name">Watch Out!</div>
-
+      <div class="desc">Official News<br>Body of IITR</div>
-        <div class="navbar-header">
+    </div>
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+  </div>
-            <span class="sr-only">Toggle navigation</span>
+  <div class="social pull-right">
-            <span class="icon-bar"></span>
+    <a href="/about">About</a>
-            <span class="icon-bar"></span>
+    <img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">
-            <span class="icon-bar"></span>
+    <img src="/images/youtube-play.svg" href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A">
-          </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>
 </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>

css/base.scss

@@ -4,10 +4,16 @@
 // ================ VARS ===============//
 
 $font-color: #333;
-$navbar-default-link-color: white;
+$container-lg: 1040px;
-$navbar-default-link-active-color: darken($navbar-default-link-color, 25%);
+$navbar-default-brand-color: #4e4e4e;
-$navbar-default-link-hover-color: $navbar-default-link-color;
+$navbar-default-bg: #fff;
-$dropdown-link-hover-color: $navbar-default-link-color;
+$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 {
+  .brand {
-  position: absolute;
+    height: 100%;
-  top: 0;
+    padding: $pre-nav-logo-height * .3 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;
   }
 
-  -webkit-transition-duration: .5s;
+  .name-container {
-  transition-duration: .5s;
+    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  );
+    .name {
-  transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000  );
+      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;
+  .logo {
-  transition-property: transform;
+    height: $pre-nav-logo-height;
-}
+    float: left;
+  }
 
-.navbar--hidden
+  .social {
-{
+    height: 100%;
-  -webkit-transform: translateY( -100%  );
+    padding: $pre-nav-logo-height * .623 0;
-  -ms-transform: translateY( -100%  );
+    font-size: 16px; 
-  transform: translateY( -100%  );
+    font-weight: bold;
+
+    > * {
+      margin-left: 1em;
+    }
+  }
 
 }
 
-
+nav {
-.navbar-logo {
+	width: 100%;
-  @media (min-width: $screen-sm-min) {
+  z-index: 200;
-    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;
-  }
 
   .navbar-brand {
-    text-transform: uppercase;
+    display: none;
   }
 
-  .navbar-toggle {
+  .nav {
-    margin-top: 10px;
+    width: 100%;
-    margin-bottom: 10px;
   }
 
-  .active  a, .open a {
+  &.affix {
-    background: transparent !important;
+    top: 0;
-    color: white;
-  }
 
-  .dropdown-menu {
+    .navbar-brand {
-    background-color: #565553;
+      display: block;
-  }
-
-  @media (min-width: $screen-sm-min) {
-    .navbar-nav {
-      display: inline-block;
-      float: none;
-      vertical-align: top;
-      text-transform: uppercase;
     }
 
-    .navbar-collapse {
+    .nav {
-      text-align: center;
+      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 ============= //

images/fb-logo.svg

@@ -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>

images/youtube-play.svg

@@ -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>