From 00f5db6706862fac8060d0d62ceb33107d72f36c Mon Sep 17 00:00:00 2001
From: liuyib <1656081615@qq.com>
Date: Sat, 7 Sep 2019 14:37:23 +0800
Subject: [PATCH] refactor: Refactor some component style
---
layout/_layout.pug | 9 +-
layout/_partials/analytics/busuanzi.pug | 10 +-
layout/_partials/config.pug | 14 +-
layout/_partials/post/post-list.pug | 4 +-
layout/_partials/search/localsearch.pug | 2 +-
layout/_partials/widgets/back2top.pug | 8 +-
layout/_partials/widgets/comments.pug | 18 +-
layout/_partials/widgets/copyright.pug | 18 +-
layout/_partials/widgets/loading-bar.pug | 2 +-
layout/_partials/widgets/reward.pug | 19 +-
layout/_partials/widgets/sticky-top.pug | 6 +-
layout/post.pug | 54 ++--
scripts/filters/external-link.js | 4 +-
.../_common/components/highlight/diff.styl | 21 +-
.../components/highlight/highlight.styl | 288 ++++++++++--------
.../_common/components/highlight/index.styl | 6 +-
.../_common/components/highlight/theme.styl | 113 +++----
source/css/_common/components/index.styl | 3 +-
source/css/_common/components/pages/page.styl | 6 +-
.../css/_common/components/plugins/note.styl | 8 +-
source/css/_common/components/post/index.styl | 1 +
.../_common/components/post/post-list.styl | 51 ++--
.../{widgets => post}/post-timeline.styl | 0
source/css/_common/components/post/post.styl | 153 ++++++----
.../css/_common/components/post/reward.styl | 40 ---
.../_common/components/search/algolia.styl | 117 +++----
.../css/_common/components/search/common.styl | 130 ++++----
.../css/_common/components/search/index.styl | 6 +-
.../components/search/localsearch.styl | 98 +++---
.../_common/components/widgets/back2top.styl | 53 ++--
.../_common/components/widgets/comments.styl | 43 ++-
.../_common/components/widgets/copyright.styl | 20 --
.../_common/components/widgets/fancybox.styl | 1 -
.../css/_common/components/widgets/index.styl | 11 +-
.../components/widgets/loading-bar.styl | 50 +--
.../_common/components/widgets/reward.styl | 50 +++
source/css/_common/outline/macro.styl | 115 ++++---
source/css/_common/scaffolding/base.styl | 13 +-
source/css/_common/scaffolding/utils.styl | 22 +-
source/css/_mixins/index.styl | 6 +
source/css/_variables/index.styl | 74 ++---
41 files changed, 904 insertions(+), 763 deletions(-)
rename source/css/_common/components/{widgets => post}/post-timeline.styl (100%)
delete mode 100644 source/css/_common/components/post/reward.styl
delete mode 100644 source/css/_common/components/widgets/copyright.styl
create mode 100644 source/css/_common/components/widgets/reward.styl
diff --git a/layout/_layout.pug b/layout/_layout.pug
index 8edd979..e67d3c4 100644
--- a/layout/_layout.pug
+++ b/layout/_layout.pug
@@ -14,6 +14,9 @@ html(lang=config.language)
div.content-inner(class=`${is_home() ? 'content-home' : ''}`)
block content
+ if page.comments
+ include ./_partials/widgets/comments.pug
+
aside#sidebar.sidebar
div.sidebar-inner
!= partial('./_partials/sidebar/sidebar.pug', null, { cache: theme.cache })
@@ -24,8 +27,10 @@ html(lang=config.language)
div.footer-inner
!= partial('./_partials/footer/footer.pug', null, { cache: theme.cache })
- //- if theme.back2top.enable
- //- include ../_components/back2top.pug
+ include ./_partials/widgets/loading-bar.pug
+
+ if theme.back2top.enable
+ include ./_partials/widgets/back2top.pug
//- include ../_components/search/index.pug
diff --git a/layout/_partials/analytics/busuanzi.pug b/layout/_partials/analytics/busuanzi.pug
index 87797a4..a326aa6 100644
--- a/layout/_partials/analytics/busuanzi.pug
+++ b/layout/_partials/analytics/busuanzi.pug
@@ -1,9 +1,11 @@
+- var fa_prefix = theme.fa_prefix || 'fa'
+
div.busuanzi
if theme.busuanzi.site.uv.enable
span.busuanzi-uv
- i.fa.fa-user
+ i(class=`${fa_prefix} fa-user`)
if !theme.busuanzi.site.icon_only
- span= _p("footer.uv") + " "
+ span= __("footer.uv") + " "
span#busuanzi_value_site_uv
if theme.busuanzi.site.uv.enable && theme.busuanzi.site.pv.enable
@@ -11,9 +13,9 @@ div.busuanzi
if theme.busuanzi.site.pv.enable
span.busuanzi-pv
- i.fa.fa-eye
+ i(class=`${fa_prefix} fa-eye`)
if !theme.busuanzi.site.icon_only
- span= _p("footer.pv") + " "
+ span= __("footer.pv") + " "
span#busuanzi_value_site_pv
include ../../_third-party/analytics/busuanzi.pug
diff --git a/layout/_partials/config.pug b/layout/_partials/config.pug
index 541c339..7e4ccd0 100644
--- a/layout/_partials/config.pug
+++ b/layout/_partials/config.pug
@@ -8,9 +8,9 @@
indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
hits: theme.algolia_search.hits,
languages: {
- input_placeholder: _p("algolia_search.input_placeholder"),
- hits_empty: _p("algolia_search.hits_empty"),
- hits_stats: _p("algolia_search.hits_stats")
+ input_placeholder: __("algolia_search.input_placeholder"),
+ hits_empty: __("algolia_search.hits_empty"),
+ hits_stats: __("algolia_search.hits_stats")
}
});
}
@@ -61,10 +61,10 @@
});
var prompt = JSON.stringify({
- copy_success: _p("prompt.copy.success"),
- copy_error: _p("prompt.copy.error"),
- creative_commons: _p("prompt.creative_commons"),
- copy_button: _p("prompt.copy_button")
+ copy_success: __("prompt.copy.success"),
+ copy_error: __("prompt.copy.error"),
+ creative_commons: __("prompt.creative_commons"),
+ copy_button: __("prompt.copy_button")
});
script.
diff --git a/layout/_partials/post/post-list.pug b/layout/_partials/post/post-list.pug
index 792ccfa..87e9eb0 100644
--- a/layout/_partials/post/post-list.pug
+++ b/layout/_partials/post/post-list.pug
@@ -1,4 +1,4 @@
-section.posts
+section.post-list
include ../../_mixins/post-header.pug
//- include ../_mixins/gallery.pug
@@ -28,5 +28,5 @@ section.posts
if !post.link && isExcerpt
div.post-body-more
- a.post-body-more__a(href=url_for(post.path))= _p("post.read_more") + " »"
+ a.post-body-more__a(href=url_for(post.path))= __("post.read_more") + " »"
- })
diff --git a/layout/_partials/search/localsearch.pug b/layout/_partials/search/localsearch.pug
index 95f8b01..a589327 100644
--- a/layout/_partials/search/localsearch.pug
+++ b/layout/_partials/search/localsearch.pug
@@ -3,6 +3,6 @@ div.search-mask
div.search-popup
span.search-close
div.search-input
- input(placeholder= _p("local_search.input_placeholder"))
+ input(placeholder= __("local_search.input_placeholder"))
div.search-results
diff --git a/layout/_partials/widgets/back2top.pug b/layout/_partials/widgets/back2top.pug
index 6c4e047..559f1e3 100644
--- a/layout/_partials/widgets/back2top.pug
+++ b/layout/_partials/widgets/back2top.pug
@@ -1,3 +1,5 @@
-div#back-top
- div(data-popover=_p("back2top") data-popover-pos="up").back-top-inner
- i(class=`fa fa-${theme.back2top.icon.name}`)
+- var fa_prefix = theme.fa_prefix || 'fa'
+
+div#back2top.back2top
+ div(data-popover=__("back2top") data-popover-pos="up")
+ i.back2top-icon(class=`${fa_prefix} fa-${theme.back2top.icon.name}`)
diff --git a/layout/_partials/widgets/comments.pug b/layout/_partials/widgets/comments.pug
index 00a5d51..220f2e3 100644
--- a/layout/_partials/widgets/comments.pug
+++ b/layout/_partials/widgets/comments.pug
@@ -1,11 +1,15 @@
if theme.disqus && theme.disqus.enable
- div#comments.comments.content
- div#disqus_thread
+ div#comments.comments
+ div.comment-inner
+ div#disqus_thread
else if theme.valine && theme.valine.enable
- div#comments.comments.content
+ div#comments.comments
+ div.comment-inner
else if theme.gitalk && theme.gitalk.enable
- div#comments.comments.content
- div#gitalk-container
+ div#comments.comments
+ div.comment-inner
+ div#gitalk-container
else if theme.livere && theme.livere.enable
- div#comments.comments.content
- div#lv-container(data-id="city" data-uid=theme.livere.uid)
+ div#comments.comments
+ div.comment-inner
+ div#lv-container(data-id="city" data-uid=theme.livere.uid)
diff --git a/layout/_partials/widgets/copyright.pug b/layout/_partials/widgets/copyright.pug
index b347283..f19c8c2 100644
--- a/layout/_partials/widgets/copyright.pug
+++ b/layout/_partials/widgets/copyright.pug
@@ -5,17 +5,17 @@
var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
div.post-copyright
- div.copyright-author
- span.copyright-name!= _p("post.copyright.author") + ":"
- span.copyright-value
+ div.post-copyright-author
+ span.post-copyright-author-name!= __("post.copyright.author") + ": "
+ span.post-copyright-author-value
if (config.url && config.author)
a(href=config.url)= config.author
- div.copyright-link
- span.copyright-name!= _p("post.copyright.link") + ":"
- span.copyright-value
+ div.post-copyright-link
+ span.post-copyright-link-name!= __("post.copyright.link") + ": "
+ span.post-copyright-link-value
if (config.url)
a(href=page.permalink)= page.permalink
- div.copyright-notice
- span.copyright-name!= _p("post.copyright.license_title") + ":"
- span.copyright-value
+ div.post-copyright-notice
+ span.post-copyright-notice-name!= __("post.copyright.license_title") + ": "
+ span.post-copyright-notice-value
!= _p("post.copyright.license_content", ccURL, ccLicense.toUpperCase())
diff --git a/layout/_partials/widgets/loading-bar.pug b/layout/_partials/widgets/loading-bar.pug
index 4c8edff..4497426 100644
--- a/layout/_partials/widgets/loading-bar.pug
+++ b/layout/_partials/widgets/loading-bar.pug
@@ -1,2 +1,2 @@
-div.loading-bar
+div#loading-bar.loading-bar
div.progress
diff --git a/layout/_partials/widgets/reward.pug b/layout/_partials/widgets/reward.pug
index 0051084..be55075 100644
--- a/layout/_partials/widgets/reward.pug
+++ b/layout/_partials/widgets/reward.pug
@@ -1,10 +1,9 @@
-div#reward
- div.reward-button!= _p("reward.btn_text")
- div.reward-qr-wrapper
- div.reward-qr
- span.reward-qr-alipay
- img(src=theme.reward.alipay)
- div.reward-qr-alipay-text!= _p("reward.alipay")
- span.reward-qr-wechat
- img(src=theme.reward.wechat)
- div.reward-qr-wechat-text!= _p("reward.wechat")
+div.reward
+ div.reward-button!= __("reward.btn_text")
+ div.reward-qr
+ span.reward-qr-alipay
+ img.reward-qr-alipay__img(src=theme.reward.alipay)
+ div.reward-qr-alipay-text!= __("reward.alipay")
+ span.reward-qr-wechat
+ img.reward-qr-wechat__img(src=theme.reward.wechat)
+ div.reward-qr-wechat-text!= __("reward.wechat")
diff --git a/layout/_partials/widgets/sticky-top.pug b/layout/_partials/widgets/sticky-top.pug
index fb05265..89b6cc2 100644
--- a/layout/_partials/widgets/sticky-top.pug
+++ b/layout/_partials/widgets/sticky-top.pug
@@ -1,2 +1,4 @@
-div(data-popover=__("post.sticky") data-popover-pos="up").sticky-top
- i(class=`${theme.fa_prefix || 'fa'} fa-${theme.stick_top.icon}`).sticky-top__i
+- var fa_prefix = theme.fa_prefix || 'fa'
+
+div.sticky-top(data-popover=__("post.sticky") data-popover-pos="up")
+ i.sticky-top__i(class=`${fa_prefix} fa-${theme.stick_top.icon}`)
diff --git a/layout/post.pug b/layout/post.pug
index 6864f5d..7e66537 100644
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -1,38 +1,38 @@
extends ./_layout.pug
block content
- - var fa_prefix = theme.fa_prefix || 'fa'
+ div.post
+ - var fa_prefix = theme.fa_prefix || 'fa'
- include ./_mixins/post-header.pug
- //- include ./_mixins/gallery.pug
+ include ./_mixins/post-header.pug
+ //- include ./_mixins/gallery.pug
- +postHeader(page)
+ +postHeader(page)
- div.post-body
- if page.photos && page.photos.length
- //- +gallery(page)
- != page.content
+ div.post-body
+ if page.photos && page.photos.length
+ //- +gallery(page)
+ != page.content
- footer.post-footer
- if theme.post_widget.end_text.enable
- div.post-footer-end
- span= "------ "
- span= __("post.end")
- span= " ------"
+ footer.post-footer
+ if theme.post_widget.end_text.enable
+ div.post-end
+ span= "------ "
+ span= __("post.end")
+ span= " ------"
- - var themeConfigCC = theme.creative_commons.enable && theme.creative_commons.post
- if page.copyright === false ? page.copyright : themeConfigCC
- //- include ./_components/copyright.pug
+ if page.copyright || (theme.creative_commons.enable && theme.creative_commons.post)
+ include ./_partials/widgets/copyright.pug
- if theme.post_widget.tags
- if page.tags && page.tags.length > 0
- div.post-footer-tags
- each tag in page.tags.data
- span.post-footer-tags-item
- i.post-footer-tags-item__i(class=`${fa_prefix} fa-tags`)
- a.post-footer-tags-item__a(href=tag.permalink)= tag.name
+ if theme.post_widget.tags
+ if page.tags && page.tags.length > 0
+ div.post-tags
+ each tag in page.tags.data
+ span.post-tags-item
+ i.post-tags-item__i(class=`${fa_prefix} fa-tags`)
+ a.post-tags-item__a(href=tag.permalink)= tag.name
- //- if page.reward === false ? page.reward : (theme.reward && theme.reward.enable)
- //- include ./_components/reward.pug
+ if page.reward || (theme.reward && theme.reward.enable)
+ include ./_partials/widgets/reward.pug
- include ./_partials/widgets/pagination.pug
+ include ./_partials/widgets/pagination.pug
diff --git a/scripts/filters/external-link.js b/scripts/filters/external-link.js
index a58f530..dc86c3e 100644
--- a/scripts/filters/external-link.js
+++ b/scripts/filters/external-link.js
@@ -27,13 +27,15 @@ hexo.extend.filter.register('after_post_render', function(data) {
if (!data.protocol) return;
if (data.hostname === siteHost) return;
+ var fa_prefix = theme.fa_prefix || 'fa';
+
$(this).replaceWith(function() {
return $(
'' +
'' +
$(this).html() +
'' +
- '' +
+ '' +
''
);
});
diff --git a/source/css/_common/components/highlight/diff.styl b/source/css/_common/components/highlight/diff.styl
index 973c16f..e67d901 100644
--- a/source/css/_common/components/highlight/diff.styl
+++ b/source/css/_common/components/highlight/diff.styl
@@ -1,11 +1,12 @@
-$highlight_theme = hexo-config('highlight_theme')
+highlight_theme = hexo-config('highlight_theme');
-if ($highlight_theme == 'light')
- $highlight-addition = #deffe7
- $highlight-deletion = #ffe8eb
-else if ($highlight_theme == 'dark')
- $highlight-addition = alpha(#00ff00, .2)
- $highlight-deletion = alpha(#ff0000, .2)
-else if ($highlight_theme == 'ocean')
- $highlight-addition = alpha(#9bb955, .4)
- $highlight-deletion = alpha(#ff0000, .2)
+if (highlight_theme == 'light') {
+ $highlight-addition = #deffe7;
+ $highlight-deletion = #ffe8eb;
+} else if (highlight_theme == 'dark') {
+ $highlight-addition = alpha(#00ff00, .2);
+ $highlight-deletion = alpha(#ff0000, .2);
+} else if (highlight_theme == 'ocean') {
+ $highlight-addition = alpha(#9bb955, .4);
+ $highlight-deletion = alpha(#ff0000, .2);
+}
diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl
index 9e39480..d27215c 100644
--- a/source/css/_common/components/highlight/highlight.styl
+++ b/source/css/_common/components/highlight/highlight.styl
@@ -1,105 +1,131 @@
-@require './theme.styl'
-@require './diff.styl'
-
-languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl'
-$wordWrap = hexo-config('code_word_wrap')
-
-for lang in languages
- .highlight{'.' + lang}
- figcaption
- span
- &:first-child::before
- content: lang
- margin: 0 .6rem
- color: $highlight-code-lang-color
-
-.highlight
- position: relative
- margin: .5rem 0 1rem
- min-width: 100%
- line-height: $line-height-code-block
- color: $highlight-color
- background-color: $highlight-background
-
- .copy-button i
- color: $copy-button-color
+@require './theme.styl';
+@require './diff.styl';
+
+languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl';
+wordWrap = hexo-config('code_word_wrap');
+
+for lang in languages {
+ .highlight{'.' + lang} {
+ figcaption {
+ span {
+ &:first-child::before {
+ content: lang;
+ margin: 0 .6rem 0 0;
+ color: $highlight-code-lang-color;
+ }
+ }
+ }
+ }
+}
+
+.highlight {
+ margin: 0 0 1rem;
+ width: 100%;
+ line-height: $line-height-codeblock;
+ color: $highlight-color;
+ background-color: $highlight-background;
+
+ .copy-button i {
+ color: $copy-button-color;
+ }
pre,
- code
- font-family: $code-font-family
-
- pre
- margin: 0
-
- if ($wordWrap)
- white-space: pre-wrap
- counter-reset: line
-
- td
- border-width: 0
-
- figcaption
- overflow: hidden
- padding: .1rem 0
- width: 100%
- color: $highlight-header-color
- background-color: $highlight-header-bg-color
-
- span
- &:first-child
- float: left
- color: $highlight-code-note-color
-
- span
- &:nth-child(2)
- float: right
- margin-right: 2rem
-
- figcaption.custom
- padding: .1rem 0
- min-height: 1.5rem
-
- .custom-lang
- float: left
- margin: 0 .6rem
- color: $highlight-code-lang-color
-
- .code
- if ($wordWrap)
- padding: 0
- else
- padding: 0 0 0 .4rem
-
- .gutter
- padding: .4rem .6rem
- width: 1rem
- background-color: $highlight-side-bg-color
-
- if ($wordWrap)
- display: none
-
- pre
- text-align: right
- color: $highlight-side-color
- background-color: inherit
-
- if ($wordWrap)
- .line
- &::before
- content: counter(line)
- display: inline-block
- margin: 0 .4rem 0 0
- box-sizing: content-box
- padding: 0 .8rem 0 .4rem
- min-width: 1rem
- text-align: right
- color: $highlight-side-color
- background-color: $highlight-side-bg-color
- counter-increment: line
+ code {
+ font-family: $font-family-code;
+ }
+
+ pre {
+ margin: 0;
+
+ if (wordWrap) {
+ white-space: pre-wrap;
+ counter-reset: line;
+ }
+ }
+
+ td {
+ border-width: 0;
+ }
+
+ figcaption {
+ overflow: hidden;
+ position: relative;
+ padding: 0 .6rem;
+ width: 100%;
+ color: $highlight-header-color;
+ background-color: $highlight-header-bg-color;
+
+ span {
+ &:first-child {
+ float: left;
+ color: $highlight-code-note-color;
+ }
+ }
+
+ span {
+ &:last-child {
+ float: right;
+ margin-right: 2rem;
+ }
+ }
+ }
+
+ figcaption.custom {
+ padding: .1rem 0;
+ min-height: 1.5rem;
+
+ .custom-lang {
+ float: left;
+ margin: 0 .6rem;
+ color: $highlight-code-lang-color;
+ }
+ }
+
+ .code {
+ if (wordWrap) {
+ padding: 0;
+ } else {
+ padding: 0 0 0 .4rem;
+ }
+ }
+
+ .gutter {
+ padding: .4rem .6rem;
+ width: 1rem;
+ background-color: $highlight-side-bg-color;
+
+ if (wordWrap) {
+ display: none;
+ }
+
+ pre {
+ text-align: right;
+ color: $highlight-side-color;
+ background-color: inherit;
+ }
+ }
+
+ if (wordWrap) {
+ .line {
+ &::before {
+ content: counter(line);
+ display: inline-block;
+ margin: 0 .4rem 0 0;
+ box-sizing: content-box;
+ padding: 0 .8rem 0 .4rem;
+ min-width: 1rem;
+ text-align: right;
+ color: $highlight-side-color;
+ background-color: $highlight-side-bg-color;
+ counter-increment: line;
+ }
+ }
+ }
.variable,
- .attribute
- color: $highlight-red
+ .attribute {
+ color: $highlight-red;
+ }
.number,
.preprocessor,
@@ -107,11 +133,13 @@ for lang in languages
.params,
.constant,
.number,
- .command
- color: $highlight-orange
+ .command {
+ color: $highlight-orange;
+ }
- .built_in
- color: $highlight-yellow
+ .built_in {
+ color: $highlight-yellow;
+ }
.special,
.formula,
@@ -121,19 +149,24 @@ for lang in languages
.inheritance,
.header,
.regexp,
- .tag
- color: $highlight-green
+ .tag {
+ color: $highlight-green;
+ }
.keyword,
- .title
- color: $highlight-aqua
+ .title {
+ color: $highlight-aqua;
+ }
.function,
- .title
- color: $highlight-blue
+ .title {
+ color: $highlight-blue;
+ }
- .comment
- color: $highlight-comment
+ .comment {
+ color: $highlight-comment;
+ }
+}
.ruby .constant,
.xml .tag .title,
@@ -143,18 +176,21 @@ for lang in languages
.css .id,
.tag .name,
.css .class,
-.css .pseudo
- color: $highlight-red
+.css .pseudo {
+ color: $highlight-red;
+}
.ruby .class .title,
.css .rules .attribute,
.ruby .symbol,
-.xml .cdata
- color: $highlight-green
+.xml .cdata {
+ color: $highlight-green;
+}
.css .hexcolor,
-.tag .string
- color: $highlight-aqua
+.tag .string {
+ color: $highlight-aqua;
+}
.python .decorator,
.python .title,
@@ -163,18 +199,22 @@ for lang in languages
.perl .sub,
.javascript .title,
.js .title,
-.coffeescript .title
- color: $highlight-blue
+.coffeescript .title {
+ color: $highlight-blue;
+}
.tag .attr,
.javascript .keyword,
.javascript .function,
.js .keyword,
-.js .function
- color: $highlight-purple
+.js .function {
+ color: $highlight-purple;
+}
-.diff .addition
- background-color: $highlight-addition
+.diff .addition {
+ background-color: $highlight-addition;
+}
-.diff .deletion
- background-color: $highlight-deletion
+.diff .deletion {
+ background-color: $highlight-deletion;
+}
diff --git a/source/css/_common/components/highlight/index.styl b/source/css/_common/components/highlight/index.styl
index 81af5a5..bb39248 100644
--- a/source/css/_common/components/highlight/index.styl
+++ b/source/css/_common/components/highlight/index.styl
@@ -1,3 +1,3 @@
-@import './theme.styl'
-@import './highlight.styl'
-@import './diff.styl'
+@import './theme.styl';
+@import './highlight.styl';
+@import './diff.styl';
diff --git a/source/css/_common/components/highlight/theme.styl b/source/css/_common/components/highlight/theme.styl
index 7493f01..c08f8f9 100644
--- a/source/css/_common/components/highlight/theme.styl
+++ b/source/css/_common/components/highlight/theme.styl
@@ -1,58 +1,61 @@
-$highlight_theme = hexo-config('highlight_theme')
+highlight_theme = hexo-config('highlight_theme');
-if ($highlight_theme == 'light')
- $highlight-color = #757575
- $highlight-background = #f6f8fa
- $highlight-side-color = lighten($highlight-color, 60%)
- $highlight-side-bg-color = darken($highlight-background, 1%)
- $highlight-header-color = $highlight-color
- $highlight-header-bg-color = $highlight-side-bg-color
- $highlight-code-lang-color = alpha($highlight-header-color, .6)
- $highlight-code-note-color = $highlight-header-color
- $copy-button-color = alpha($highlight-header-color, .7)
- $highlight-comment = #90a4ae
- $highlight-red = #E53935
- $highlight-orange = #F76D47
- $highlight-yellow = #FFB62C
- $highlight-green = #91B859
- $highlight-aqua = #39ADB5
- $highlight-blue = #6182B8
- $highlight-purple = #a626a4
+if (highlight_theme == 'light') {
+ $highlight-color = #757575;
+ $highlight-background = #f6f8fa;
+ $highlight-side-color = lighten($highlight-color, 60%);
+ $highlight-side-bg-color = darken($highlight-background, 2%);
+ $highlight-header-color = $highlight-color;
+ $highlight-header-bg-color = $highlight-side-bg-color;
+ $highlight-code-lang-color = alpha($highlight-header-color, .6);
+ $highlight-code-note-color = $highlight-header-color;
+ $copy-button-color = alpha($highlight-header-color, .7);
+ $highlight-comment = #90a4ae;
+ $highlight-red = #E53935;
+ $highlight-orange = #F76D47;
+ $highlight-yellow = #FFB62C;
+ $highlight-green = #91B859;
+ $highlight-aqua = #39ADB5;
+ $highlight-blue = #6182B8;
+ $highlight-purple = #a626a4;
+}
-if ($highlight_theme == 'dark')
- $highlight-color = #7a85b9
- $highlight-background = #0f111a
- $highlight-side-color = darken($highlight-color, 50%)
- $highlight-side-bg-color = darken($highlight-background, 10%)
- $highlight-header-color = $highlight-color
- $highlight-header-bg-color = $highlight-side-bg-color
- $highlight-code-lang-color = alpha($highlight-header-color, .6)
- $highlight-code-note-color = $highlight-header-color
- $copy-button-color = alpha($highlight-header-color, .7)
- $highlight-comment = #98a4d0
- $highlight-red = #ff5370
- $highlight-orange = #f78c6c
- $highlight-yellow = #ffcb6b
- $highlight-green = #c3e88d
- $highlight-aqua = #89ddff
- $highlight-blue = #82aaff
- $highlight-purple = #c792ea
+if (highlight_theme == 'dark') {
+ $highlight-color = #7a85b9;
+ $highlight-background = #0f111a;
+ $highlight-side-color = darken($highlight-color, 50%);
+ $highlight-side-bg-color = darken($highlight-background, 10%);
+ $highlight-header-color = $highlight-color;
+ $highlight-header-bg-color = $highlight-side-bg-color;
+ $highlight-code-lang-color = alpha($highlight-header-color, .6);
+ $highlight-code-note-color = $highlight-header-color;
+ $copy-button-color = alpha($highlight-header-color, .7);
+ $highlight-comment = #98a4d0;
+ $highlight-red = #ff5370;
+ $highlight-orange = #f78c6c;
+ $highlight-yellow = #ffcb6b;
+ $highlight-green = #c3e88d;
+ $highlight-aqua = #89ddff;
+ $highlight-blue = #82aaff;
+ $highlight-purple = #c792ea;
+}
-if ($highlight_theme == 'ocean')
- $highlight-color = #f8f8f2
- $highlight-background = #304148
- $highlight-side-color = alpha($highlight-color, 20%)
- $highlight-side-bg-color = darken($highlight-background, 5%)
- $highlight-header-color = $highlight-color
- $highlight-header-bg-color = $highlight-side-bg-color
- $highlight-code-lang-color = alpha($highlight-header-color, .5)
- $highlight-code-note-color = $highlight-header-color
- $copy-button-color = alpha($highlight-header-color, .6)
- $highlight-comment = #65737e
- $highlight-red = #ec5f67
- $highlight-orange = #f99157
- $highlight-yellow = gold
- $highlight-green = #5fb3b3
- $highlight-aqua = #99c794
- $highlight-blue = #6699cc
- $highlight-purple = #c594c5
+if (highlight_theme == 'ocean') {
+ $highlight-color = #f8f8f2;
+ $highlight-background = #304148;
+ $highlight-side-color = alpha($highlight-color, 20%);
+ $highlight-side-bg-color = darken($highlight-background, 5%);
+ $highlight-header-color = $highlight-color;
+ $highlight-header-bg-color = $highlight-side-bg-color;
+ $highlight-code-lang-color = alpha($highlight-header-color, .5);
+ $highlight-code-note-color = $highlight-header-color;
+ $copy-button-color = alpha($highlight-header-color, .6);
+ $highlight-comment = #65737e;
+ $highlight-red = #ec5f67;
+ $highlight-orange = #f99157;
+ $highlight-yellow = gold;
+ $highlight-green = #5fb3b3;
+ $highlight-aqua = #99c794;
+ $highlight-blue = #6699cc;
+ $highlight-purple = #c594c5;
+}
diff --git a/source/css/_common/components/index.styl b/source/css/_common/components/index.styl
index f324257..f0147ca 100644
--- a/source/css/_common/components/index.styl
+++ b/source/css/_common/components/index.styl
@@ -1,8 +1,7 @@
@import './header/index.styl';
@import './footer/index.styl';
@import './sidebar/index.styl';
-
@import './pages/index.styl';
@import './post/index.styl';
-
+@import './highlight';
@import './widgets/index.styl';
diff --git a/source/css/_common/components/pages/page.styl b/source/css/_common/components/pages/page.styl
index 3864288..0a567ce 100644
--- a/source/css/_common/components/pages/page.styl
+++ b/source/css/_common/components/pages/page.styl
@@ -8,7 +8,7 @@
top: $font-size-main;
bottom: $font-size-main;
left: 0;
- border-left: .3rem dashed $post-list-line-color;
+ border-left: .3rem dashed $post-timeline-line-color;
transform: translateX(-50%);
}
@@ -24,7 +24,7 @@
top: 50%;
left: 0;
z-index: $z-index0;
- border: .2rem solid $post-list-dot-color;
+ border: .2rem solid $post-timeline-dot-color;
border-radius: 50%;
width: .9rem;
height: .9rem;
@@ -34,7 +34,7 @@
&:hover {
&::before {
- border-color: $post-list-dot-hover-color;
+ border-color: $post-timeline-dot-hover-color;
}
}
}
diff --git a/source/css/_common/components/plugins/note.styl b/source/css/_common/components/plugins/note.styl
index 581e08a..da29192 100644
--- a/source/css/_common/components/plugins/note.styl
+++ b/source/css/_common/components/plugins/note.styl
@@ -17,19 +17,19 @@
font-size: $font-size-base + 6px
&.default::before
- content: $note-default
+ content: $icon-note-default
color: #777
&.success::before
- content: $note-success
+ content: $icon-note-success
color: #42b983
&.warning::before
- content: $note-warning
+ content: $icon-note-warning
color: #ecc91e
&.danger::before
- content: $note-danger
+ content: $icon-note-danger
color: #dc3b3b
&.default
diff --git a/source/css/_common/components/post/index.styl b/source/css/_common/components/post/index.styl
index 36665c2..60a5592 100644
--- a/source/css/_common/components/post/index.styl
+++ b/source/css/_common/components/post/index.styl
@@ -1,2 +1,3 @@
+@import './post-timeline.styl';
@import './post-list.styl';
@import './post.styl';
diff --git a/source/css/_common/components/post/post-list.styl b/source/css/_common/components/post/post-list.styl
index b330dc5..4f1664e 100644
--- a/source/css/_common/components/post/post-list.styl
+++ b/source/css/_common/components/post/post-list.styl
@@ -1,34 +1,31 @@
// Only in homepage.
-.post {
- margin: 0 0 1.5rem;
- border-radius: 5px;
- padding: 1.5rem 2rem;
- width: 100%;
- background-color: $white;
+// -----------------------------------------
+.post-list {
+ .post {
+ margin: 0 0 1.5rem;
+ border-radius: 5px;
+ padding: 1.5rem 2rem;
+ width: 100%;
+ background-color: $white;
- &-body {
- &-excerpt {
- & *:last-child {
- margin-bottom: 0;
- }
- }
+ &-body {
+ &-more {
+ margin-top: 1.5rem;
+ text-align: center;
- &-more {
- margin-top: 1.5rem;
- text-align: center;
-
- &__a {
- display: inline-block;
- border-radius: 5px;
- padding: 0 .6em;
- color: $white;
- background-color: $home-readmore-bg-color;
- transition: background-color .2s ease;
- cursor: pointer;
-
- &:hover {
+ &__a {
+ display: inline-block;
+ border-radius: 5px;
+ padding: 0 .6em;
color: $white;
- background-color: $home-readmore-bg-hover-color;
+ background-color: $home-readmore-bg-color;
+ transition: background-color .2s ease;
+ cursor: pointer;
+
+ &:hover {
+ color: $white;
+ background-color: $home-readmore-bg-hover-color;
+ }
}
}
}
diff --git a/source/css/_common/components/widgets/post-timeline.styl b/source/css/_common/components/post/post-timeline.styl
similarity index 100%
rename from source/css/_common/components/widgets/post-timeline.styl
rename to source/css/_common/components/post/post-timeline.styl
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index c846f5c..bf32284 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -1,91 +1,116 @@
-.post-header {
- position: relative;
- margin: 0 0 1rem;
- font-size: 1em;
- text-align: center;
-
- &-title {
- margin: 0;
- cursor: auto;
-
- &__a {
- position: relative;
- color: $post-title-color;
- word-wrap();
-
- &::before {
- content: '';
- visibility: hidden;
- position: absolute;
- right: 0;
- bottom: -4px;
- left: 0;
- height: 2px;
- background-color: #000;
- transition-property: transform;
- transition-ease();
- transform: scaleX(0);
- }
+.post {
+ &-header {
+ position: relative;
+ margin: 0 0 1rem;
+ font-size: 1em;
+ text-align: center;
+
+ &-title {
+ margin: 0;
+ cursor: auto;
- &:hover {
+ &__a {
+ position: relative;
color: $post-title-color;
+ word-wrap();
&::before {
- visibility: visible;
- transform: scaleX(1);
+ content: '';
+ visibility: hidden;
+ position: absolute;
+ right: 0;
+ bottom: -4px;
+ left: 0;
+ height: 2px;
+ background-color: #000;
+ transition-property: transform;
+ transition-ease();
+ transform: scaleX(0);
+ }
+
+ &:hover {
+ color: $post-title-color;
+
+ &::before {
+ visibility: visible;
+ transform: scaleX(1);
+ }
}
}
}
- }
- &-meta {
- i {
- margin-right: .2rem;
- }
+ &-meta {
+ i {
+ margin-right: .2rem;
+ }
- & > span {
- &:not(:first-child)::before {
- content: '•';
- margin: 0 .3rem;
- color: $black-light;
+ & > span {
+ &:not(:first-child)::before {
+ content: '•';
+ margin: 0 .3rem;
+ color: $black-light;
+ }
}
- }
- &-create {
- color: $post-create-color;
- }
+ &-create {
+ color: $post-create-color;
+ }
- &-update {
- color: $post-update-color;
- }
+ &-update {
+ color: $post-update-color;
+ }
- &-word-count {
- color: $post-word-count-color;
- }
+ &-word-count {
+ color: $post-word-count-color;
+ }
- &-reading-time {
- color: $post-reading-time-color;
- }
+ &-reading-time {
+ color: $post-reading-time-color;
+ }
- &-reading-count {
- color: $post-reading-count-color;
- }
+ &-reading-count {
+ color: $post-reading-count-color;
+ }
- .leancloud_visitors {
- color: $post-reading-count-color;
+ .leancloud_visitors {
+ color: $post-reading-count-color;
+ }
}
}
-}
-.post-footer {
&-end {
margin: 0 0 1rem;
+ border-top: 1px dashed $post-end-line-color;
+ padding: 1rem 0 0;
text-align: center;
color: $post-end-color;
+ }
+
+ &-copyright {
+ position: relative;
+ margin: 0 0 1rem;
+ border: 1px solid $post-copyright-border-color;
+ padding: .8rem 1rem;
+ width: 100%;
+ transition-property: box-shadow;
+ transition-ease();
+
+ &:hover {
+ box-shadow: 0 0 5px 5px $post-copyright-shadow-color;
+ }
+
+ &-author,
+ &-link,
+ &-notice {
+ &-name {
+ font-weight: $font-weight-bold;
+ word-wrap();
+ }
- if (hexo-config('post_widget.end_text.horizon_line')) {
- border-top: 1px dashed $post-end-line-color;
- padding: 1rem 0 0;
+ &-value {
+ color: $font-color;
+ word-wrap();
+ }
}
}
diff --git a/source/css/_common/components/post/reward.styl b/source/css/_common/components/post/reward.styl
deleted file mode 100644
index f9a8fcf..0000000
--- a/source/css/_common/components/post/reward.styl
+++ /dev/null
@@ -1,40 +0,0 @@
-#reward
- text-align: center
-
-.reward-button
- display: inline-block
- margin: 1rem 0 1.5rem
- border-radius: 10px
- padding: .2rem 1rem
- color: $white
- background-color: $reward-btn-color
- transition: background-color .2s
- cursor: pointer
-
- &:hover
- background-color: $reward-btn-hover-color
-
-.reward-qr-wrapper
- display: none
-
-.reward-qr
- overflow: hidden
-
- &-alipay,
- &-wechat
- display: inline-block
- margin: 0 2rem
-
- img
- width: 200px
- height: 200px
-
- &-alipay-text,
- &-wechat-text
- margin: .5rem 0
-
- &-alipay-text
- color: $reward-alipay-color
-
- &-wechat-text
- color: $reward-wechat-color
diff --git a/source/css/_common/components/search/algolia.styl b/source/css/_common/components/search/algolia.styl
index 2230d7d..d038b4d 100644
--- a/source/css/_common/components/search/algolia.styl
+++ b/source/css/_common/components/search/algolia.styl
@@ -1,52 +1,65 @@
-.search-input
- .ais-search-box
- max-width: 100%
-
-.algolia-hit-item
- &::before
- content: ''
- display: inline-block
- margin-right: .8rem
- border: .15rem solid $blue-light
- border-radius: 50%
- width: .6rem
- height: .6rem
- background-color: #fff
- transition: color .2s
-
- em
- font-style: normal
- background-color: $yellow-light
-
-#algolia-pagination
- margin: .5rem 0
-
- ul
- margin: 0
- padding: 0
- text-align: center
-
-.ais-pagination
- &--item
- a
- clearAStyle()
- display: block
- border-radius: 3px
- width: 1.5rem
- height: 1.5rem
- font-size: $font-size-larger
- line-height: 1.5rem
- text-align: center
- cursor: pointer
-
- &:hover
- color: #fff
- background-color: $blue-light
-
-#algolia-stats
- overflow: hidden
-
-.algolia-logo
- img
- width: 4rem
- height: 1.5rem
+.search-input {
+ .ais-search-box {
+ max-width: 100%;
+ }
+}
+
+.algolia-hit-item {
+ &::before {
+ content: '';
+ display: inline-block;
+ margin-right: .8rem;
+ border: .15rem solid $blue-light;
+ border-radius: 50%;
+ width: .6rem;
+ height: .6rem;
+ background-color: #fff;
+ transition: color .2s;
+ }
+
+ em {
+ font-style: normal;
+ background-color: $yellow-light;
+ }
+}
+
+#algolia-pagination {
+ margin: .5rem 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ }
+}
+
+.ais-pagination {
+ &--item {
+ a {
+ display: block;
+ border-radius: 3px;
+ width: 1.5rem;
+ height: 1.5rem;
+ font-size: $font-size-larger;
+ line-height: 1.5rem;
+ text-align: center;
+ cursor: pointer;
+
+ &:hover {
+ color: #fff;
+ background-color: $blue-light;
+ }
+ }
+ }
+}
+
+#algolia-stats {
+ overflow: hidden;
+}
+
+.algolia-logo {
+ img {
+ width: 4rem;
+ height: 1.5rem;
+ }
+}
diff --git a/source/css/_common/components/search/common.styl b/source/css/_common/components/search/common.styl
index c0edfa0..c8a44d3 100644
--- a/source/css/_common/components/search/common.styl
+++ b/source/css/_common/components/search/common.styl
@@ -1,72 +1,80 @@
-.search-mask
- display: none
- position: fixed
- top: 0
- left: 0
- z-index: $z-index2
- width: 100%
- height: 100%
- background-color: alpha($black-dark, .7)
+.search-mask {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: $z-index2;
+ width: 100%;
+ height: 100%;
+ background-color: alpha($black-dark, .7);
+}
-.search-popup
- display: none
- position: fixed
- top: 10%
- left: 50%
- z-index: $z-index2
- margin-left: -350px
- border-radius: 5px
- padding: 1rem
- width: 700px
- max-height: 80%
- font-size: $font-size-large
- color: $font-color
- background-color: $white-light
+.search-popup {
+ display: none;
+ position: fixed;
+ top: 10%;
+ left: 50%;
+ z-index: $z-index2;
+ margin-left: -350px;
+ border-radius: 5px;
+ padding: 1rem;
+ width: 700px;
+ max-height: 80%;
+ font-size: $font-size-large;
+ color: $font-color;
+ background-color: $white-light;
+}
-.search-input
- margin: 1.2rem 0 1rem
+.search-input {
+ margin: 1.2rem 0 1rem;
- input
- border: 2px solid alpha($blue-light, .5)
- border-radius: 2rem
- padding: .2rem .8rem
- line-height: 1.3rem
- outline: 0
- transition: border-color .3s
+ input {
+ border: 2px solid alpha($blue-light, .5);
+ border-radius: 2rem;
+ padding: .2rem .8rem;
+ line-height: 1.3rem;
+ outline: 0;
+ transition: border-color .3s;
&:hover,
- &:focus
- border-color: $blue-light
+ &:focus {
+ border-color: $blue-light;
+ }
+ }
+}
-.search-close
- position: absolute
- top: .5rem
- right: .5rem
- width: 1rem
- height: 1rem
- font-size: 1.25em
- color: $black-light
- transform: translateZ(0)
- cursor: pointer
+.search-close {
+ position: absolute;
+ top: .5rem;
+ right: .5rem;
+ width: 1rem;
+ height: 1rem;
+ font-size: 1.25em;
+ color: $black-light;
+ cursor: pointer;
&::before,
- &::after
- content: ''
- display: block
- position: absolute
- top: 50%
- margin-top: -.1rem
- width: 1rem
- height: .2rem
- background-color: $black-light
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ margin-top: -.1rem;
+ width: 1rem;
+ height: .2rem;
+ background-color: $black-light;
+ }
- @extend .anime-close
+ @extend .anime-close;
+}
-.search-results
- overflow-x: hidden
- overflow-y: scroll
- max-height: 16rem
+.search-results {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ max-height: 16rem;
- em
- font-style: normal
- background-color: $yellow-light
+ em {
+ font-style: normal;
+ background-color: $yellow-light;
+ }
+}
diff --git a/source/css/_common/components/search/index.styl b/source/css/_common/components/search/index.styl
index 772c214..8efbdfe 100644
--- a/source/css/_common/components/search/index.styl
+++ b/source/css/_common/components/search/index.styl
@@ -1,3 +1,3 @@
-@import './common.styl'
-@import './algolia.styl' if (hexo-config('algolia_search.enable'))
-@import './localsearch.styl' if (hexo-config('local_search.enable'))
+@import './common.styl';
+@import './algolia.styl' if (hexo-config('algolia_search.enable'));
+@import './localsearch.styl' if (hexo-config('local_search.enable'));
diff --git a/source/css/_common/components/search/localsearch.styl b/source/css/_common/components/search/localsearch.styl
index 2a9a6d8..d3e1dcf 100644
--- a/source/css/_common/components/search/localsearch.styl
+++ b/source/css/_common/components/search/localsearch.styl
@@ -1,43 +1,55 @@
-.search-input
- input
- width: 100%
-
-.search-results
- max-height: calc(80vh - 6rem)
-
- b
- border-bottom: 1px dashed red
- color: red
- transition: color .2s
-
- & > ul
- margin: 0
- padding-left: 1.4rem
-
- li
- &:not(:last-child)
- margin-bottom: 1rem
-
- &::after
- content: ''
- display: block
- border-bottom: 1px dashed #ccc
- padding-bottom: .5rem
- width: 100%
-
- &-title
- clearAStyle()
- font-weight: $font-weight-bold
- color: #222
-
- &:hover
- color: $blue-light
-
- b
- color: $blue-light
-
- &-content
- overflow: hidden
- width: 100%
- max-height: 5rem
- color: #666
+.search-input {
+ input {
+ width: 100%;
+ }
+}
+
+.search-results {
+ max-height: calc(80vh - 6rem);
+
+ b {
+ border-bottom: 1px dashed red;
+ color: red;
+ transition-property: color;
+ transition-ease();
+ }
+
+ & > ul {
+ margin: 0;
+ padding-left: 1.4rem;
+
+ li {
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+
+ &::after {
+ content: '';
+ display: block;
+ border-bottom: 1px dashed #ccc;
+ padding-bottom: .5rem;
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ &-title {
+ font-weight: $font-weight-bold;
+ color: #222;
+
+ &:hover {
+ color: $blue-light;
+
+ b {
+ color: $blue-light;
+ }
+ }
+ }
+
+ &-content {
+ overflow: hidden;
+ width: 100%;
+ max-height: 5rem;
+ color: #666;
+ }
+}
diff --git a/source/css/_common/components/widgets/back2top.styl b/source/css/_common/components/widgets/back2top.styl
index 5fcac8c..5641302 100644
--- a/source/css/_common/components/widgets/back2top.styl
+++ b/source/css/_common/components/widgets/back2top.styl
@@ -1,30 +1,33 @@
-#back-top
- position: fixed
- right: 0
- bottom: 5vh
- transition: transform .5s
- transform: translateX(100%)
+.back2top {
+ position: fixed;
+ right: 0;
+ bottom: 5vh;
+ transition-property: transform;
+ transform: translateX(100%);
+ cursor: pointer;
+ transition-ease();
- &.show
- transform: translateX(-100%)
+ &.show {
+ transform: translateX(-100%);
+ }
- &.hide
- transform: translateX(100%)
+ &.hide {
+ transform: translateX(100%);
+ }
-$back-to-top-rotate = convert(hexo-config('back2top.icon.rotate') || '0')
-$back-to-top-color = convert(hexo-config('back2top.icon.color') || '#666')
-$back-to-top-hover-color = convert(hexo-config('back2top.icon.hover_color') || '#999')
+ &-icon {
+ font-size: 1.5rem;
+ color: convert(hexo-config('back2top.icon.color') || '#666');
+ transition-property: color;
+ transform: rotate(convert(hexo-config('back2top.icon.rotate') || '0'));
+ transition-ease();
-.back-top-inner
- i
- font-size: 1.5rem
- color: $back-to-top-color
- transition: color .2s
- transform: rotate($back-to-top-rotate)
+ &:hover {
+ color: convert(hexo-config('back2top.icon.hover_color') || '#999');
+ }
+ }
- &:hover
- color: $back-to-top-hover-color
- cursor: pointer
-
- &[data-popover][data-popover-pos='up']:hover::before
- transform: translate(-50%, -125%)
+ &[data-popover][data-popover-pos='up']:hover::before {
+ transform: translate(-50%, -125%);
+ }
+}
diff --git a/source/css/_common/components/widgets/comments.styl b/source/css/_common/components/widgets/comments.styl
index c8bab42..68baff7 100644
--- a/source/css/_common/components/widgets/comments.styl
+++ b/source/css/_common/components/widgets/comments.styl
@@ -1,21 +1,34 @@
-.comments
- margin: 1.5rem 0 0
+.comments {
+ margin: 1.5rem 0 0;
+ width: $content-width;
- a
- clearAStyle()
+ if (hexo-config('sidebar.position') == 'left') {
+ float: right;
+ } else if (hexo-config('sidebar.position') == 'right') {
+ float: left;
+ }
+
+ &-inner {
+ layout-card();
+ }
+}
+
+// Disqus
+#disqus_thread {
+ width: 100%;
+}
// Gitalk
-#gitalk-container
- width: 100%
+#gitalk-container {
+ width: 100%;
- .gt-meta
- margin-top: 0
- padding-top: 0
+ .gt-meta {
+ margin-top: 0;
+ padding-top: 0;
+ }
+}
// Livere
-#lv-container
- width: 100%
-
-// Disqus
-#disqus_thread
- width: 100%
+#lv-container {
+ width: 100%;
+}
diff --git a/source/css/_common/components/widgets/copyright.styl b/source/css/_common/components/widgets/copyright.styl
deleted file mode 100644
index 82a8df0..0000000
--- a/source/css/_common/components/widgets/copyright.styl
+++ /dev/null
@@ -1,20 +0,0 @@
-.post-copyright
- position: relative
- margin: 1.2rem 0
- border: 1px solid #e6e6e6
- border-radius: 2px
- padding: .8rem 1rem
- width: 100%
- transition: box-shadow .2s
-
- &:hover
- box-shadow: 0 0 4px 4px #f5f5f5
-
- .copyright-name
- margin-right: .5rem
- font-weight: $font-weight-bold
- white-space: nowrap
-
- .copyright-value
- word-break: break-all
- color: $font-color
diff --git a/source/css/_common/components/widgets/fancybox.styl b/source/css/_common/components/widgets/fancybox.styl
index 5af8e4e..b35d6dd 100644
--- a/source/css/_common/components/widgets/fancybox.styl
+++ b/source/css/_common/components/widgets/fancybox.styl
@@ -1,3 +1,2 @@
a.fancybox
- clearAStyle()
cursor: zoom-in
diff --git a/source/css/_common/components/widgets/index.styl b/source/css/_common/components/widgets/index.styl
index 00781fa..8bd4c86 100644
--- a/source/css/_common/components/widgets/index.styl
+++ b/source/css/_common/components/widgets/index.styl
@@ -1,16 +1,17 @@
// @import './copyright.styl' if (hexo-config('footer.copyright.enable'))
// @import './reward.styl' if (hexo-config('reward.enable'))
-// @import './back2top.styl' if (hexo-config('back2top.enable'))
+@import './back2top.styl' if (hexo-config('back2top.enable'));
+
// @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
// @import './fancybox.styl' if (hexo-config('fancybox'))
// @import './lazyload.styl' if (hexo-config('lazyload.enable'))
-// @import './loading-bar.styl'
// @import './recent-posts.styl'
-// @import './comments.styl'
+@import './comments.styl';
// @import './copy.styl'
// @import './analytics/index.styl'
// @import './search/index.styl'
// @import './tag-plugin/index.styl'
+@import './loading-bar.styl';
@import './sticky-top.styl';
-@import './post-timeline.styl';
-@import './pagination.styl'
+@import './pagination.styl';
+@import './reward.styl';
diff --git a/source/css/_common/components/widgets/loading-bar.styl b/source/css/_common/components/widgets/loading-bar.styl
index 1498454..4663108 100644
--- a/source/css/_common/components/widgets/loading-bar.styl
+++ b/source/css/_common/components/widgets/loading-bar.styl
@@ -1,25 +1,31 @@
-.loading-bar
- position: fixed
- top: 0
- left: 0
- z-index: 99999
- opacity: 0
- transition: opacity .4s
+.loading-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 99999;
+ opacity: 0;
+ transition-property: opacity;
+ transition-ease();
- .progress
- position: fixed
- top: 0
- left: 0
- width: 100%
- height: 2px
- background: #77b6ff
- box-shadow: 0 0 10px rgba(119, 182, 255, .7)
- transform: translateX(-100%)
+ .progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: $loading-bar-bg-color;
+ box-shadow: 0 0 10px $loading-bar-shadow-color;
+ transform: translateX(-100%);
+ }
- &.loading
- opacity: 1
- transition: none
+ &.loading {
+ opacity: 1;
+ transition: none;
- .progress
- transition: transform .4s ease
- will-change: transform
+ .progress {
+ transition-property: transform;
+ transition-ease();
+ will-change: transform;
+ }
+ }
+}
diff --git a/source/css/_common/components/widgets/reward.styl b/source/css/_common/components/widgets/reward.styl
new file mode 100644
index 0000000..896192e
--- /dev/null
+++ b/source/css/_common/components/widgets/reward.styl
@@ -0,0 +1,50 @@
+.reward {
+ text-align: center;
+
+ &-button {
+ display: inline-block;
+ margin: 1rem 0 1.5rem;
+ border-radius: 10px;
+ padding: .2rem 1rem;
+ color: $white;
+ background-color: $reward-btn-color;
+ transition-property: background-color;
+ cursor: pointer;
+ transition-ease();
+
+ &:hover {
+ background-color: $reward-btn-hover-color;
+ }
+ }
+
+ &-qr {
+ display: none;
+
+ &-alipay,
+ &-wechat {
+ display: inline-block;
+ margin: 0 2rem;
+
+ &__img {
+ width: 200px;
+ height: 200px;
+ }
+
+ &-text {
+ margin: .5rem 0;
+ }
+ }
+
+ &-alipay {
+ &-text {
+ color: $reward-alipay-color;
+ }
+ }
+
+ &-wechat {
+ &-text {
+ color: $reward-wechat-color;
+ }
+ }
+ }
+}
diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl
index 66e079a..d1951c9 100644
--- a/source/css/_common/outline/macro.styl
+++ b/source/css/_common/outline/macro.styl
@@ -4,6 +4,7 @@
.main {
margin: 2rem auto;
+ width: 100%;
}
.main-inner {
@@ -17,67 +18,91 @@
width: convert(hexo-config('sidebar.width') || '$sidebar-width');
}
-if (hexo-config('sidebar.position') == 'left') {
- .content {
+.content {
+ width: $content-width;
+
+ if (hexo-config('sidebar.position') == 'left') {
float: right;
- }
-} else if (hexo-config('sidebar.position') == 'right') {
- .content {
+ } else if (hexo-config('sidebar.position') == 'right') {
float: left;
}
-}
-.content-inner {
- border-radius: 5px;
- padding: 1rem 2rem;
- width: $content-width;
- height: 100%;
- background-color: $white;
-
- .post-body {
- if (hexo-config('heading_line')) {
- h1,
- h2 {
- border-bottom: 1px solid $heading-line-color;
- padding-bottom: .3em;
+ &-inner {
+ width: 100%;
+ height: 100%;
+ layout-card();
+
+ a {
+ &:not(.heading-link):not(.paginator-post-next__a) {
+ border-bottom: 1px solid $link-bottom-color;
+ transition-property: border-color;
+ transition-ease();
+
+ &:hover {
+ border-bottom-color: $link-bottom-hover-color;
+ }
}
}
- }
- .external-link {
- color: $gray-dark;
+ img {
+ border: 1px solid $img-border-color;
+ border-radius: 3px;
+ padding: .2rem;
+ }
- i {
- margin: 0 .1rem 0 .15rem;
- font-size: .9em;
+ .post-body {
+ if (hexo-config('heading_line')) {
+ h1,
+ h2 {
+ border-bottom: 1px solid $heading-line-color;
+ padding-bottom: .3em;
+ }
+ }
}
- }
- .table-container {
- overflow: auto;
- margin-bottom: 1rem;
+ .external-link {
+ color: $gray-dark;
- table {
- margin: 0;
+ i {
+ margin: 0 .1rem 0 .15rem;
+ font-size: .9em;
+ }
+ }
+
+ .table-container {
+ overflow: auto;
+ margin-bottom: 1rem;
}
- }
- .heading-link {
- color: $heading-color;
-
- &::after {
- content: $icon-heading-link;
- margin-left: .3em;
- color: $heading-logo-color;
- opacity: 0;
- @extend $font-awesome;
- transition-property: opacity;
- transition-ease();
+ .table-plugin {
+ & tbody tr {
+ &:nth-of-type(odd) {
+ background-color: $table-row-odd-bg-color;
+ }
+
+ &:hover {
+ background-color: $table-row-hover-bg-color;
+ }
+ }
}
- &:hover {
+ .heading-link {
+ color: $heading-color;
+
&::after {
- opacity: 1;
+ content: $icon-heading-link;
+ margin-left: .3em;
+ color: $heading-logo-color;
+ opacity: 0;
+ @extend $font-awesome;
+ transition-property: opacity;
+ transition-ease();
+ }
+
+ &:hover {
+ &::after {
+ opacity: 1;
+ }
}
}
}
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index 18eee0f..2826801 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -38,7 +38,7 @@ h6 {
for size in 1 .. 6 {
h{size} {
- font-size: $font-size-headings[size - 1]
+ font-size: $font-size-headings[size - 1];
}
}
@@ -107,20 +107,9 @@ dd {
table {
border-spacing: 0;
border-collapse: collapse;
- margin: 0 0 1rem;
width: 100%;
}
-table > tbody > tr {
- &:nth-of-type(odd) {
- background-color: $table-row-odd-bg-color;
- }
-
- &:hover {
- background-color: $table-row-hover-bg-color;
- }
-}
-
th,
td {
border: 1px solid $table-border-color;
diff --git a/source/css/_common/scaffolding/utils.styl b/source/css/_common/scaffolding/utils.styl
index cb232c9..ee5a260 100644
--- a/source/css/_common/scaffolding/utils.styl
+++ b/source/css/_common/scaffolding/utils.styl
@@ -25,9 +25,10 @@ popover-bg-color = alpha(#000, .7);
background-color: popover-bg-color;
opacity: 0;
text-shadow: none;
- transition: opacity .2s, transform .2s;
+ transition-property: opacity, transform;
transform: translate(-50%, -70%);
pointer-events: none;
+ transition-ease();
}
[data-popover]::before {
@@ -61,34 +62,34 @@ popover-bg-color = alpha(#000, .7);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
&-success {
- color: $alert-success;
+ color: $alert-success-color;
& ~ i {
- color: $alert-success;
+ color: $alert-success-color;
}
}
&-info {
- color: $alert-info;
+ color: $alert-info-color;
& ~ i {
- color: $alert-info;
+ color: $alert-info-color;
}
}
&-warning {
- color: $alert-warning;
+ color: $alert-warning-color;
& ~ i {
- color: $alert-warning;
+ color: $alert-warning-color;
}
}
&-error {
- color: $alert-error;
+ color: $alert-error-color;
& ~ i {
- color: $alert-error;
+ color: $alert-error-color;
}
}
@@ -102,8 +103,9 @@ popover-bg-color = alpha(#000, .7);
.anime-close {
&::before,
&::after {
- transition: transform .25s;
+ transition-property: transform;
transform: rotate(-45deg);
+ transition-ease();
}
&::after {
diff --git a/source/css/_mixins/index.styl b/source/css/_mixins/index.styl
index 30c1d3f..1953107 100644
--- a/source/css/_mixins/index.styl
+++ b/source/css/_mixins/index.styl
@@ -87,3 +87,9 @@ disable-user-select() {
-ms-user-select: none;
user-select: none;
}
+
+layout-card() {
+ border-radius: 5px;
+ padding: 1rem 2rem;
+ background-color: $white;
+}
diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
index c78f718..2239a9b 100644
--- a/source/css/_variables/index.styl
+++ b/source/css/_variables/index.styl
@@ -35,11 +35,11 @@ $md-width = 992px - 0.02px
$lg-width = 1200px - 0.02px
// Width
-$sidebar-width = 260px
-$side-main-gap = 20px
-$content-width = $md-width
-$main-aside-gap = 40px
-$main-width = $sidebar-width + $content-width + $side-main-gap
+$sidebar-width = 260px
+$side-main-gap = 20px
+$content-width = $md-width
+$main-aside-gap = 40px
+$main-width = $sidebar-width + $content-width + $side-main-gap
// -------------------------------------------
// Font, line-height
@@ -87,21 +87,17 @@ $body-bg-color = darken(#f4f5f5, 5%)
// Link ( )
$link-color = #058ed2
$link-hover-color = #11a3eb
-$link-bottom-color = #d9ecfb
+$link-bottom-color = transparent
$link-bottom-hover-color = #7ebef1
// Heading ( )
$heading-color = #222
-$heading-logo-color = $blue-light
+$heading-logo-color = $orange-dark
$heading-line-color = #eaecef
// Horizon line (
)
$hr-color = #b8dcfd
-// Unordered list ( )
-$ul-list-color = $blue-light
-$ul-list-hover-color = $orange-dark
-
// Blockquote ( )
$quote-bg-color = #f6f6f6
$quote-left-color = #cbcbcb
@@ -117,8 +113,6 @@ $img-border-color = #dadefb
// -------------------------------------------
// Header
$header-nav-bg-color = alpha(#2d2e30, .7)
-$header-nav-text-color = $white-light
-$header-nav-text-hover-color = $blue-light
$header-nav-link-color = $white-light
$header-nav-link-hover-color = $blue-light
@@ -155,21 +149,22 @@ $sidebar-state-category-color = #5c5c5c
$sidebar-state-tag-color = #ff8956
// Post
-$post-title-color = #444
-$post-create-color = #666
-$post-update-color = $blue-light
-$post-word-count-color = #666
-$post-reading-time-color = $blue-light
-$post-reading-count-color = $orange-dark
-$post-end-color = #b6b6b6
-$post-end-line-color = #e4e4e4
-$post-tags-icon-color = $blue-light
-
-// Post list (In the archive/tag/category page.)
-$post-list-line-color = #c8edff
-$post-list-dot-color = #6ec5ff
-$post-list-dot-hover-color = $orange-dark
-$post-list-time-color = #99a9bf
+$post-title-color = #444
+$post-create-color = #666
+$post-update-color = $blue-light
+$post-word-count-color = #666
+$post-reading-time-color = $blue-light
+$post-reading-count-color = $orange-dark
+$post-end-color = #b6b6b6
+$post-end-line-color = #e4e4e4
+$post-tags-icon-color = $blue-light
+$post-copyright-border-color = #e6e6e6
+$post-copyright-shadow-color = #f5f5f5
+
+// Post timeline (In the archive/tag/category page.)
+$post-timeline-line-color = #c8edff
+$post-timeline-dot-color = #6ec5ff
+$post-timeline-dot-hover-color = $orange-dark
// Pagination
$pagination-item-color = $blue-light
@@ -188,11 +183,14 @@ $reward-btn-hover-color = #e45c5c
$reward-alipay-color = #1caceb
$reward-wechat-color = #3cb034
+$loading-bar-bg-color = #77b6ff
+$loading-bar-shadow-color = alpha(#77b6ff, .7)
+
// Notification
$alert-success = #52c41a
-$alert-info = #1890ff
-$alert-warning = #faad14
-$alert-error = #f5222d
+$alert-info-color = #1890ff
+$alert-warning-color = #faad14
+$alert-error-color = #f5222d
// -------------------------------------------
// Icon font
@@ -206,16 +204,10 @@ $font-awesome
$icon-heading-link = '\f0c1'
-$icon-ul-list-dot = '\f111'
-$icon-ul-list-dot-empty = '\f10c'
-$icon-ul-list-square = '\f0c8'
-
-$icon-hr = '\f0fb'
-
-$note-default = '\f0a9'
-$note-success = '\f058'
-$note-warning = '\f06a'
-$note-danger = '\f056'
+$icon-note-default = '\f0a9'
+$icon-note-success = '\f058'
+$icon-note-warning = '\f06a'
+$icon-note-danger = '\f056'
// -------------------------------------------
// Table
--
GitLab