Refactor post_meta_order

_config.yml

@@ -582,7 +582,6 @@ disqus:
   enable: false
   shortname:
   count: true
-  #post_meta_order: 0
 
 # DisqusJS
 # Alternative Disqus - Render comment component using Disqus API.
@@ -603,7 +602,6 @@ changyan:
   enable: false
   appid:
   appkey:
-  #post_meta_order: 0
 
 # Valine
 # For more information: https://valine.js.org, https://github.com/xCss/Valine
@@ -622,7 +620,6 @@ valine:
   serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
   enableQQ: false # Whether to enable the Nickname box to automatically get QQ Nickname and QQ Avatar
   requiredFields: [] # Set required fields: [nick] | [nick, mail]
-  #post_meta_order: 0
 
 # LiveRe comments system
 # You can get your uid from https://livere.com/insight/myCode (General web site)

layout/_macro/post-collapse.njk

@@ -13,7 +13,7 @@
 
   <article itemscope itemtype="http://schema.org/Article">
     <header class="post-header">
-      <div class="post-meta">
+      <div class="post-meta-container">
         <time itemprop="dateCreated"
               datetime="{{ moment(post.date).format() }}"
               content="{{ date(post.date, config.date_format) }}">

layout/_macro/post.njk

@@ -43,8 +43,8 @@
           {%- endif %}
         </{%- if is_index %}h2{% else %}h1{%- endif %}>
 
-        <div class="post-meta">
+        <div class="post-meta-container">
-
+          <div class="post-meta">
           {%- set date_diff = date(post.date) != date(post.updated) %}
           {%- set time_diff = time(post.date) != time(post.updated) %}
 
@@ -149,11 +149,11 @@
               <span>{{ symbolsTime(post, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
             </span>
           {%- endif %}
+          </div>
 
           {%- if post.description and (not theme.excerpt_description or not is_index) %}
             <div class="post-description">{{ post.description }}</div>
           {%- endif %}
-
         </div>
       </header>
     {%- endif %}

layout/_partials/page/page-header.njk

@@ -5,7 +5,7 @@
   {{- post_edit(page.source) }}
 </h1>
 
-<div class="post-meta">
+<div class="post-meta-container">
   {%- if page.description %}
     <div class="post-description">{{ page.description }}</div>
   {%- endif %}

scripts/filters/comment/changyan.js

@@ -40,6 +40,6 @@ hexo.extend.filter.register('theme_inject', injects => {
     {% endif %}
   </span>
   {% endif %}
-  `, {}, {}, theme.changyan.post_meta_order);
+  `, {}, {});
 
 });

scripts/filters/comment/disqus.js

@@ -36,6 +36,6 @@ hexo.extend.filter.register('theme_inject', injects => {
     </a>
   </span>
   {% endif %}
-  `, {}, {}, theme.disqus.post_meta_order);
+  `, {}, {});
 
 });

scripts/filters/comment/valine.js

@@ -30,6 +30,6 @@ hexo.extend.filter.register('theme_inject', injects => {
     </a>
   </span>
   {% endif %}
-  `, {}, {}, theme.valine.post_meta_order);
+  `, {}, {});
 
 });

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

@@ -76,7 +76,7 @@
     }
   }
 
-  .post-meta {
+  .post-meta-container {
     display: inline;
     font-size: $font-size-smallest;
     margin-right: 10px;

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

@@ -5,9 +5,7 @@
   post-card();
 
   .social-list {
-    display: flex;
+    flex-wrap();
-    flex-wrap: wrap;
-    justify-content: center;
 
     .social-item {
       margin: .5em 2em;

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

@@ -36,7 +36,6 @@
   color: var(--link-color);
   display: inline-block;
   position: relative;
-  vertical-align: top;
 
   &::before {
     background: var(--link-color);
@@ -66,7 +65,7 @@
   transform: rotate(30deg);
 }
 
-.posts-expand .post-meta {
+.posts-expand .post-meta-container {
   color: $grey-dark;
   font-family: $font-family-posts;
   font-size: $font-size-smallest;
@@ -83,6 +82,12 @@
   }
 }
 
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-meta through the `order` CSS property
+.post-meta {
+  flex-wrap();
+}
+
 // .post-meta-item exists in .post-meta and footer
 .post-meta-item + .post-meta-item::before {
   content: '|';

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

@@ -1,7 +1,5 @@
 .site-state {
-  display: flex;
+  flex-wrap();
-  flex-wrap: wrap;
-  justify-content: center;
   line-height: 1.4;
   margin-top: 10px;
 }

source/css/_common/scaffolding/tables.styl

@@ -21,9 +21,7 @@ tbody tr {
 }
 
 caption, th, td {
-  font-weight: normal;
   padding: 8px;
-  vertical-align: middle;
 }
 
 th, td {

source/css/_mixins.styl

@@ -81,6 +81,12 @@ sidebar-inline-links-item() {
   }
 }
 
+flex-wrap() {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 flex-column() {
   display: flex;
   flex-direction: column;

source/css/_schemes/Mist/_posts-expand.styl

@@ -10,7 +10,7 @@
       }
     }
 
-    .post-meta {
+    .post-meta-container {
       margin-top: 5px;
     }
   }

source/css/_schemes/Pisces/_menu.styl

@@ -28,7 +28,6 @@
     float: right;
     padding: 2px 5px;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
-    vertical-align: middle;
   }
 }
 

source/css/_schemes/Pisces/_sidebar.styl

@@ -53,10 +53,8 @@
 }
 
 .links-of-author {
-  display: flex;
-  flex-wrap: wrap;
   margin-top: 10px;
-  justify-content: center;
+  flex-wrap();
 }
 
 .links-of-author-item {