Refactor post-body style

layout/_partials/post/post-followme.njk

@@ -1,7 +1,7 @@
 {%- if theme.follow_me %}
 
   <div class="followme">
-    <p>{{ __('follow_me.welcome') }}</p>
+    <span>{{ __('follow_me.welcome') }}</span>
 
     <div class="social-list">
       {%- for name, value in theme.follow_me %}

layout/_partials/post/post-reward.njk

@@ -10,7 +10,7 @@
       {%- set translation = __('reward.' + name) if builtin.includes(name) else name %}
       <div>
         <img src="{{ url_for(image) }}" alt="{{ author }} {{ translation }}">
-        <p>{{ translation }}</p>
+        <span>{{ translation }}</span>
       </div>
     {%- endfor %}
 

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

@@ -1,4 +1,11 @@
 .post-body {
+  font-family: $font-family-posts;
+  word-wrap();
+
+  +desktop-large() {
+    font-size: $font-size-large;
+  }
+
   +desktop() {
     text-align: unquote(hexo-config('text_align.desktop'));
   }
@@ -35,6 +42,20 @@
     }
   }
 
+  .exturl .fa {
+    font-size: $font-size-small;
+    margin-left: 4px;
+  }
+
+  .image-caption, .figure .caption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -20px auto 15px;
+    text-align: center;
+  }
+
   iframe, img, video, embed {
     margin-bottom: 20px;
   }

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

@@ -1,7 +0,0 @@
-.post-copyright {
-  background: var(--card-bg-color);
-  border-left: 3px solid $red;
-  list-style: none;
-  margin: 2em 0 0;
-  padding: .5em 1em;
-}

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

@@ -1,10 +0,0 @@
-.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;
-  }
-}

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

@@ -1,25 +1,28 @@
+if (hexo-config('creative_commons.post')) {
+  .post-copyright {
+    list-style: none;
+    padding: .5em 1em;
+    post-card();
+  }
+}
+
 .followme {
-  align-items: center;
-  background: var(--card-bg-color);
-  border-left: 3px solid $red;
   color: $grey;
-  margin: 2em 0 1em 0;
   padding: 1em 1.5em;
-  flex-column();
+  text-align: center;
+  post-card();
 
   .social-list {
-    align-items: center;
     display: flex;
     flex-wrap: wrap;
-
+    justify-content: center;
-    +tablet-mobile() {
-      .social-item {
-        margin: .5em .75em;
-      }
-    }
 
     .social-item {
       margin: .5em 2em;
+
+      +tablet-mobile() {
+        margin: .5em .75em;
+      }
     }
 
     .social-link {
@@ -29,8 +32,6 @@
 
       .icon {
         font-size: 1.75em;
-        height: 1.75em;
-        width: 1.75em;
       }
 
       .label {

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

@@ -61,6 +61,11 @@
   }
 }
 
+.post-sticky-flag {
+  display: inline-block;
+  transform: rotate(30deg);
+}
+
 .posts-expand .post-meta {
   color: $grey-dark;
   font-family: $font-family-posts;

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

@@ -3,7 +3,7 @@
   display: flex;
   gap: 30px;
   justify-content: space-between;
-  margin-top: 15px;
+  margin-top: 1em;
   padding: 10px 5px 0;
 }
 

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

@@ -1,6 +1,6 @@
 .reward-container {
-  margin: 20px auto;
+  margin: $post-card-margin;
-  padding: 10px 0;
+  padding: 1em 0;
   text-align: center;
   width: 90%;
 
@@ -35,8 +35,12 @@
   div {
     display: inline-block;
 
+    span {
+      display: block;
+    }
+
     if (hexo-config('reward_settings.animation')) {
-      &:hover p {
+      &:hover span {
         animation: next-roll .1s infinite linear;
         // The animation may affect :hover of img in dark mode
         pointer-events: none;

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

@@ -1,12 +0,0 @@
-.rtl {
-  &.post-body {
-    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
-      direction: rtl;
-      font-family: UKIJ Ekran;
-    }
-  }
-
-  &.post-title {
-    font-family: UKIJ Ekran;
-  }
-}

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

@@ -1,29 +1,14 @@
-.post-body {
+.rtl {
-  font-family: $font-family-posts;
+  &.post-body {
-  word-wrap();
+    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
-
+      direction: rtl;
-  +desktop-large() {
+      font-family: UKIJ Ekran;
-    font-size: $font-size-large;
+    }
   }
 
-  .exturl .fa {
+  &.post-title {
-    font-size: $font-size-small;
+    font-family: UKIJ Ekran;
-    margin-left: 4px;
   }
-
-  .image-caption, .figure .caption {
-    color: $grey-dark;
-    font-size: $font-size-small;
-    font-weight: bold;
-    line-height: 1;
-    margin: -20px auto 15px;
-    text-align: center;
-  }
-}
-
-.post-sticky-flag {
-  display: inline-block;
-  transform: rotate(30deg);
 }
 
 .post-button {
@@ -31,6 +16,17 @@
   text-align: center;
 }
 
+.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 {
@@ -58,16 +54,12 @@
 }
 
 @import 'post-collapse';
-@import 'post-eof';
+@import 'post-body';
-@import 'post-expand';
 @import 'post-gallery';
 @import 'post-header';
 @import 'post-nav';
-@import 'post-rtl';
 @import 'post-tags';
 @import 'post-widgets';
 @import 'post-reward';
 
-@import 'post-copyright' if (hexo-config('creative_commons.post'));
-
 @import 'post-followme' if (hexo-config('follow_me'));

source/css/_mixins.styl

@@ -87,6 +87,12 @@ flex-column() {
   justify-content: center;
 }
 
+post-card() {
+  background: var(--card-bg-color);
+  border-left: 3px solid $red;
+  margin: $post-card-margin;
+}
+
 font-family-icons($icon = '') {
   if ($icon) {
     content: $icon;

source/css/_variables/base.styl

@@ -278,6 +278,7 @@ $b2t-bg-color                 = $black-deep;
 $post-eof-margin-top          = 80px; //  or 160px for more white space;
 $post-eof-margin-bottom       = 60px; //  or 120px for less white space;
 
+$post-card-margin             = 1em auto 0;
 
 // Note colors
 // --------------------------------------------------