From 672674f5150935181d9aea4d0cb662f22da74c3b Mon Sep 17 00:00:00 2001 From: denpira Date: Tue, 10 Jul 2018 00:51:15 +0300 Subject: [PATCH 01/14] Enable 'Proxima Nova' font --- source/stylesheets/all.css.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/stylesheets/all.css.scss b/source/stylesheets/all.css.scss index 47243882b7..f107aef3db 100755 --- a/source/stylesheets/all.css.scss +++ b/source/stylesheets/all.css.scss @@ -3,6 +3,8 @@ @charset 'utf-8'; +@import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); + @import 'compass'; @import 'compass/reset'; @import 'compass/typography'; From 4180ae96709b7bf09e354c62864f74599d64442e Mon Sep 17 00:00:00 2001 From: denpira Date: Tue, 10 Jul 2018 00:51:41 +0300 Subject: [PATCH 02/14] Update base font family --- source/stylesheets/_variables.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss index e33155fa96..9b5defe639 100644 --- a/source/stylesheets/_variables.scss +++ b/source/stylesheets/_variables.scss @@ -2,10 +2,13 @@ $brandon: 'Brandon Grotesque W01', sans-serif; $brandon-text: 'Brandon Text W01', sans-serif; $eco-coding: 'Eco Coding W01', 'Menlo', 'Courier', monospace; +$proxima: 'Proxima Nova'; +$proxima-bold: 'Proxima Nova Bold'; +$proxima-light: 'Proxima Nova Light'; // Typography -$base-font-family: $brandon-text; -$heading-font-family: $brandon; +$base-font-family: $proxima; +$heading-font-family: $proxima-bold; $mono-font-family: $eco-coding; $base-font-size: 18px; From 7d708338a00feab425ebdb20e3502dcfc621bea7 Mon Sep 17 00:00:00 2001 From: denpira Date: Tue, 10 Jul 2018 00:52:02 +0300 Subject: [PATCH 03/14] Update header style --- source/javascripts/partials/_header.es6 | 44 ++++++++++++------------ source/partials/_header.erb | 4 +-- source/stylesheets/partials/_header.scss | 27 ++++++++++++--- 3 files changed, 46 insertions(+), 29 deletions(-) diff --git a/source/javascripts/partials/_header.es6 b/source/javascripts/partials/_header.es6 index 2b189e7542..a8f3775944 100755 --- a/source/javascripts/partials/_header.es6 +++ b/source/javascripts/partials/_header.es6 @@ -7,39 +7,39 @@ $(() => { const $toggle = $('.menu-toggle'); const $nav = $('.mobile-nav'); const $dropdownMenu = $('.header-dropdown-menu'); - - var setTransparent = () => { - $header.removeClass('opaque-background'); - $header.addClass('transparent-background'); - $dropdownMenu.removeClass('opaque-background'); - $dropdownMenu.addClass('transparent-background'); - } - - var setOpaque = () => { - $header.removeClass('transparent-background'); - $header.addClass('opaque-background'); - $dropdownMenu.removeClass('transparent-background'); - $dropdownMenu.addClass('opaque-background'); + const $headerLogo = $header.find('img'); + + var setDark = () => { + $header.removeClass('header-dark'); + $header.addClass('header-light'); + $dropdownMenu.removeClass('header-dark'); + $dropdownMenu.addClass('header-light'); + $headerLogo.attr({'src':'/img/logo-dark.svg', 'alt':'Logo'}); } - var setHeaderStyle = () => { - setOpaque(); + var setLight = () => { + $header.removeClass('header-light'); + $header.addClass('header-dark'); + $dropdownMenu.removeClass('header-light'); + $dropdownMenu.addClass('header-dark'); + $headerLogo.attr({'src':'/img/logo-light.svg', 'alt':'Logo'}); } if ($('body').innerWidth() <= 783) { - setOpaque(); - } else { - setHeaderStyle(); + setDark(); } $(window).resize(() => { - if ($('body').innerWidth() > 783) { - setHeaderStyle(); - } else { - setOpaque(); + if ($('body').innerWidth() < 783) { + setDark(); } }); + $(window).on("scroll", () => { + if ($(window).scrollTop() > 0) setDark(); + else setLight(); + }); + // Responsive Menu $toggle.click(function (event) { diff --git a/source/partials/_header.erb b/source/partials/_header.erb index 31445bcf68..4eebd9343e 100755 --- a/source/partials/_header.erb +++ b/source/partials/_header.erb @@ -4,10 +4,10 @@
<%= partial "nav" %>
-
+