ui: use css variable setting post title align

XPoet · Dec 1, 2023 · 71c3150 · 71c3150
1 parent 98cda7a
commit 71c3150
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
@@ -66,6 +66,7 @@
   // ==============================================================================================
   // post page
   // ==============================================================================================
+  --post-title-align left         // Option values: left | center | right
   --post-author-avatar block      // Option values: none | block
   --post-create-datetime flex     // Option values: none | flex
   --post-update-datetime flex     // Option values: none | flex

diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
@@ -3,7 +3,7 @@
 $avatar-width = 3.2rem
 $arrow-icon-width = 1rem
 $post-nav-max-width = 14rem
-$article-title-font-size = 1.6rem
+$post-title-font-size = 1.6rem
 $toc-container-width = 15rem
 $spacer-padding = 2rem
 
@@ -65,27 +65,27 @@ $spacer-padding = 2rem
       border-top-left-radius var(--box-border-radius)
       border-top-right-radius var(--box-border-radius)
 
-
       +keep-tablet() {
         height 12.8rem
         padding-top $spacer-padding * 0.8
         padding-right $spacer-padding  * 0.8
 
         .cover-article-title {
           padding $spacer-padding * 0.5 * 0.8 $spacer-padding * 0.8 !important
-          font-size $article-title-font-size * 0.9 !important
+          font-size $post-title-font-size * 0.9 !important
           line-height 1.5 !important
         }
       }
 
+
       +keep-mobile() {
         height 11.8rem
         padding-top $spacer-padding * 0.6
         padding-right $spacer-padding  * 0.6
 
         .cover-article-title {
           padding $spacer-padding * 0.5 * 0.6 $spacer-padding * 0.6 !important
-          font-size $article-title-font-size * 0.8 !important
+          font-size $post-title-font-size * 0.8 !important
           line-height 1.4 !important
         }
       }
@@ -101,7 +101,7 @@ $spacer-padding = 2rem
         overflow-y auto
         color var(--text-color-2)
         font-weight 600
-        font-size $article-title-font-size * 1.1
+        font-size $post-title-font-size
         line-height 1.6
         background var(--background-color-1-transparent)
         border-top-right-radius var(--box-border-radius)
@@ -136,15 +136,16 @@ $spacer-padding = 2rem
       .article-title {
         color var(--text-color-2)
         font-weight 600
-        font-size $article-title-font-size
+        font-size $post-title-font-size
         line-height 1.6
+        text-align var(--post-title-align)
 
         +keep-tablet() {
-          font-size $article-title-font-size * 0.9
+          font-size $post-title-font-size * 0.9
         }
 
         +keep-mobile() {
-          font-size $article-title-font-size * 0.8
+          font-size $post-title-font-size * 0.8
         }
       }
 
@@ -214,6 +215,7 @@ $spacer-padding = 2rem
       .article-header-meta-info {
         margin-top 1rem
         +keep-tablet() {
+          margin-top 0.9rem
           transform scale(0.9)
           transform-origin left top
         }
@@ -289,6 +291,7 @@ $spacer-padding = 2rem
         }
       }
 
+
       .article-nav {
         height 2.8rem
         margin-top var(--components-spacing)
@@ -392,6 +395,7 @@ $spacer-padding = 2rem
     }
   }
 
+
   .hbe-container {
 
     .hbe-input-field {