From 208291b786658545cbe3793b3f5f42c977dc7587 Mon Sep 17 00:00:00 2001 From: Asutosh Palai Date: Wed, 27 Jul 2016 23:00:31 +0530 Subject: [PATCH] Title and navbar fixes --- _includes/head.html | 1 + css/base.scss | 56 +++++++++++++++++--------------------- index.html | 2 +- js/application.js | 66 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 92 insertions(+), 33 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index a0f0894..0a77c5f 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -38,6 +38,7 @@ + diff --git a/css/base.scss b/css/base.scss index 4010983..9524a6d 100644 --- a/css/base.scss +++ b/css/base.scss @@ -53,27 +53,6 @@ $carousel-height: 625px; // ============== /MIXINS ============== // -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 300; - src: local('Avenir Next'), local('Avenir Next'), url(/fonts/avenirnext-thin.woff) format('woff'); -} - -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 500; - src: local('Avenir Next'), local('Avenir Next'), url(/fonts/avenirnext-regular.woff) format('woff'); -} - -@font-face { - font-family: 'AvenirNext'; - font-style: normal; - font-weight: 700; - src: local('Avenir Next Bold'), local('Avenir Next Bold'), url(/fonts/avenirnext-bold.woff) format('woff'); -} - @font-face { font-family: 'Merriweather'; font-style: normal; @@ -102,16 +81,29 @@ body { z-index: 20; transition: background-color 1s ease-in; background: black; + background: rgba(45, 44, 40, 0.6); &.affix { position: fixed; - background: rgba(45, 44, 40, 0.6); - - &.darken { - background: rgba(45, 44, 40, 1); - } - } + + -webkit-transition-duration: .5s; + transition-duration: .5s; + + -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 ); + + + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.navbar--hidden +{ + -webkit-transform: translateY( -100% ); + -ms-transform: translateY( -100% ); + transform: translateY( -100% ); + } @@ -131,7 +123,7 @@ body { border: none; padding-top: 5px; font-weight: bold; - font-family: montserrat; + font-family: 'Montserrat', sans-serif; font-size: 14px; margin-bottom: 0px; border-bottom: 0px; @@ -207,7 +199,6 @@ body { } .title { - font-family: Merriweather; font-size: 42px; font-weight: bold; color: #ffffff; @@ -297,13 +288,13 @@ body { .title { color: $new-article-title-color; text-transform: capitalize; + font-family: 'Montserrat', sans-serif; font-size: 20px; margin-top: 10px; } .tag { text-transform: uppercase; - font-family: AvenirNext; font-size: 14px; color: $new-article-tag-color; } @@ -357,7 +348,8 @@ body { background: $featured-articles-bg-color; width: 0.9 * $article-cover-img-width; ; height: 120px; - padding-bottom: .5em; + font-size: 0.95em; + padding: 0 1em 0.5em; .tag { position: absolute; @@ -375,6 +367,7 @@ body { .title { font-size: 1.85em; + font-family: 'Montserrat', sans-serif; } &:before { @@ -527,7 +520,6 @@ blockquote { font-size: 1.1em; line-height: 1.5em; color: #333332; - font-family: AvenirNext; .content { margin-top: 2em; diff --git a/index.html b/index.html index db4db84..e90f3b2 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ --- layout: layout -title: "Home" +title: "Watch Out!, IIT Roorkee" --- {% include header.html %} diff --git a/js/application.js b/js/application.js index 0849003..a8faf3c 100644 --- a/js/application.js +++ b/js/application.js @@ -6,6 +6,7 @@ $(function() { $(this).addClass(imgClass); }) + /* var switchPos = $('#new-articles').position().top + $('#new-articles').height(); $(window).scroll(function() { @@ -17,6 +18,70 @@ $(function() { $(".navbar-wrapper").removeClass("darken"); } }); + */ + + ;(function($, window, document, undefined) { + 'use strict'; + + var elSelector = '.navbar-wrapper', + elClassHidden = 'navbar--hidden', + throttleTimeout = 250, + $element = $( elSelector ); + + if(!$element.length) return true; + + var $window = $( window ), + wHeight = 0, + wScrollCurrent = 0, + wScrollBefore = 0, + wScrollDiff = 0, + $document = $( document ), + dHeight = 0, + + throttle = function(delay, fn) { + var last, deferTimer; + return function() { + var context = this, args = arguments, now = +new Date; + if( last && now < last + delay ) { + clearTimeout( deferTimer ); + deferTimer = setTimeout( function(){ last = now; fn.apply( context, args ); }, delay ); + + } + else { + last = now; + fn.apply( context, args ); + } + }; + }; + + $window.on( 'scroll', throttle( throttleTimeout, function() { + dHeight = $document.height(); + wHeight = $window.height(); + wScrollCurrent = $window.scrollTop(); + wScrollDiff = wScrollBefore - wScrollCurrent; + + if(wScrollCurrent <= 0) { // scrolled to the very top; element sticks to the top + $element.removeClass(elClassHidden); + $element.removeClass(elClassTop); + } + + else if(wScrollDiff > 10 && $element.hasClass(elClassHidden)) // scrolled up; element slides in + $element.removeClass( elClassHidden ); + + else if(wScrollDiff < -10) {// scrolled down + if(wScrollCurrent + wHeight >= dHeight && $element.hasClass(elClassHidden)) // scrolled to the very bottom; element slides in + $element.removeClass( elClassHidden ); + + else // scrolled down; element slides out + $element.addClass( elClassHidden ); + + } + + wScrollBefore = wScrollCurrent; + })); + + + })( jQuery, window, document ); }); function onYouTubeIframeAPIReady() { @@ -38,3 +103,4 @@ function onYouTubeIframeAPIReady() { }); } +