Refactor layout (#31)

layout/_layout.njk

@@ -13,25 +13,23 @@
   <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
     <div class="headband"></div>
 
+    <main class="main">
       <header class="header" itemscope itemtype="http://schema.org/WPHeader">
         <div class="header-inner">{% include '_partials/header/index.njk' %}</div>
+        {%- if theme.sidebar.display !== 'remove' %}
+          {% block sidebar %}{% endblock %}
+        {%- endif %}
       </header>
 
       {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}
 
-    <main class="main">
       <div class="main-inner">
-        <div class="content-wrap">
         {% include '_partials/header/sub-menu.njk' %}
         <div class="content {% block class %}{% endblock %}">
           {% block content %}{% endblock %}
         </div>
         {% include '_partials/comments.njk' %}
       </div>
-        {%- if theme.sidebar.display !== 'remove' %}
-          {% block sidebar %}{% endblock %}
-        {%- endif %}
-      </div>
     </main>
 
     <footer class="footer">

layout/_scripts/pjax.njk

@@ -3,7 +3,7 @@ var pjax = new Pjax({
   selectors: [
     'head title',
     '#page-configurations',
-    '.content-wrap',
+    '.main-inner',
     '.post-toc-wrap',
     '.languages',
     '#pjax'

source/css/_common/components/post/post-expand.styl

@@ -1,7 +1,3 @@
-.content {
-  padding-top: 40px;
-}
-
 .post-body {
   +desktop() {
     text-align: unquote(hexo-config('text_align.desktop'));
@@ -39,7 +35,7 @@
     }
   }
 
-  iframe, img, video {
+  iframe, img, video, embed {
     margin-bottom: 20px;
   }
 

source/css/_common/outline/header/header.styl

@@ -5,16 +5,7 @@
 }
 
 .header-inner {
-  margin: 0 auto;
+  main-container();
-  width: $content-desktop;
-
-  +desktop-large() {
-    width: $content-desktop-large;
-  }
-
-  +desktop-largest() {
-    width: $content-desktop-largest;
-  }
 }
 
 .site-brand-container {

source/css/_common/outline/mobile.styl

@@ -7,7 +7,7 @@
 
 +mobile-small() {
   // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini).
-  .content-wrap {
+  .main-inner {
     padding: initial !important;
   }
 

source/css/_common/outline/outline.styl

@@ -3,25 +3,6 @@
   position: relative;
 }
 
-.main-inner {
-  margin: 0 auto;
-  width: $content-desktop;
-
-  +desktop-large() {
-    width: $content-desktop-large;
-  }
-
-  +desktop-largest() {
-    width: $content-desktop-largest;
-  }
-}
-
-.content-wrap {
-  +mobile() {
-    padding: 0 20px;
-  }
-}
-
 @import 'header';
 @import 'sidebar';
 @import 'footer';

source/css/_common/scaffolding/base.styl

@@ -49,7 +49,7 @@ a, span.exturl {
   cursor: pointer;
 }
 
-iframe, img, video {
+iframe, img, video, embed {
   display: block;
   margin-left: auto;
   margin-right: auto;

source/css/_mixins.styl

@@ -96,3 +96,16 @@ font-family-icons($icon = '') {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
 }
+
+main-container() {
+  margin: 0 auto;
+  width: $content-desktop;
+
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}

source/css/_schemes/Gemini/index.styl

@@ -27,7 +27,7 @@ $use-seo = hexo-config('seo');
 // Desktop layout styles.
 // ==================================================
 // Post blocks.
-.content-wrap {
+.main-inner {
   background: initial;
   box-shadow: initial;
   padding: initial;
@@ -139,7 +139,7 @@ $use-seo = hexo-config('seo');
 // ==================================================
 +tablet() {
   // Posts in blocks.
-  .content-wrap {
+  .main-inner {
     padding: $content-tablet-padding;
   }
 
@@ -180,7 +180,7 @@ $use-seo = hexo-config('seo');
 // ==================================================
 +mobile() {
   // Posts in blocks.
-  .content-wrap {
+  .main-inner {
     padding: $content-mobile-padding;
   }
 

source/css/_schemes/Mist/_header.styl

@@ -12,7 +12,6 @@
   +mobile() {
     display: block;
     padding: 10px 0;
-    width: auto;
   }
 }
 

source/css/_schemes/Mist/_layout.styl

@@ -19,10 +19,6 @@ hr {
 // --------------------------------------------------
 .main-inner {
   padding-bottom: 80px;
-
-  +mobile() {
-    width: auto;
-  }
 }
 
 .content {
@@ -57,6 +53,5 @@ hr {
 
   +mobile() {
     text-align: center;
-    width: auto;
   }
 }

source/css/_schemes/Mist/index.styl

@@ -5,5 +5,6 @@
 @import '_header';
 @import '_menu';
 @import '_posts-expand';
+@import '../Muse/_layout';
 @import '../Muse/_sidebar';
 @import '../Muse/_sub-menu';

source/css/_schemes/Muse/_header.styl

@@ -8,3 +8,23 @@
 .brand {
   background: var(--btn-default-bg);
 }
+
+.header-inner {
+  padding-top: 100px;
+
+  +mobile() {
+    padding-top: 50px;
+  }
+}
+
+.main-inner {
+  padding-bottom: 60px;
+}
+
+.content {
+  padding-top: 70px;
+
+  +mobile() {
+    padding-top: 35px;
+  }
+}

source/css/_schemes/Muse/_layout.styl

@@ -1,30 +1,14 @@
+.main-inner {
+  main-container();
+
+  +mobile() {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
 .header-inner, .main-inner, .footer-inner {
   +mobile() {
     width: auto;
   }
 }
-
-.header-inner {
-  padding-top: 100px;
-
-  +mobile() {
-    padding-top: 50px;
-  }
-}
-
-.main-inner {
-  padding-bottom: 60px;
-}
-
-.content {
-  padding-top: 70px;
-
-  +mobile() {
-    padding-top: 35px;
-  }
-}
-
-embed {
-  display: block;
-  margin: 0 auto 25px auto;
-}

source/css/_schemes/Pisces/_layout.styl

@@ -1,14 +1,11 @@
 .header {
-  margin: 0 auto;
+  // Make sure that .header and .main-inner are the same height
-  position: relative;
+  // Required for .sidebar `position: sticky;`
-  width: $content-desktop;
+  align-self: stretch;
+  width: $sidebar-desktop;
 
   +desktop-large() {
-    width: $content-desktop-large;
+    width: $sidebar-desktop;
-  }
-
-  +desktop-largest() {
-    width: $content-desktop-largest;
   }
 
   +tablet-mobile() {
@@ -22,7 +19,6 @@
   box-shadow: $box-shadow-inner;
   overflow: hidden;
   padding: 0;
-  position: absolute;
   top: 0;
   width: $sidebar-desktop;
 
@@ -37,20 +33,23 @@
   }
 }
 
-.main-inner {
+.main {
   align-items: flex-start;
   display: flex;
   justify-content: space-between;
+  main-container();
 
-  if (hexo-config('sidebar.position') != 'right') {
+  if (hexo-config('sidebar.position') == 'right') {
     flex-direction: row-reverse;
   }
+
   +tablet-mobile() {
+    display: block;
     width: auto;
   }
 }
 
-.content-wrap {
+.main-inner {
   align-self: stretch;
   background: var(--content-bg-color);
   border-radius: $border-radius-inner;
@@ -66,6 +65,10 @@
   }
 }
 
+.content {
+  padding-top: 40px;
+}
+
 if (hexo-config('sidebar.position') == 'right') {
   .header-inner {
     right: 0;

source/css/_schemes/Pisces/_sidebar.styl

@@ -1,11 +1,9 @@
 .sidebar {
-  // Make sure that .content-wrap and .sidebar are the same height
+  bottom: initial;
-  // Required for .sidebar-inner `position: sticky;`
-  align-self: stretch;
-  background: initial;
   box-shadow: none;
-  position: static;
+  margin-top: $sidebar-offset;
-  width: $sidebar-desktop;
+  position: sticky;
+  top: $sidebar-offset;
 
   +tablet-mobile() {
     display: none;
@@ -22,9 +20,6 @@
   box-shadow: $box-shadow;
   box-sizing: border-box;
   color: var(--text-color);
-  position: sticky;
-  top: $sidebar-offset;
-  width: $sidebar-desktop;
 
   if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
     opacity: 0;
@@ -97,10 +92,6 @@
   if (hexo-config('links_settings.layout') == 'inline') {
     display: inline-block;
     sidebar-inline-links-item();
-
-    if (!hexo-config('social_icons.icons_only')) {
-      width: unset;
-    }
   }
 }
 

source/js/next-boot.js

@@ -71,15 +71,6 @@ NexT.boot.registerEvents = function() {
       target && target.click();
     }
   });
-
-  if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
-    NexT.utils.setAffixParam();
-    window.matchMedia('(min-width: 992px)').addListener(event => {
-      if (event.matches) {
-        NexT.utils.setAffixParam();
-      }
-    });
-  }
 };
 
 NexT.boot.refresh = function() {

source/js/utils.js

@@ -354,13 +354,6 @@ NexT.utils = {
     }
   },
 
-  setAffixParam: function() {
-    const sidebarOffset = CONFIG.sidebar.offset || 12;
-    const headerOffset = document.querySelector('.header-inner').offsetHeight;
-
-    document.querySelector('.sidebar-inner').style.marginTop = headerOffset + sidebarOffset + 'px';
-  },
-
   getScript: function(url, callback, condition) {
     if (condition) {
       callback();