From 7161179222701f88a3ee15101699983d12e13cb7 Mon Sep 17 00:00:00 2001 From: Asutosh Palai Date: Sat, 24 Dec 2016 17:34:24 +0530 Subject: [PATCH] Home page navbar done --- _data/categories.yaml | 13 ++-- _includes/navbar.html | 83 +++++++++++--------- css/base.scss | 166 ++++++++++++++++++++++------------------ images/fb-logo.svg | 14 ++++ images/logo-black.png | Bin 0 -> 5866 bytes images/youtube-play.svg | 14 ++++ 6 files changed, 172 insertions(+), 118 deletions(-) create mode 100644 images/fb-logo.svg create mode 100644 images/logo-black.png create mode 100644 images/youtube-play.svg diff --git a/_data/categories.yaml b/_data/categories.yaml index e0b2f5b..2611eb5 100644 --- a/_data/categories.yaml +++ b/_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: diff --git a/_includes/navbar.html b/_includes/navbar.html index 4a026dd..5da7db9 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -1,41 +1,48 @@ -
-
- - +
+
+ +
+
Watch Out!
+
Official News
Body of IITR
+
+
+
+ diff --git a/css/base.scss b/css/base.scss index 8963e93..f1447e2 100644 --- a/css/base.scss +++ b/css/base.scss @@ -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 ============= // diff --git a/images/fb-logo.svg b/images/fb-logo.svg new file mode 100644 index 0000000..d06a1a3 --- /dev/null +++ b/images/fb-logo.svg @@ -0,0 +1,14 @@ + + + + 7B296AC4-1149-4090-BBA4-E1F8D3190145 + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/images/logo-black.png b/images/logo-black.png new file mode 100644 index 0000000000000000000000000000000000000000..8838bc62c36d6f61c5bef91c9ce3fb6eb7ed880d GIT binary patch literal 5866 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 + + + D5BAB643-0437-451A-9EBD-C075AAAD4F85 + Created with sketchtool. + + + + + + + + + \ No newline at end of file