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..7486af7 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 'https://fonts.googleapis.com/css?family=Cormorant'; // 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/_faq.scss b/scss/polvo/_faq.scss deleted file mode 100644 index 3b7fb55..0000000 --- a/scss/polvo/_faq.scss +++ /dev/null @@ -1,7 +0,0 @@ -/* FAQ styles */ -.question { - margin-top: 25px; - &:first { - background-color: red; - } -} diff --git a/scss/polvo/_navbar.scss b/scss/polvo/_navbar.scss index da1b960..28b7b65 100644 --- a/scss/polvo/_navbar.scss +++ b/scss/polvo/_navbar.scss @@ -1,68 +1,57 @@ $transiton: all 0.65s; -.navbar-pplural { +// +// Navbar +// -------------------------------------------------- + +.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/_scaffolding.scss b/scss/polvo/_scaffolding.scss index 373065f..2ac36ae 100644 --- a/scss/polvo/_scaffolding.scss +++ b/scss/polvo/_scaffolding.scss @@ -9,6 +9,21 @@ body { } +// Page blocks +.page-block { + &-image { + background-size: cover; + background-position: center top; + background-repeat: no-repeat; + height: 450px; + } + + &-video { + + } +} + + // Horizontal rules // ------------------------- .hr { diff --git a/scss/polvo/_type.scss b/scss/polvo/_type.scss index 3a77106..16aec25 100644 --- a/scss/polvo/_type.scss +++ b/scss/polvo/_type.scss @@ -2,6 +2,32 @@ // Typography // -------------------------------------------------- +.type { + &-xs { + font-size: $font-size-xs; + } + + &-sm { + font-size: $font-size-sm; + } + + &-md { + font-size: $font-size-md; + } + + &-lg { + font-size: $font-size-lg; + } + + &-xl { + font-size: $font-size-xl; + } + + &-serif { + font-family: $polvo-font-family-serif; + } +} + // Headings // ------------------------- diff --git a/scss/polvo/_utilities.scss b/scss/polvo/_utilities.scss index 69e88ff..f917701 100644 --- a/scss/polvo/_utilities.scss +++ b/scss/polvo/_utilities.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- -// Spacers +// Spacers, margins and paddings // ------------------------- .space { @@ -68,6 +68,17 @@ } } +// Pullers +// ------------------------- +.pull { + &up { + margin-top: -75px; + } + + &down { + margin-bottom: -75px; + } +} // Stretch // ------------------------- diff --git a/scss/polvo/_variables.scss b/scss/polvo/_variables.scss index 0c42338..9fc89f8 100644 --- a/scss/polvo/_variables.scss +++ b/scss/polvo/_variables.scss @@ -348,8 +348,14 @@ $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; -$polvo-font-family-base: $font-family-sans-serif !default; +$polvo-font-family-base: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$polvo-font-family-serif: 'Cormorant', serif; + +$font-size-xs: 14px; +$font-size-sm: 18px; +$font-size-md: 24px; +$font-size-lg: 36px; +$font-size-xl: 48px; //$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px //$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px @@ -388,7 +394,7 @@ $card-deck-margin: .625rem !default; //== Utilities // //## Spacers -$space-sm: 20px; +$space-sm: 25px; $space-md: $space-sm * 2; $space-lg: $space-md * 2;