Refactor sidebar-panel using flex layout

_config.yml

@@ -495,7 +495,7 @@ baidu_push: false
 # Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
 math:
   # Default (false) will load mathjax / katex script on demand.
-  # That is it only render those page which has `mathjax: true` in Front-matter.
+  # That is it only render those page which has `mathjax: true` in front-matter.
   # If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
   every_page: false
 

layout/_partials/sidebar/site-overview.njk

@@ -1,4 +1,4 @@
-<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
+<div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
   {%- if theme.avatar.url %}
     <img class="site-author-image" itemprop="image" alt="{{ author }}"
       src="{{ url_for(theme.avatar.url) }}">
@@ -8,7 +8,7 @@
 </div>
 
 {%- if theme.site_state %}
-<div class="site-state-wrap animated">
+<div class="site-state-wrap site-overview-item animated">
   <nav class="site-state">
     {%- if config.archive_dir != '/' and site.posts.length > 0 %}
       <div class="site-state-item site-state-posts">
@@ -61,7 +61,7 @@
 {%- endif %}
 
 {%- if theme.chat.enable and theme.chat.service !== '' %}
-  <div class="sidebar-button animated">
+  <div class="sidebar-button site-overview-item animated">
   {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
     <a onclick="Chatra('openChat', true);">
   {%- endif %}
@@ -75,7 +75,7 @@
 {%- endif %}
 
 {%- if theme.social %}
-  <div class="links-of-author animated">
+  <div class="links-of-author site-overview-item animated">
     {%- for name, link in theme.social %}
       <span class="links-of-author-item">
         {%- set sidebarURL = link.split('||')[0] | trim %}
@@ -88,7 +88,7 @@
 {%- endif %}
 
 {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
-  <div class="cc-license animated" itemprop="license">
+  <div class="cc-license site-overview-item animated" itemprop="license">
   {%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %}
     {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
   </div>
@@ -96,7 +96,7 @@
 
 {# Blogroll #}
 {%- if theme.links %}
-  <div class="links-of-blogroll animated">
+  <div class="links-of-blogroll site-overview-item animated">
     <div class="links-of-blogroll-title">
       {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{%- endif %}
       {{ theme.links_settings.title }}

source/css/_common/outline/sidebar/sidebar-blogroll.styl

@@ -1,6 +1,5 @@
 .links-of-blogroll {
   font-size: $font-size-smaller;
-  margin-top: 10px;
 }
 
 .links-of-blogroll-title {

source/css/_common/outline/sidebar/sidebar-button.styl

@@ -1,5 +1,7 @@
-.sidebar-button {
-  margin-top: 15px;
+.sidebar .sidebar-button {
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
 
   a {
     border: 1px solid $orange;

source/css/_common/outline/sidebar/sidebar-nav.styl

@@ -43,5 +43,7 @@
 }
 
 .sidebar-toc-active .post-toc-wrap, .sidebar-overview-active .site-overview-wrap {
-  display: block;
+  // Flexbox layout makes it possible to reorder the child
+  // elements of .site-overview-item through the `order` CSS property
+  flex-column();
 }

source/css/_common/outline/sidebar/sidebar.styl

@@ -4,9 +4,11 @@
   text-align: center;
 }
 
-.cc-license {
+.site-overview-item:not(:first-child) {
   margin-top: 10px;
+}
 
+.cc-license {
   .cc-opacity {
     border-bottom: none;
     opacity: .7;

source/css/_common/outline/sidebar/site-state.styl

@@ -1,7 +1,6 @@
 .site-state {
   flex-wrap();
   line-height: 1.4;
-  margin-top: 10px;
 }
 
 .site-state-item {

source/css/_schemes/Muse/_sidebar.styl

@@ -52,7 +52,9 @@ if (hexo-config('sidebar.position') == 'right') {
 }
 
 .links-of-author {
-  margin-top: 15px;
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
 
   a, span.exturl {
     border-bottom-color: $black-light;

source/css/_schemes/Pisces/_sidebar.styl

@@ -30,10 +30,9 @@
   padding: 0 10px;
 }
 
-.sidebar-button {
+.sidebar .sidebar-button {
   border-bottom: 1px dotted $grey-light;
   border-top: 1px dotted $grey-light;
-  margin-top: 10px;
 
   a {
     border: 0;
@@ -53,7 +52,6 @@
 }
 
 .links-of-author {
-  margin-top: 10px;
   flex-wrap();
 }