Refactor motion

layout/_partials/header/brand.njk

@@ -15,9 +15,9 @@
     {%- endif %}
 
     <a href="{{ config.root }}" class="brand" rel="start">
-      <i class="logo-line-before"></i>
+      <i class="logo-line"></i>
       <h1 class="site-title">{{ title }}</h1>
-      <i class="logo-line-after"></i>
+      <i class="logo-line"></i>
     </a>
     {%- if subtitle %}
       <p class="site-subtitle" itemprop="description">{{ subtitle }}</p>

layout/_partials/widgets.njk

@@ -4,12 +4,15 @@
     <span>0%</span>
   </div>
 {%- endif %}
+
 {%- if theme.reading_progress.enable %}
   <div class="reading-progress-bar"></div>
 {%- endif %}
+
 {%- if theme.bookmark.enable %}
   <a role="button" class="book-mark-link book-mark-link-fixed"></a>
 {%- endif %}
+
 {%- if theme.github_banner.enable %}
   {%- set github_URL = theme.github_banner.permalink %}
   {%- set github_title = theme.github_banner.title %}
@@ -18,3 +21,7 @@
 
   {{ next_url(github_URL, github_image, {class: 'github-corner', title: github_title, "aria-label": github_title}) }}
 {%- endif %}
+
+<noscript>
+  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
+</noscript>

layout/_scripts/noscript.njk

@@ -2,7 +2,6 @@
   <style>
   body { margin-top: 2rem; }
 
-  .use-motion .brand,
   .use-motion .menu-item,
   .sidebar-inner,
   .use-motion .post-block,
@@ -13,17 +12,17 @@
   .use-motion .collection-header { opacity: initial; }
 
   .use-motion .site-title,
-  .use-motion .site-subtitle {
+  .use-motion .site-subtitle,
+  .use-motion .site-brand-container .toggle {
     opacity: initial;
     top: initial;
   }
 
-  .use-motion .logo-line-before, .use-motion .logo-line-after {
+  .use-motion .logo-line {
     transform: scaleX(1);
   }
 
   .search-pop-overlay, .sidebar-nav { display: none; }
   .sidebar-panel { display: block; }
   </style>
-  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
 </noscript>

source/css/_common/outline/header/site-meta.styl

@@ -40,10 +40,6 @@
 }
 
 .use-motion {
-  .brand {
-    opacity: 0;
-  }
-
   .site-title, .site-subtitle, .custom-logo-image {
     opacity: 0;
     position: relative;

source/css/_common/outline/header/site-nav.styl

@@ -26,3 +26,11 @@
     display: block;
   }
 }
+
+.use-motion {
+  .site-brand-container .toggle {
+    opacity: 0;
+    position: relative;
+    top: -10px;
+  }
+}

source/css/_schemes/Mist/_header.styl

@@ -27,7 +27,7 @@
   }
 }
 
-.logo-line-before, .logo-line-after {
+.logo-line {
   background: var(--brand-color);
   display: block;
   height: 2px;
@@ -40,12 +40,12 @@
 }
 
 .use-motion {
-  .logo-line-before {
+  .logo-line:first-of-type {
     transform-origin: left;
     transform: scaleX(0);
   }
 
-  .logo-line-after {
+  .logo-line:last-of-type {
     transform-origin: right;
     transform: scaleX(0);
   }

source/js/motion.js

@@ -29,60 +29,50 @@ NexT.motion.integrator = {
 NexT.motion.middleWares = {
   logo: function(integrator) {
     const sequence = [];
-    const brand = document.querySelector('.brand');
     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');
-    const logoLineBottom = document.querySelector('.logo-line-after');
-
-    brand && sequence.push({
-      e: brand,
-      p: {opacity: 1},
-      o: {duration: 200}
-    });
+    const toggle = document.querySelectorAll('.site-brand-container .toggle');
+    const logoLine = document.querySelectorAll('.logo-line');
 
     function getMistLineSettings(element) {
       Velocity.hook(element, 'scaleX', 0);
-      return {
+      sequence.push({
         e: element,
-        p: {scaleX: 1},
+        p: {
+          scaleX: 1
+        },
         o: {
           duration     : 500,
           sequenceQueue: false
         }
-      };
-    }
-
-    function pushImageToSequence() {
-      sequence.push({
-        e: image,
-        p: {opacity: 1, top: 0},
-        o: {duration: 200}
       });
     }
 
-    CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
-    && sequence.push(
-      getMistLineSettings(logoLineTop),
-      getMistLineSettings(logoLineBottom)
-    );
+    function pushToSequence(element) {
+      sequence.push({
+        e: element,
+        p: {
+          opacity: 1,
+          top    : 0
+        },
+        o: {
+          duration: 200
+        }
+      });
+    }
 
-    CONFIG.scheme === 'Muse' && image && pushImageToSequence();
+    CONFIG.scheme === 'Mist' && logoLine.length && getMistLineSettings(logoLine);
 
-    title && sequence.push({
-      e: title,
-      p: {opacity: 1, top: 0},
-      o: {duration: 200}
-    });
+    CONFIG.scheme === 'Muse' && image && pushToSequence(image);
 
-    subtitle && sequence.push({
-      e: subtitle,
-      p: {opacity: 1, top: 0},
-      o: {duration: 200}
-    });
+    title && pushToSequence(title);
 
-    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushImageToSequence();
+    subtitle && pushToSequence(subtitle);
+
+    toggle.length && pushToSequence(toggle);
+
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushToSequence(image);
 
     if (sequence.length > 0) {
       sequence[sequence.length - 1].o.complete = function() {