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 (