diff --git a/modules/wowchemy/assets/js/wowchemy-announcement.js b/modules/wowchemy/assets/js/wowchemy-announcement.js new file mode 100644 index 00000000..069705df --- /dev/null +++ b/modules/wowchemy/assets/js/wowchemy-announcement.js @@ -0,0 +1,33 @@ +/* --------------------------------------------------------------------------- + * Wowchemy + * https://github.com/wowchemy/wowchemy-hugo-themes + * + * Announcement Bar component + * --------------------------------------------------------------------------- */ + +let announcement = document.getElementById('announcement'); + +// Check if the page has an announcement defined for it +if (announcement !== null) { + console.debug('Announcement detected!'); + + let announcement_id = announcement.dataset.id; + + // Check local storage for the announcement status + Object.keys(localStorage).forEach(function(key) { + if (/^wc-announcement-/.test(key)) { + if (key !== announcement_id ) { + localStorage.removeItem(key); + document.documentElement.removeAttribute('data-wc-announcement-status'); + console.debug('Announcement key removed!'); + } + } + }); + + // Dismiss announcement + // TODO: for BS5 upgrade with vanilla JS, change to `announcement.addEventListener('closed.bs.alert', () => {` + $('#announcement').on('closed.bs.alert', function () { + console.debug(`Announcement ${announcement_id} dismissed!`); + localStorage.setItem(announcement_id, 'dismissed'); + }); +} diff --git a/modules/wowchemy/assets/js/wowchemy-headroom.js b/modules/wowchemy/assets/js/wowchemy-headroom.js index a7eec8d1..e7d8f3d1 100644 --- a/modules/wowchemy/assets/js/wowchemy-headroom.js +++ b/modules/wowchemy/assets/js/wowchemy-headroom.js @@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () { console.debug(`Use headroom on this page? ${pageData['use_headroom']}`); // Grab header element - let $header = document.querySelector('header'); + let $header = document.querySelector('.page-header'); // Use Headroom on this page? if ($header && pageData['use_headroom'] === true) { diff --git a/modules/wowchemy/assets/js/wowchemy-init.js b/modules/wowchemy/assets/js/wowchemy-init.js index d35d3603..1c2cdf40 100644 --- a/modules/wowchemy/assets/js/wowchemy-init.js +++ b/modules/wowchemy/assets/js/wowchemy-init.js @@ -30,3 +30,11 @@ initThemeVariation(); // For Plotly compatibility with MathJax (must appear prior to loading Plotly). window.PlotlyConfig = {MathJaxConfig: 'local'}; + +// Check for any dismissed announcements that should be hidden on load +Object.keys(localStorage).forEach(function(key) { + if (/^wc-announcement-/.test(key)) { + document.documentElement.setAttribute('data-announcement-status', 'dismissed'); + console.debug('Hiding announcement...'); + } +}); diff --git a/modules/wowchemy/assets/scss/wowchemy/_base.scss b/modules/wowchemy/assets/scss/wowchemy/_base.scss index d2aad12a..e248a236 100644 --- a/modules/wowchemy/assets/scss/wowchemy/_base.scss +++ b/modules/wowchemy/assets/scss/wowchemy/_base.scss @@ -9,11 +9,11 @@ html { line-height: 1.65; // Offset anchor scrolling by height of desktop fixed header. - scroll-padding-top: 70px; + // scroll-padding-top: 70px; @include media-breakpoint-down(md) { // Offset anchor scrolling by height of mobile fixed header. - scroll-padding-top: 50px; + // scroll-padding-top: 50px; } } @media screen and (min-width: 58em) { @@ -35,11 +35,11 @@ body { overflow-x: hidden; // Offset body content by fixed navbar height. - margin-top: 70px; + // margin-top: 70px; @include media-breakpoint-down(md) { // Offset body content by fixed navbar height. - margin-top: 50px; + // margin-top: 50px; } } diff --git a/modules/wowchemy/assets/scss/wowchemy/components/_all.scss b/modules/wowchemy/assets/scss/wowchemy/components/_all.scss index 8085cd7b..35cc439c 100644 --- a/modules/wowchemy/assets/scss/wowchemy/components/_all.scss +++ b/modules/wowchemy/assets/scss/wowchemy/components/_all.scss @@ -8,3 +8,4 @@ @import 'pagination'; @import 'sharing'; @import 'shortcode'; +@import 'announcement_bar'; diff --git a/modules/wowchemy/assets/scss/wowchemy/components/_announcement_bar.scss b/modules/wowchemy/assets/scss/wowchemy/components/_announcement_bar.scss new file mode 100644 index 00000000..3bf95d99 --- /dev/null +++ b/modules/wowchemy/assets/scss/wowchemy/components/_announcement_bar.scss @@ -0,0 +1,23 @@ +#announcement { + // Reduced BS font size + font-size: 16px; +} + +#announcement.alert { + // Reduced BS padding + padding: 0.1rem 1.25rem; +} + +.alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + z-index: 2; + // Reduced BS padding inline with `#announcement.alert` padding + padding: 0.1rem 1.25rem; +} + +// Hide dismissed announcement +[data-wc-announcement-status="dismissed"] #announcement { + display: none; +} diff --git a/modules/wowchemy/assets/scss/wowchemy/components/_nav.scss b/modules/wowchemy/assets/scss/wowchemy/components/_nav.scss index 2886cc86..b3b06ad2 100644 --- a/modules/wowchemy/assets/scss/wowchemy/components/_nav.scss +++ b/modules/wowchemy/assets/scss/wowchemy/components/_nav.scss @@ -16,7 +16,7 @@ } .header--fixed { - position: fixed; + position: sticky; z-index: 10; // previously, 1030 right: 0; left: 0; diff --git a/modules/wowchemy/layouts/_default/baseof.html b/modules/wowchemy/layouts/_default/baseof.html index 873ce308..92d50a0b 100644 --- a/modules/wowchemy/layouts/_default/baseof.html +++ b/modules/wowchemy/layouts/_default/baseof.html @@ -32,7 +32,11 @@ {{ partial "search" . }} -