Refactor post-footer using flex layout

layout/_macro/post.njk

@@ -201,7 +201,10 @@
       {{ partial('_partials/post/post-related.njk') }}
     {%- endif %}
 
-    {%- if not is_index %}
+    <footer class="post-footer">
+      {%- if is_index %}
+        <div class="post-eof"></div>
+      {% else %}
         {{- next_inject('postBodyEnd') }}
 
         {%- if post.reward_settings.enable %}
@@ -216,7 +219,6 @@
           {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
         {%- endif %}
 
-      <footer class="post-footer">
         {%- if post.tags and post.tags.length %}
           {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}
           <div class="post-tags">
@@ -248,12 +250,9 @@
             </div>
           </div>
         {%- endif %}
-      </footer>
+
-    {% else %}
-      <footer class="post-footer">
-        <div class="post-eof"></div>
-      </footer>
       {%- endif %}
+    </footer>
   </article>
   {######################}
   {### END POST BLOCK ###}

layout/_partials/post/post-copyright.njk

@@ -1,8 +1,8 @@
 {%- set ccIcon = '<i class="fab fa-fw fa-creative-commons"></i>' %}
 {%- set ccText = theme.creative_commons.license | upper %}
 
-<div>
+<div class="post-copyright">
-<ul class="post-copyright">
+<ul>
   <li class="post-copyright-author">
     <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
     {{- page.author or author }}

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

@@ -0,0 +1,41 @@
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-footer through the `order` CSS property
+// Fix issue #16
+// To do: use `gap` instead of `margin-bottom`
+// See https://caniuse.com/#feat=flexbox-gap
+.post-footer {
+  flex-column();
+}
+
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}
+
+if (hexo-config('creative_commons.post')) {
+  .post-copyright ul {
+    list-style: none;
+    padding: .5em 1em;
+    post-card();
+  }
+}
+
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

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

@@ -1,13 +0,0 @@
-.post-tags {
-  margin-top: 40px;
-  text-align: center;
-
-  a {
-    display: inline-block;
-    font-size: $font-size-smaller;
-
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}

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

@@ -16,25 +16,6 @@
   text-align: center;
 }
 
-if (hexo-config('creative_commons.post')) {
-  .post-copyright {
-    list-style: none;
-    padding: .5em 1em;
-    post-card();
-  }
-}
-
-.post-eof {
-  background: $grey-light;
-  height: 1px;
-  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
-  width: 8%;
-
-  .post-block:last-of-type & {
-    display: none;
-  }
-}
-
 .use-motion {
   if (hexo-config('motion.transition.post_block')) {
     .post-block, .pagination, .comments {
@@ -66,7 +47,7 @@ if (hexo-config('creative_commons.post')) {
 @import 'post-gallery';
 @import 'post-header';
 @import 'post-nav';
-@import 'post-tags';
+@import 'post-footer';
 @import 'post-widgets';
 @import 'post-reward';