From d088fd4e2f2c01ea22a20b9dc678e1aa2a9b4ffa Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 14 Aug 2020 00:03:24 +0800 Subject: [PATCH] Refactor post-body style --- layout/_partials/post/post-followme.njk | 2 +- layout/_partials/post/post-reward.njk | 2 +- .../post/{post-expand.styl => post-body.styl} | 21 ++++++++ .../components/post/post-copyright.styl | 7 --- .../css/_common/components/post/post-eof.styl | 10 ---- .../components/post/post-followme.styl | 29 +++++------ .../_common/components/post/post-header.styl | 5 ++ .../css/_common/components/post/post-nav.styl | 2 +- .../_common/components/post/post-reward.styl | 10 ++-- .../css/_common/components/post/post-rtl.styl | 12 ----- source/css/_common/components/post/post.styl | 48 ++++++++----------- source/css/_mixins.styl | 6 +++ source/css/_variables/base.styl | 1 + 13 files changed, 78 insertions(+), 77 deletions(-) rename source/css/_common/components/post/{post-expand.styl => post-body.styl} (73%) delete mode 100644 source/css/_common/components/post/post-copyright.styl delete mode 100644 source/css/_common/components/post/post-eof.styl delete mode 100644 source/css/_common/components/post/post-rtl.styl diff --git a/layout/_partials/post/post-followme.njk b/layout/_partials/post/post-followme.njk index f4f93bb..a3a9414 100644 --- a/layout/_partials/post/post-followme.njk +++ b/layout/_partials/post/post-followme.njk @@ -1,7 +1,7 @@ {%- if theme.follow_me %}
-

{{ __('follow_me.welcome') }}

+ {{ __('follow_me.welcome') }}
{%- for name, value in theme.follow_me %} diff --git a/layout/_partials/post/post-reward.njk b/layout/_partials/post/post-reward.njk index eb4dd0c..2db383c 100644 --- a/layout/_partials/post/post-reward.njk +++ b/layout/_partials/post/post-reward.njk @@ -10,7 +10,7 @@ {%- set translation = __('reward.' + name) if builtin.includes(name) else name %}
{{ author }} {{ translation }} -

{{ translation }}

+ {{ translation }}
{%- endfor %} diff --git a/source/css/_common/components/post/post-expand.styl b/source/css/_common/components/post/post-body.styl similarity index 73% rename from source/css/_common/components/post/post-expand.styl rename to source/css/_common/components/post/post-body.styl index 6e707d2..4c8094e 100644 --- a/source/css/_common/components/post/post-expand.styl +++ b/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; } diff --git a/source/css/_common/components/post/post-copyright.styl b/source/css/_common/components/post/post-copyright.styl deleted file mode 100644 index c3569f4..0000000 --- a/source/css/_common/components/post/post-copyright.styl +++ /dev/null @@ -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; -} diff --git a/source/css/_common/components/post/post-eof.styl b/source/css/_common/components/post/post-eof.styl deleted file mode 100644 index 54cdee3..0000000 --- a/source/css/_common/components/post/post-eof.styl +++ /dev/null @@ -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; - } -} diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl index ab51845..46c2e73 100644 --- a/source/css/_common/components/post/post-followme.styl +++ b/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; - - +tablet-mobile() { - .social-item { - margin: .5em .75em; - } - } + justify-content: center; .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 { diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl index 0ffa4e1..2dcc1e1 100644 --- a/source/css/_common/components/post/post-header.styl +++ b/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; diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl index 49cee2e..35aad9f 100644 --- a/source/css/_common/components/post/post-nav.styl +++ b/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; } diff --git a/source/css/_common/components/post/post-reward.styl b/source/css/_common/components/post/post-reward.styl index 154d6fa..8ba316b 100644 --- a/source/css/_common/components/post/post-reward.styl +++ b/source/css/_common/components/post/post-reward.styl @@ -1,6 +1,6 @@ .reward-container { - margin: 20px auto; - padding: 10px 0; + margin: $post-card-margin; + 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; diff --git a/source/css/_common/components/post/post-rtl.styl b/source/css/_common/components/post/post-rtl.styl deleted file mode 100644 index 3293863..0000000 --- a/source/css/_common/components/post/post-rtl.styl +++ /dev/null @@ -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; - } -} diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl index 4b0f138..02c872b 100644 --- a/source/css/_common/components/post/post.styl +++ b/source/css/_common/components/post/post.styl @@ -1,29 +1,14 @@ -.post-body { - font-family: $font-family-posts; - word-wrap(); - - +desktop-large() { - font-size: $font-size-large; +.rtl { + &.post-body { + p, a, h1, h2, h3, h4, h5, h6, li, ul, ol { + direction: rtl; + font-family: UKIJ Ekran; + } } - .exturl .fa { - font-size: $font-size-small; - margin-left: 4px; + &.post-title { + font-family: UKIJ Ekran; } - - .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-expand'; +@import 'post-body'; @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')); diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index a511c38..7c96c0a 100644 --- a/source/css/_mixins.styl +++ b/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; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 00d3289..6db4a24 100644 --- a/source/css/_variables/base.styl +++ b/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 // --------------------------------------------------