diff --git a/layout/_partials/header/brand.njk b/layout/_partials/header/brand.njk index ee32395..65a5335 100644 --- a/layout/_partials/header/brand.njk +++ b/layout/_partials/header/brand.njk @@ -15,9 +15,9 @@ {%- endif %} - +

{{ title }}

- +
{%- if subtitle %}

{{ subtitle }}

diff --git a/layout/_scripts/noscript.njk b/layout/_scripts/noscript.njk index d341e00..ec5ec96 100644 --- a/layout/_scripts/noscript.njk +++ b/layout/_scripts/noscript.njk @@ -16,8 +16,9 @@ top: initial; } - .use-motion .logo-line-before i { left: initial; } - .use-motion .logo-line-after i { right: initial; } + .use-motion .logo-line-before, .use-motion .logo-line-after { + transform: scaleX(1); + } .search-pop-overlay, .sidebar-nav { display: none; } .sidebar-panel { display: block; } diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index ae6947a..3f869e7 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -32,30 +32,26 @@ } .logo-line-before, .logo-line-after { + background: var(--brand-color); display: block; + height: 2px; margin: 0 auto; - overflow: hidden; width: 75%; +mobile() { display: none; } - - i { - background: var(--brand-color); - display: block; - height: 2px; - position: relative; - } } .use-motion { - .logo-line-before i { - left: -100%; + .logo-line-before { + transform-origin: left; + transform: scaleX(0); } - .logo-line-after i { - right: -100%; + .logo-line-after { + transform-origin: right; + transform: scaleX(0); } } diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 5c37227..2c6244e 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -1,4 +1,5 @@ .sidebar { + background: initial; bottom: initial; box-shadow: none; margin-top: $sidebar-offset; diff --git a/source/js/motion.js b/source/js/motion.js index 5954058..ebeefcc 100644 --- a/source/js/motion.js +++ b/source/js/motion.js @@ -33,8 +33,8 @@ NexT.motion.middleWares = { const image = document.querySelector('.custom-logo-image'); const title = document.querySelector('.site-title'); const subtitle = document.querySelector('.site-subtitle'); - const logoLineTop = document.querySelector('.logo-line-before i'); - const logoLineBottom = document.querySelector('.logo-line-after i'); + const logoLineTop = document.querySelector('.logo-line-before'); + const logoLineBottom = document.querySelector('.logo-line-after'); brand && sequence.push({ e: brand, @@ -42,10 +42,11 @@ NexT.motion.middleWares = { o: {duration: 200} }); - function getMistLineSettings(element, translateX) { + function getMistLineSettings(element) { + Velocity.hook(element, 'scaleX', 0); return { e: element, - p: {translateX}, + p: {scaleX: 1}, o: { duration : 500, sequenceQueue: false @@ -63,8 +64,8 @@ NexT.motion.middleWares = { CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom && sequence.push( - getMistLineSettings(logoLineTop, '100%'), - getMistLineSettings(logoLineBottom, '-100%') + getMistLineSettings(logoLineTop), + getMistLineSettings(logoLineBottom) ); CONFIG.scheme === 'Muse' && image && pushImageToSequence(); @@ -165,11 +166,7 @@ NexT.motion.middleWares = { if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) { Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, { display : null, - duration: 200, - complete: function() { - // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini. - sidebarAffix.style.transform = 'initial'; - } + duration: 200 }); } integrator.next();