OCram85
/
beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Automatically set navbar light/dark based on color (#702)

This commit is contained in:
Amy Troschinetz 2020-08-15 08:41:28 -07:00 committed by GitHub
parent 5ce0f3a5f2
commit c7c5ba0207
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -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 `<head>` tag
- Add YAML option `head-extra` which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag
- Add automatic navbar color detection (#702)
## v4.1.0 2020-08-08

11
assets/js/main.js
View File

@ -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) {