diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius index 584c6b466..a13d8e5ac 100644 --- a/templates/widgets/asidenav.julius +++ b/templates/widgets/asidenav.julius @@ -4,7 +4,7 @@ window.utils = window.utils || {}; // Defines a function to turn an element into an interactive aside-navigation. - // If the small is smaller than 999px the navigation is automatically + // If the screen is smaller than 999px the navigation is automatically // collapsed - even when dynamically resized (e.g. switching from portatit // to landscape). // The can user may also manually collapse and expand the navigation by @@ -16,7 +16,7 @@ // (potentially happening) initial collapse of the asidenav // goes unnoticed by the user. var animClass = 'main__aside--transitioning'; - var aboveCollapsedNav = false; + var hoveringAboveCollapsedNav = false; init(); function init() { @@ -62,17 +62,21 @@ if (!hasCollapsedClass()) { return false; } - aboveCollapsedNav = true; + hoveringAboveCollapsedNav = true; window.setTimeout(function() { - if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) { + if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) { asideEl.classList.add('pseudo-hover'); } - }, 800); + }, 200); }, false); asideEl.addEventListener('mouseleave', function(event) { - aboveCollapsedNav = false; - asideEl.classList.remove('pseudo-hover'); + hoveringAboveCollapsedNav = false; + window.setTimeout(function() { + if (!hoveringAboveCollapsedNav) { + asideEl.classList.remove('pseudo-hover'); + } + }, 200); }, false); } }; @@ -82,8 +86,34 @@ document.addEventListener('DOMContentLoaded', function() { utils.aside(document.querySelector('.main__aside')); - document.querySelector('#theme-selector').addEventListener('change', function(event) { - document.body.className = 'theme--' + event.target.value; + // remove me before flight: + // EXPERIMENTAL + var selector = document.querySelector('#theme-selector'); + var options = Array.from(selector.querySelectorAll('option')) + .reduce(function(acc, optEl) { + if (!acc.includes(optEl.value)) { + acc.push(optEl.value); + } + return acc; + }, + []); + selector.addEventListener('change', function(event) { + setTheme(event.target.value); }); + function setTheme(theme) { + document.body.className = 'theme--' + theme; + } + + setInterval(function() { + setTheme(randomOption()); + }, 20000); + + function randomOption() { + return options[Math.floor(Math.random() * options.length)]; + } + + // initial theme + setTheme(randomOption()); + }); diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 98ec92cc0..5505784c2 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -56,6 +56,7 @@ .asidenav__link-shorthand { transform: scale(1.05, 1.0); transform-origin: right; + text-shadow: none; } > .asidenav__link-wrapper { @@ -81,6 +82,7 @@ .asidenav__link-shorthand { transform: scale(1.05, 1.0); transform-origin: right; + text-shadow: none; } } @@ -114,6 +116,7 @@ font-size: 40px; text-transform: uppercase; transition: transform .2s ease; + text-shadow: 1px 1px 4px rgba(30, 30, 30, 0.8); } .asidenav__link-label { @@ -208,7 +211,6 @@ font-size: 18px; text-align: center; margin-bottom: 0; - background-color: var(--color-lightwhite); } .asidenav__link-shorthand { @@ -232,6 +234,19 @@ justify-content: center; } + .asidenav__list-item:hover { + + > .asidenav__link-wrapper { + color: var(--color-dark); + background-color: var(--color-lightwhite); + } + } + + .asidenav__link-wrapper { + color: var(--color-lightwhite); + background-color: var(--color-dark); + } + .asidenav__link-label { padding-left: 0; }