From c7c5ba0207f6faf088f128320933daabf2f6a891 Mon Sep 17 00:00:00 2001 From: Amy Troschinetz Date: Sat, 15 Aug 2020 08:41:28 -0700 Subject: [PATCH] Automatically set navbar light/dark based on color (#702) --- CHANGELOG.md | 3 ++- assets/js/main.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65974d0..f5f0f57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## Unreleased version -- Add YAML option `head-extra` which is similar to `footer-extra` but is used to include custom HTML code in a page's `` tag +- Add YAML option `head-extra` which is similar to `footer-extra` but is used to include custom HTML code in a page's `` tag +- Add automatic navbar color detection (#702) ## v4.1.0 2020-08-08 diff --git a/assets/js/main.js b/assets/js/main.js index 616f0cf..f6319d0 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -6,6 +6,17 @@ var BeautifulJekyllJS = { numImgs : null, init : function() { + // Set the navbar-dark/light class based on its background color + const rgb = $('.navbar').css("background-color").replace(/[^\d,]/g,'').split(","); + const brightness = Math.round(( // http://www.w3.org/TR/AERT#color-contrast + parseInt(rgb[0]) * 299 + + parseInt(rgb[1]) * 587 + + parseInt(rgb[2]) * 114 + ) / 1000); + if (brightness <= 125) { + $(".navbar").removeClass("navbar-light").addClass("navbar-dark"); + } + // Shorten the navbar after scrolling a little bit down $(window).scroll(function() { if ($(".navbar").offset().top > 50) {