From cf7bc97fbd4439e68fa59c6f065effb660a4a118 Mon Sep 17 00:00:00 2001 From: Giuliano Griffante Date: Fri, 8 Apr 2016 14:53:17 -0300 Subject: [PATCH] Fix navbar height and navbar > nav --- css/polvo.css | 112 +++++++++++++++---------------------- scss/_polvo.scss | 16 ++---- scss/polvo/_navbar.scss | 53 +++++++----------- scss/polvo/_variables.scss | 2 +- 4 files changed, 70 insertions(+), 113 deletions(-) diff --git a/css/polvo.css b/css/polvo.css index 1346b35..61cac9b 100644 --- a/css/polvo.css +++ b/css/polvo.css @@ -1,6 +1,6 @@ -@import url(https://fonts.googleapis.com/css?family=Dosis:400,200,700); +@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,500,700); body { - font-family: "Dosis", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #565a5c; background-color: #ffffff; } @@ -2133,70 +2133,6 @@ body { .card-img-bottom { border-radius: 0 0 .25rem .25rem; } -.navbar-pplural { - background-color: transparent; - border-color: transparent; - -webkit-transition: all 0.65s; - -moz-transition: all 0.65s; - transition: all 0.65s; - min-height: 80px; } - .navbar-pplural .navbar-brand { - color: #f5f5f5; - font-size: 30px; - font-weight: 700; - line-height: 50px; - height: 80px; } - .navbar-pplural .navbar-brand:hover, .navbar-pplural .navbar-brand:focus { - color: #eeeeee; - background-color: transparent; } - .navbar-pplural .navbar-brand img { - width: 42px; - display: inline; } - .navbar-pplural .navbar-text { - color: #eeeeee; } - -@media (min-width: 992px) { - .affix { - background-color: #455a64; - /*opacity: 0.925;*/ - /*border-color: rgba(34, 34, 34, 0.05);*/ - min-height: 50px; } - .affix .navbar-header .navbar-brand { - color: #f5f5f5; - font-size: 18px; - line-height: 20px; - height: 50px; } - .affix .navbar-header .navbar-brand:hover, .affix .navbar-header .navbar-brand:focus { - color: #eeeeee; } - .affix .navbar-header .navbar-brand img { - width: 24px; } - .affix .nav > li > a, - .affix .nav > li > a:focus { - color: #222222; } - .affix .nav > li > a:hover, - .affix .nav > li > a:focus:hover { - color: #f05f40; } } -.panel-hint { - margin-top: 120px; } - -.panel-hint .panel-hint-heading { - margin-top: -25px; } - -.panel.with-nav-tabs .panel-heading { - padding: 5px 5px 0 5px; } - -.panel.with-nav-tabs .nav-tabs { - border-bottom: none; } - -.panel.with-nav-tabs .nav-justified { - margin-bottom: -1px; } - -/* FAQ styles */ -.question { - margin-top: 25px; } - .question:first { - background-color: red; } - footer { background-color: #2b2d2e; color: #cecece; @@ -2246,6 +2182,50 @@ footer { .hero-carousel-lg .carousel-inner .item { height: 100vh; } +.navbar-polvo { + background-color: transparent; + border-color: transparent; + -webkit-transition: all 0.65s; + -moz-transition: all 0.65s; + transition: all 0.65s; } + .navbar-polvo .navbar-brand { + color: #f5f5f5; + font-weight: 700; } + .navbar-polvo .navbar-brand:hover, .navbar-polvo .navbar-brand:focus { + color: #e0e0e0; + background-color: transparent; } + .navbar-polvo .navbar-text { + font-weight: 100; + color: #bdbdbd; } + .navbar-polvo .nav > li > a { + color: #f5f5f5; + background: transparent; } + .navbar-polvo .nav > li > a:hover, .navbar-polvo .nav > li > a:focus { + color: #e0e0e0; } + +@media (min-width: 992px) { + .affix { + background-color: #212121; + border-color: #424242; } + .affix .navbar-header .navbar-brand { + color: #f5f5f5; } + .affix .navbar-header .navbar-brand:hover, .affix .navbar-header .navbar-brand:focus { + color: #e0e0e0; } } +.panel-hint { + margin-top: 120px; } + +.panel-hint .panel-hint-heading { + margin-top: -25px; } + +.panel.with-nav-tabs .panel-heading { + padding: 5px 5px 0 5px; } + +.panel.with-nav-tabs .nav-tabs { + border-bottom: none; } + +.panel.with-nav-tabs .nav-justified { + margin-bottom: -1px; } + .space-sm { margin-top: 20px; margin-bottom: 20px; } diff --git a/scss/_polvo.scss b/scss/_polvo.scss index 4fd496a..3352d96 100644 --- a/scss/_polvo.scss +++ b/scss/_polvo.scss @@ -1,15 +1,10 @@ -//@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,500,700); -@import url(https://fonts.googleapis.com/css?family=Dosis:400,200,700); +@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,500,700); +//@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,700); // Core variables and mixins @import "polvo/variables"; @import "polvo/mixins"; -// Reset and dependencies -//@import "bootstrap/normalize"; -//@import "bootstrap/print"; -//@import "bootstrap/glyphicons"; - // Core CSS @import "polvo/scaffolding"; @import "polvo/type"; @@ -17,13 +12,10 @@ // Components @import "polvo/buttons"; @import "polvo/cards"; -@import "polvo/navbar"; -@import "polvo/panels"; - -// Pages -@import "polvo/faq"; @import "polvo/footer"; @import "polvo/hero-carousel"; +@import "polvo/navbar"; +@import "polvo/panels"; // Utility classes @import "polvo/utilities"; diff --git a/scss/polvo/_navbar.scss b/scss/polvo/_navbar.scss index da1b960..f7996fa 100644 --- a/scss/polvo/_navbar.scss +++ b/scss/polvo/_navbar.scss @@ -1,68 +1,53 @@ $transiton: all 0.65s; -.navbar-pplural { +.navbar-polvo { background-color: transparent; border-color: transparent; -webkit-transition: $transiton; -moz-transition: $transiton; transition: $transiton; - min-height: 80px; .navbar-brand { color: color('grey', '100'); - font-size: 30px; font-weight: 700; - line-height: 50px; - height: 80px; &:hover, &:focus { - color: map-get(map-get($material-colors, 'grey'), '200'); + color: color('grey', '300'); background-color: transparent; } - - img { - width: 42px; - display: inline; - } } .navbar-text { - color: color('grey', '200'); + font-weight: 100; + color: color('grey', '400'); + } + + .nav { + > li > a { + color: color('grey', '100'); + background: transparent; + + &:hover, + &:focus { + color: color('grey', '300'); + } + } } } @media (min-width: $screen-md-min) { .affix { - background-color: color('blue-grey', '700'); - /*opacity: 0.925;*/ - /*border-color: rgba(34, 34, 34, 0.05);*/ - min-height: 50px; + background-color: color('grey', '900'); + border-color: color('grey', '800'); .navbar-header .navbar-brand { color: color('grey', '100'); - font-size: 18px; - line-height: 20px; - height: 50px; &:hover, &:focus { - color: color('grey', '200'); - } - - img { - width: 24px; + color: color('grey', '300'); } } - - .nav > li > a, - .nav > li > a:focus { - color: #222222; - } - - .nav > li > a:hover, - .nav > li > a:focus:hover { - color: #f05f40; - } } } \ No newline at end of file diff --git a/scss/polvo/_variables.scss b/scss/polvo/_variables.scss index 0c42338..c054816 100644 --- a/scss/polvo/_variables.scss +++ b/scss/polvo/_variables.scss @@ -348,7 +348,7 @@ $polvo-cta: #41724d; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: 'Dosis', "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-sans-serif: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif !default; $polvo-font-family-base: $font-family-sans-serif !default; //$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px