From 2f38dda9e005c0c319dc6403db9ea998466a328e Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Sun, 8 Sep 2019 09:57:13 +0800 Subject: [PATCH] refactor: Change some style --- layout/_layout.pug | 13 +- layout/_mixins/gallery.pug | 2 +- layout/_mixins/post-header.pug | 4 +- layout/_mixins/post-timeline.pug | 4 +- layout/_partials/config.pug | 8 + layout/_partials/footer/footer.pug | 6 +- layout/_partials/head/head.pug | 68 +-- layout/_partials/post/post-list.pug | 4 +- layout/_partials/sidebar/sidebar.pug | 11 +- layout/_partials/widgets/comments.pug | 10 +- layout/page.pug | 12 +- layout/post.pug | 4 +- scripts/filters/post-heading.js | 5 +- scripts/filters/resize-img.js | 10 +- .../components/analytics/busuanzi.styl | 26 +- .../_common/components/analytics/index.styl | 2 +- .../css/_common/components/footer/index.styl | 4 + .../components/highlight/highlight.styl | 15 +- source/css/_common/components/index.styl | 5 +- .../_common/components/plugins/friends.styl | 84 ++-- .../css/_common/components/plugins/index.styl | 6 +- .../css/_common/components/plugins/note.styl | 146 ++++--- .../css/_common/components/plugins/table.styl | 18 +- source/css/_common/components/post/post.styl | 28 -- .../_common/components/search/algolia.styl | 4 +- .../css/_common/components/search/common.styl | 2 +- .../css/_common/components/sidebar/index.styl | 413 +++++++++--------- .../_common/components/widgets/comments.styl | 5 +- .../components/widgets/copy-button.styl | 15 + .../css/_common/components/widgets/copy.styl | 10 - .../_common/components/widgets/copyright.styl | 27 ++ .../components/widgets/external-link.styl | 27 +- .../_common/components/widgets/fancybox.styl | 5 +- .../components/widgets/gallery-image.styl | 7 + .../css/_common/components/widgets/index.styl | 20 +- .../_common/components/widgets/lazyload.styl | 12 +- .../widgets/{other.styl => zoom-image.styl} | 8 - source/css/_common/index.styl | 1 - source/css/_common/outline/macro.styl | 48 +- source/css/_common/responsive.styl | 6 +- source/css/_common/scaffolding/utils.styl | 2 +- source/css/_mixins/index.styl | 8 + source/css/_variables/index.styl | 11 +- source/css/index.styl | 3 - source/js/header.js | 2 +- source/js/scroll.js | 24 +- source/js/sidebar.js | 101 +++-- source/js/stun-boot.js | 7 +- source/js/utils.js | 39 +- 49 files changed, 652 insertions(+), 650 deletions(-) create mode 100644 source/css/_common/components/widgets/copy-button.styl delete mode 100644 source/css/_common/components/widgets/copy.styl create mode 100644 source/css/_common/components/widgets/copyright.styl create mode 100644 source/css/_common/components/widgets/gallery-image.styl rename source/css/_common/components/widgets/{other.styl => zoom-image.styl} (69%) diff --git a/layout/_layout.pug b/layout/_layout.pug index e67d3c4..84b9097 100644 --- a/layout/_layout.pug +++ b/layout/_layout.pug @@ -31,11 +31,10 @@ html(lang=config.language) if theme.back2top.enable include ./_partials/widgets/back2top.pug + include ./_partials/search/index.pug - //- include ../_components/search/index.pug - - //- include ../_scripts/vendors.pug - //- include ../_third-party/search/index.pug + include ./_scripts/vendors.pug + include ./_third-party/search/index.pug //- if theme.pjax && theme.pjax.enable //- include ../_third-party/pjax.pug @@ -47,6 +46,6 @@ html(lang=config.language) //- include ../_third-party/math/index.pug //- include ../_third-party/quicklink.pug - //- include ../_third-party/comments/index.pug - //- include ../_third-party/advertising/index.pug - //- include ../_scripts/stun.pug + include ./_third-party/comments/index.pug + include ./_third-party/advertising/index.pug + include ./_scripts/stun.pug diff --git a/layout/_mixins/gallery.pug b/layout/_mixins/gallery.pug index 7e2d0ee..749ecdd 100644 --- a/layout/_mixins/gallery.pug +++ b/layout/_mixins/gallery.pug @@ -1,4 +1,4 @@ mixin gallery(post) div.gallery(itemscope itemtype="http://schema.org/ImageGallery") each photo in post.photos - img(src=url_for(photo) itemprop="contentUrl").gallery-image + img(src=url_for(photo) itemprop="contentUrl").gallery__img diff --git a/layout/_mixins/post-header.pug b/layout/_mixins/post-header.pug index 4de70c7..7ab5010 100644 --- a/layout/_mixins/post-header.pug +++ b/layout/_mixins/post-header.pug @@ -52,7 +52,7 @@ mixin postHeader(post) if theme.valine && theme.valine.enable && theme.valine.visitor span(id=url_for(post.path) data-flag-title=post.title).leancloud_visitors - i.fa.fa-eye + i(class=`${fa_prefix} fa-eye`) if !theme.post_meta.icon_only span= __("post.reading_count") + " " span.leancloud-visitors-count @@ -61,7 +61,7 @@ mixin postHeader(post) //- because will conflict by ID selector. if is_post() if theme.busuanzi.enable && theme.busuanzi.post_pv.enable - span.post-header-reading-count + span.post-header-meta-reading-count i(class=`${fa_prefix} fa-${theme.busuanzi.post_pv.icon}`) if !theme.post_meta.icon_only && !theme.busuanzi.post_pv.icon_only diff --git a/layout/_mixins/post-timeline.pug b/layout/_mixins/post-timeline.pug index dfea149..a17be0f 100644 --- a/layout/_mixins/post-timeline.pug +++ b/layout/_mixins/post-timeline.pug @@ -14,7 +14,7 @@ mixin postTimeline(posts) time.post-timeline-item__time= full_date(post.date, "MM-DD") h2.post-timeline-item-title if post.link - a.post-timeline-item-title__a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link + a(href=url_for(post.link) target="_blank" rel="noopener").post-timeline-item-title__a= post.title || post.link else - a.post-timeline-item-title__a(href=url_for(post.path))= post.title || __("post.untitled") + a(href=url_for(post.path)).post-timeline-item-title__a= post.title || __("post.untitled") - }) diff --git a/layout/_partials/config.pug b/layout/_partials/config.pug index 7e4ccd0..9f38d33 100644 --- a/layout/_partials/config.pug +++ b/layout/_partials/config.pug @@ -15,6 +15,13 @@ }); } + var fontawesome = "undefined"; + if (theme.fa_prefix) { + fontawesome = JSON.stringify({ + prefix: theme.fa_prefix + }); + } + var sidebar = "undefined"; if (theme.sidebar.enable) { sidebar = JSON.stringify({ @@ -72,6 +79,7 @@ script. var CONFIG = { root: '!{ config.root }', algolia: !{ algolia }, + fontawesome: !{ fontawesome }, sidebar: !{ sidebar }, back2top: !{ back2top }, reward: !{ theme.reward.enable }, diff --git a/layout/_partials/footer/footer.pug b/layout/_partials/footer/footer.pug index ab77072..3325a56 100644 --- a/layout/_partials/footer/footer.pug +++ b/layout/_partials/footer/footer.pug @@ -32,7 +32,7 @@ if footerPowered || footerTheme if footer.powered.version span= " v" + hexo_env("version") + "." if footerPowered && footerTheme - span= " | " + span.separator= "|" if footerTheme span= __("footer.theme") + " - " - var STUN_URL = "https://github.com/liuyib/hexo-theme-stun/"; @@ -40,8 +40,8 @@ if footerPowered || footerTheme if footer.theme.version span= " v" + stun_env("version") + "." -//- if theme.busuanzi.enable -//- include ../_components/analytics/busuanzi.pug +if theme.busuanzi.enable + include ../analytics/busuanzi.pug if footer.custom.enable div diff --git a/layout/_partials/head/head.pug b/layout/_partials/head/head.pug index 4aee72d..825ff35 100644 --- a/layout/_partials/head/head.pug +++ b/layout/_partials/head/head.pug @@ -28,21 +28,21 @@ meta(name="keywords" content=keywords) meta(name="description" content=description) title= title -//- if theme.google_site_verification -//- meta(name="google-site-verification" content=theme.google_site_verification) -//- if theme.bing_site_verification -//- meta(name="msvalidate.01" content=theme.bing_site_verification) -//- if theme.baidu_site_verification -//- meta(name="baidu-site-verification" content=theme.baidu_site_verification) -//- if theme.qihu360_site_verification -//- meta(name="360-site-verification" content=theme.qihu360_site_verification) +if theme.google_site_verification + meta(name="google-site-verification" content=theme.google_site_verification) +if theme.bing_site_verification + meta(name="msvalidate.01" content=theme.bing_site_verification) +if theme.baidu_site_verification + meta(name="baidu-site-verification" content=theme.baidu_site_verification) +if theme.qihu360_site_verification + meta(name="360-site-verification" content=theme.qihu360_site_verification) -//- if theme.pwa && theme.pwa.enable -//- if theme.pwa.theme_color -//- meta(name="theme-color" content=theme.pwa.theme_color) +if theme.pwa && theme.pwa.enable + if theme.pwa.theme_color + meta(name="theme-color" content=theme.pwa.theme_color) -//- if theme.pwa.manifest -//- link(rel="manifest" href=`${url_for(theme.pwa.manifest)}?v=${stun_env("version")}`) + if theme.pwa.manifest + link(rel="manifest" href=`${url_for(theme.pwa.manifest)}?v=${stun_env("version")}`) if theme.favicon.small link(rel="icon" href=`${url_for(theme.favicon.small)}?v=${stun_env("version")}` type="image/png" sizes="16x16") @@ -65,30 +65,30 @@ link(rel="dns-prefetch" href="https://cdn.jsdelivr.net") - if (theme.cdn.fontawesome) fontawesome_css = theme.cdn.fontawesome link(rel="stylesheet" href=fontawesome_css type="text/css") -//- if theme.fancybox -//- - var fancybox_css = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" -//- - if (theme.cdn.fancybox_css) fancybox_css = theme.cdn.fancybox_css -//- link(rel="stylesheet" href=fancybox_css type="text/css") +if theme.fancybox + - var fancybox_css = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" + - if (theme.cdn.fancybox_css) fancybox_css = theme.cdn.fancybox_css + link(rel="stylesheet" href=fancybox_css type="text/css") -//- if page.comments || theme.pjax.enable -//- if theme.gitalk && theme.gitalk.enable -//- - var gitalk_css = "https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css" -//- - if (theme.cdn.gitalk_css) gitalk_css = theme.cdn.gitalk_css -//- link(rel="stylesheet" href=gitalk_css type="text/css") +if page.comments || theme.pjax.enable + if theme.gitalk && theme.gitalk.enable + - var gitalk_css = "https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css" + - if (theme.cdn.gitalk_css) gitalk_css = theme.cdn.gitalk_css + link(rel="stylesheet" href=gitalk_css type="text/css") -//- if theme.algolia_search.enable -//- - var instantsearch_css = "https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css" -//- - if (theme.cdn.instantsearch_css) instantsearch_css = theme.cdn.instantsearch_css -//- link(rel="stylesheet" href=instantsearch_css type="text/css") +if theme.algolia_search.enable + - var instantsearch_css = "https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css" + - if (theme.cdn.instantsearch_css) instantsearch_css = theme.cdn.instantsearch_css + link(rel="stylesheet" href=instantsearch_css type="text/css") link(rel="stylesheet" href=`${url_for(theme.css)}/index.css?v=${stun_env("version")}`) -//- if theme.google_analytics -//- link(rel="dns-prefetch" href="https://www.googletagmanager.com") -//- if theme.baidu_analytics -//- link(rel="dns-prefetch" href="https://hm.baidu.com") -//- if theme.tencent_analytics -//- link(rel="dns-prefetch" href="https://tajs.qq.com") +if theme.google_analytics + link(rel="dns-prefetch" href="https://www.googletagmanager.com") +if theme.baidu_analytics + link(rel="dns-prefetch" href="https://hm.baidu.com") +if theme.tencent_analytics + link(rel="dns-prefetch" href="https://tajs.qq.com") -//- include ../_third-party/analytics/index.pug -//- include ./config.pug +include ../../_third-party/analytics/index.pug +include ../config.pug diff --git a/layout/_partials/post/post-list.pug b/layout/_partials/post/post-list.pug index 87e9eb0..df1ba80 100644 --- a/layout/_partials/post/post-list.pug +++ b/layout/_partials/post/post-list.pug @@ -1,6 +1,6 @@ section.post-list include ../../_mixins/post-header.pug - //- include ../_mixins/gallery.pug + include ../../_mixins/gallery.pug - var postLists = theme.post_list.paginate.home ? page.posts : site.posts - postLists.each(function (post) { @@ -12,7 +12,7 @@ section.post-list img(src=post.top_image) if post.photos && post.photos.length - //- +gallery(post) + +gallery(post) - var isExcerpt = true if theme.auto_excerpt && theme.auto_excerpt.enable diff --git a/layout/_partials/sidebar/sidebar.pug b/layout/_partials/sidebar/sidebar.pug index 4679c10..f7c5d0e 100644 --- a/layout/_partials/sidebar/sidebar.pug +++ b/layout/_partials/sidebar/sidebar.pug @@ -1,4 +1,4 @@ -- var isShowToc = page.toc === false ? page.toc : (theme.toc.enable && is_post()) +- var isShowToc = page.toc || (theme.toc.enable && is_post()) - var fa_prefix = theme.fa_prefix || 'fa' if isShowToc @@ -17,7 +17,6 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`) div.sidebar-ov-author if theme.author.avatar.url img.sidebar-ov-author__img(src=theme.author.avatar.url alt="avatar") - if theme.author.motto p.sidebar-ov-author__p= theme.author.motto @@ -87,8 +86,8 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`) img(src=url_for(`/${theme.images}/cc-${ccLicense}.svg`) alt=__("creative_commons")) if theme.reading_progress.enable && is_post() - div.sidebar-progress - div.sidebar-progress-read + div.sidebar-reading + div.sidebar-reading-info span= __("sidebar.read_info") + " " - span.sidebar-progress-number - div.sidebar-progress-line + span.sidebar-reading-info-num + div.sidebar-reading-line diff --git a/layout/_partials/widgets/comments.pug b/layout/_partials/widgets/comments.pug index 220f2e3..a1ec578 100644 --- a/layout/_partials/widgets/comments.pug +++ b/layout/_partials/widgets/comments.pug @@ -1,15 +1,11 @@ if theme.disqus && theme.disqus.enable div#comments.comments - div.comment-inner - div#disqus_thread + div#disqus_thread else if theme.valine && theme.valine.enable div#comments.comments - div.comment-inner else if theme.gitalk && theme.gitalk.enable div#comments.comments - div.comment-inner - div#gitalk-container + div#gitalk-container else if theme.livere && theme.livere.enable div#comments.comments - div.comment-inner - div#lv-container(data-id="city" data-uid=theme.livere.uid) + div#lv-container(data-id="city" data-uid=theme.livere.uid) diff --git a/layout/page.pug b/layout/page.pug index f85e28e..fa854c2 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -1,7 +1,7 @@ extends ./_layout.pug block content - //- include ./_mixins/gallery.pug + include ./_mixins/gallery.pug if (page.type === "tags") div.tagcloud @@ -18,14 +18,12 @@ block content span= site.categories.length != list_categories() else if (page.type === "about") - div.headings.code-highlight + div.about if page.photos && page.photos.length - //- +gallery(page) - + +gallery(page) != page.content else - div.headings.code-highlight + div.custom if page.photos && page.photos.length - //- +gallery(page) - + +gallery(page) != page.content diff --git a/layout/post.pug b/layout/post.pug index 7e66537..f3f31ed 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -5,13 +5,13 @@ block content - var fa_prefix = theme.fa_prefix || 'fa' include ./_mixins/post-header.pug - //- include ./_mixins/gallery.pug + include ./_mixins/gallery.pug +postHeader(page) div.post-body if page.photos && page.photos.length - //- +gallery(page) + +gallery(page) != page.content footer.post-footer diff --git a/scripts/filters/post-heading.js b/scripts/filters/post-heading.js index af30c62..39c8b3c 100644 --- a/scripts/filters/post-heading.js +++ b/scripts/filters/post-heading.js @@ -11,10 +11,9 @@ hexo.extend.filter.register('after_post_render', function (data) { $('h1,h2,h3,h4,h5,h6').each(function () { var $heading = $(this); - var $headingATag = $heading.find('a'); + var headingTxt = $heading.text().trim(); - $headingATag.addClass('heading-link'); - $heading.html($headingATag.html($heading.text().trim())); + $heading.html('' + headingTxt + ''); }); data.content = $.html(); diff --git a/scripts/filters/resize-img.js b/scripts/filters/resize-img.js index 80d7d72..111ab0e 100644 --- a/scripts/filters/resize-img.js +++ b/scripts/filters/resize-img.js @@ -4,23 +4,23 @@ hexo.extend.filter.register('after_post_render', function (data) { var cheerio; - + if (!cheerio) cheerio = require('cheerio'); var $ = cheerio.load(data.content, { decodeEntities: false }); $('img').each(function () { var $img = $(this); - + if (!$img.attr('src')) return; if ($img.attr('src').includes('?size=')) { - var size = $img.attr('src').split('?size=')[1] && - $img.attr('src').split('?size=')[1].toLowerCase(); + var size = $img.attr('src').split('?size=')[1] && $img.attr('src').split('?size=')[1].toLowerCase(); var w = size.split('x')[0] + 'px'; var h = size.split('x')[1] + 'px'; - + $img.css({ width: w, height: h }); } }); + data.content = $.html(); }, 0); diff --git a/source/css/_common/components/analytics/busuanzi.styl b/source/css/_common/components/analytics/busuanzi.styl index 6ca7e8b..05f7766 100644 --- a/source/css/_common/components/analytics/busuanzi.styl +++ b/source/css/_common/components/analytics/busuanzi.styl @@ -1,15 +1,17 @@ -.busuanzi - .separator - margin: 0 .3rem +.busuanzi { + &-uv { + color: $white-light; - &-uv - color: $white-light + i { + margin: 0 .3rem 0 0; + } + } - i - margin: 0 .3rem 0 0 + &-pv { + color: $white-light; - &-pv - color: $white-light - - i - margin: 0 .3rem 0 0 + i { + margin: 0 .3rem 0 0; + } + } +} diff --git a/source/css/_common/components/analytics/index.styl b/source/css/_common/components/analytics/index.styl index 0f6e7b8..2627f98 100644 --- a/source/css/_common/components/analytics/index.styl +++ b/source/css/_common/components/analytics/index.styl @@ -1 +1 @@ -@import './busuanzi.styl' if (hexo-config('busuanzi.enable')) +@import './busuanzi.styl' if (hexo-config('busuanzi.enable')); diff --git a/source/css/_common/components/footer/index.styl b/source/css/_common/components/footer/index.styl index f31c1d2..c24bbeb 100644 --- a/source/css/_common/components/footer/index.styl +++ b/source/css/_common/components/footer/index.styl @@ -20,6 +20,10 @@ } } + .separator { + margin: 0 .5rem; + } + .footer-icon { margin: 0 .2rem; font-size: .9em; diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl index d27215c..389b3a1 100644 --- a/source/css/_common/components/highlight/highlight.styl +++ b/source/css/_common/components/highlight/highlight.styl @@ -25,10 +25,6 @@ for lang in languages { color: $highlight-color; background-color: $highlight-background; - .copy-button i { - color: $copy-button-color; - } - pre, code { font-family: $font-family-code; @@ -48,24 +44,23 @@ for lang in languages { } figcaption { - overflow: hidden; position: relative; - padding: 0 .6rem; + padding: .1rem 0; width: 100%; color: $highlight-header-color; background-color: $highlight-header-bg-color; + clearfix(); span { &:first-child { float: left; + margin-left: .5rem; color: $highlight-code-note-color; } - } - span { - &:last-child { + &.external-link { float: right; - margin-right: 2rem; + margin-right: 2em; } } } diff --git a/source/css/_common/components/index.styl b/source/css/_common/components/index.styl index f0147ca..900eb21 100644 --- a/source/css/_common/components/index.styl +++ b/source/css/_common/components/index.styl @@ -1,7 +1,10 @@ @import './header/index.styl'; @import './footer/index.styl'; @import './sidebar/index.styl'; +@import './search/index.styl'; @import './pages/index.styl'; @import './post/index.styl'; -@import './highlight'; +@import './highlight/index.styl'; @import './widgets/index.styl'; +@import './plugins/index.styl'; +@import './analytics/index.styl'; diff --git a/source/css/_common/components/plugins/friends.styl b/source/css/_common/components/plugins/friends.styl index c13e887..5095861 100644 --- a/source/css/_common/components/plugins/friends.styl +++ b/source/css/_common/components/plugins/friends.styl @@ -1,46 +1,52 @@ -.friends-plugin - overflow: hidden - max-width: 100% +.friends-plugin { + overflow: hidden; + max-width: 100%; +} -.friends-item - clearAStyle() - display: block - float: left - margin: 0 5px - padding: .5rem .5rem .5rem 1rem - width: calc(33.3% - 10px) - height: 100px - transition: background-color .3s +.friends-item { + display: block; + float: left; + margin: 0 5px; + padding: .5rem .5rem .5rem 1rem; + width: calc(33.3% - 10px); + height: 100px; + transition: background-color .3s; - &:hover - background-color: alpha($blue-light, .1) + &:hover { + background-color: alpha($blue-light, .1); + } - .avatar - clearImgStyle() - display: inline-block - border-radius: 50% - width: 60px - height: 60px - vertical-align: middle + p { + margin: 0; + } - .info - display: inline-block - margin-left: 1rem - padding-top: .6rem - width: calc(100% - 60px - 1rem) - height: 100% - vertical-align: middle - color: $font-color + .avatar { + display: inline-block; + border-radius: 50%; + width: 60px; + height: 60px; + vertical-align: middle; + } - .name, - .intro - overflow: hidden - white-space: nowrap - text-overflow: ellipsis + .info { + display: inline-block; + margin-left: 1rem; + padding-top: .6rem; + width: calc(100% - 60px - 1rem); + height: 100%; + vertical-align: middle; + color: $font-color; + } - .intro - font-size: .9em - color: #999 + .name, + .intro { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } - p - margin: 0 + .intro { + font-size: .9em; + color: #999; + } +} diff --git a/source/css/_common/components/plugins/index.styl b/source/css/_common/components/plugins/index.styl index 8f52a13..444dc48 100644 --- a/source/css/_common/components/plugins/index.styl +++ b/source/css/_common/components/plugins/index.styl @@ -1,3 +1,3 @@ -@import './table.styl' -@import './note.styl' -@import './friends.styl' +@import './table.styl'; +@import './note.styl'; +@import './friends.styl'; diff --git a/source/css/_common/components/plugins/note.styl b/source/css/_common/components/plugins/note.styl index da29192..3a7cded 100644 --- a/source/css/_common/components/plugins/note.styl +++ b/source/css/_common/components/plugins/note.styl @@ -1,68 +1,90 @@ -.note-plugin - position: relative - margin: 1rem 0 - border: 1px solid #eee - border-left-width: .35rem - padding: 0 1rem - line-height: 1.7em - - &:not(.no-icon) - padding-left: 2rem - - &::before - position: absolute - top: .8em - left: .6rem - font-family: 'FontAwesome' - font-size: $font-size-base + 6px - - &.default::before - content: $icon-note-default - color: #777 - - &.success::before - content: $icon-note-success - color: #42b983 - - &.warning::before - content: $icon-note-warning - color: #ecc91e - - &.danger::before - content: $icon-note-danger - color: #dc3b3b - - &.default - border-left-color: #777 - - strong - color: #777 - - &.success - border-left-color: #42b983 - - strong - color: #42b983 - - &.warning - border-left-color: #ecc91e - - strong - color: #ecc91e - - &.danger - border-left-color: #dc3b3b - - strong - color: #dc3b3b +.note-plugin { + position: relative; + margin: 0 0 1rem; + border: 1px solid #eee; + border-left-width: .35rem; + padding: 0 1rem; + line-height: 1.7em; h1, h2, h3, h4, h5, - h6 - margin: 0 - - strong - font-size: $font-size-base + 6px + h6 { + margin: 0; + } + + p { + margin: 1em 0; + } + + strong { + font-size: $font-size-base + 6px; + } + + &:not(.no-icon) { + padding-left: 2rem; + + &::before { + position: absolute; + top: 1.5rem; + left: .6rem; + fontawesome-base(); + font-size: $font-size-base + 6px; + transform: translateY(-50%); + } + + &.default::before { + content: $icon-note-default; + color: #777; + } + + &.success::before { + content: $icon-note-success; + color: #42b983; + } + + &.warning::before { + content: $icon-note-warning; + color: #ecc91e; + } + + &.danger::before { + content: $icon-note-danger; + color: #dc3b3b; + } + } + + &.default { + border-left-color: #777; + + strong { + color: #777; + } + } + + &.success { + border-left-color: #42b983; + + strong { + color: #42b983; + } + } + + &.warning { + border-left-color: #ecc91e; + + strong { + color: #ecc91e; + } + } + + &.danger { + border-left-color: #dc3b3b; + + strong { + color: #dc3b3b; + } + } +} diff --git a/source/css/_common/components/plugins/table.styl b/source/css/_common/components/plugins/table.styl index 7d3fb74..2f8bb8f 100644 --- a/source/css/_common/components/plugins/table.styl +++ b/source/css/_common/components/plugins/table.styl @@ -1,9 +1,11 @@ -.table-plugin - thead - tr - background-color: #f8f8f8 +.table-plugin { + & tbody tr { + &:nth-of-type(odd) { + background-color: $table-row-odd-bg-color; + } - tbody - tr - &:nth-child(2n) - background-color: #f8f8f8 + &:hover { + background-color: $table-row-hover-bg-color; + } + } +} diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl index bf32284..4820080 100644 --- a/source/css/_common/components/post/post.styl +++ b/source/css/_common/components/post/post.styl @@ -86,34 +86,6 @@ 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(); - } - - &-value { - color: $font-color; - word-wrap(); - } - } - } - &-tags { margin: 0 0 1rem; diff --git a/source/css/_common/components/search/algolia.styl b/source/css/_common/components/search/algolia.styl index d038b4d..ac5acc5 100644 --- a/source/css/_common/components/search/algolia.styl +++ b/source/css/_common/components/search/algolia.styl @@ -40,10 +40,12 @@ border-radius: 3px; width: 1.5rem; height: 1.5rem; - font-size: $font-size-larger; + font-size: $font-size-base + 2pxr; line-height: 1.5rem; text-align: center; + transition-property: color, background-color; cursor: pointer; + transition-ease(); &:hover { color: #fff; diff --git a/source/css/_common/components/search/common.styl b/source/css/_common/components/search/common.styl index c8a44d3..4e1de83 100644 --- a/source/css/_common/components/search/common.styl +++ b/source/css/_common/components/search/common.styl @@ -20,7 +20,7 @@ padding: 1rem; width: 700px; max-height: 80%; - font-size: $font-size-large; + font-size: $font-size-base + 2px; color: $font-color; background-color: $white-light; } diff --git a/source/css/_common/components/sidebar/index.styl b/source/css/_common/components/sidebar/index.styl index 5cb9b35..547b75f 100644 --- a/source/css/_common/components/sidebar/index.styl +++ b/source/css/_common/components/sidebar/index.styl @@ -1,293 +1,284 @@ -.sidebar-inner { - border-radius: 5px; - padding: 1rem; - width: 100%; - font-size: $font-size-sidebar; - background-color: $white; - - &.sticky { - position: fixed; - top: convert(hexo-config('sidebar.offsetTop') || '30px'); - z-index: $z-index0; - transform: translateZ(0); - } - +.sidebar { .hide { display: none; } -} - -// TODO -.sidebar-nav { - padding-bottom: 1em; - text-align: center; - &-toc, - &-ov { - border-bottom: 1px solid #fff; - padding: .3em .5em; - color: $sidebar-nav-text-color; - transition: opacity .2s; - - &:hover { - color: $sidebar-nav-text-hover-color; - cursor: pointer; - } + &-inner { + border-radius: 5px; + padding: 1rem; + width: convert(hexo-config('sidebar.width') || '$sidebar-width'); + font-size: $font-size-sidebar; + background-color: $white; } - .current { - border-color: $sidebar-nav-text-hover-color; - color: $sidebar-nav-text-hover-color; - } -} - -// TODO -.sidebar-toc { - overflow: auto; - position: relative; - max-height: 70vh; - - if (hexo-config('toc.wrap')) { - white-space: normal; - word-break: break-all; - } else { - white-space: nowrap; - word-break: normal; - } + &-nav { + padding-bottom: 1em; + text-align: center; - if (!hexo-config('toc.expand_all')) { - .toc .toc-child { - display: none; - } + &-toc, + &-ov { + border-bottom: 1px solid #fff; + padding: .3em .5em; + color: $sidebar-nav-text-color; + transition: opacity .2s; - .toc .active > .toc-child { - display: block; + &:hover { + color: $sidebar-nav-text-hover-color; + cursor: pointer; + } } - .toc .current > .toc-child { - display: block; + .current { + border-color: $sidebar-nav-text-hover-color; + color: $sidebar-nav-text-hover-color; } } - .active, - .current { - & > a { - color: $orange-dark; - transition: color .3s; + &-toc { + overflow: auto; + position: relative; + max-height: 70vh; + + if (hexo-config('toc.wrap')) { + word-wrap(); + } else { + white-space: nowrap; } - } - ol, - li { - list-style: none; - } + if (!hexo-config('toc.expand_all')) { + .toc .toc-child { + display: none; + } - ol { - margin: 0; - padding-left: 1em; - } -} + .toc .active > .toc-child { + display: block; + } -.sidebar-ov { - & > div { - if (hexo-config('sidebar.horizon_line')) { - &:not(:last-child) { - border-bottom: 1px dashed $sidebar-horizon-line-color; + .toc .current > .toc-child { + display: block; } } - } - &-author { - width: 100%; - text-align: center; - - &__img { - width: 120px; - height: 120px; - opacity: hexo-config('author.avatar.opacity'); - - if (hexo-config('author.avatar.rounded')) { - border-radius: 50%; - } else { - border-radius: 2px; + .active, + .current { + & > a { + color: $orange-dark; + transition: color .3s; } + } - &:hover { - animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out; - } + ol, + li { + list-style: none; } - &__p { - margin: .5rem 0 0; - font-weight: $font-weight-bold; + ol { + margin: 0; + padding-left: 1em; } } - &-social { - padding: .5rem 0; - text-align: center; + &-ov { + & > div { + if (hexo-config('sidebar.horizon_line')) { + &:not(:last-child) { + border-bottom: 1px dashed $sidebar-horizon-line-color; + } + } + } - &-item { - display: inline-block; - margin: .2rem; + &-author { + width: 100%; text-align: center; - if (hexo-config('social_setting.icon_only')) { - border-radius: 50%; - width: 1.5rem; - height: 1.5rem; - background-color: $sidebar-social-color; - transition-property: background-color; - transition-ease(); + &__img { + width: 120px; + height: 120px; + opacity: hexo-config('author.avatar.opacity'); + + if (hexo-config('author.avatar.rounded')) { + border-radius: 50%; + } else { + border-radius: 2px; + } &:hover { - background-color: $sidebar-social-hover-color; + animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out; } + } - &__a { - display: inline-block; - width: 100%; - color: $white; + &__p { + margin: .5rem 0 0; + font-weight: $font-weight-bold; + } + } - &:hover { - color: $white; - } + &-social { + padding: .5rem 0; + text-align: center; - &--icon { - font-size: 1.2em; - line-height: 1.5rem; - } - } - } else { - &__a { - display: block; - border-radius: 3px; - padding: 0 .4rem; - color: $white; + &-item { + display: inline-block; + margin: .2rem; + text-align: center; + + if (hexo-config('social_setting.icon_only')) { + border-radius: 50%; + width: 1.5rem; + height: 1.5rem; background-color: $sidebar-social-color; - transition-property: color, background-color; + transition-property: background-color; transition-ease(); &:hover { - color: $white; background-color: $sidebar-social-hover-color; } - } - span { - margin-left: .2rem; + &__a { + display: inline-block; + width: 100%; + color: $white; + + &:hover { + color: $white; + } + + &--icon { + font-size: 1.2em; + line-height: 1.5rem; + } + } + } else { + &__a { + display: block; + border-radius: 3px; + padding: 0 .4rem; + color: $white; + background-color: $sidebar-social-color; + transition-property: color, background-color; + transition-ease(); + + &:hover { + color: $white; + background-color: $sidebar-social-hover-color; + } + } + + span { + margin-left: .2rem; + } } } } - } - &-feed { - padding: .5rem 0; - text-align: center; + &-feed { + padding: .5rem 0; + text-align: center; - &-icon { - margin-right: .3em; - } + &-icon { + margin-right: .3em; + } - &-email, - &-rss { - display: inline-block; - width: 50%; + &-email, + &-rss { + display: inline-block; + width: 50%; - &__a { - transition-property: color; - transition-ease(); + &__a { + transition-property: color; + transition-ease(); - &--icon { - margin-right: .2rem; + &--icon { + margin-right: .2rem; + } } } - } - &-email__a { - color: $sidebar-feed-email-color; + &-email__a { + color: $sidebar-feed-email-color; - &:hover { - color: darken($sidebar-feed-email-color, 20%); + &:hover { + color: darken($sidebar-feed-email-color, 20%); + } } - } - &-rss__a { - color: $sidebar-feed-rss-color; + &-rss__a { + color: $sidebar-feed-rss-color; - &:hover { - color: darken($sidebar-feed-rss-color, 20%); + &:hover { + color: darken($sidebar-feed-rss-color, 20%); + } } } - } - &-state { - padding: .5rem 0; - text-align: center; + &-state { + padding: .5rem 0; + text-align: center; - &__a { - display: inline-block; - width: 33.3%; - line-height: 1.5em; - transition-property: color; - transition-ease(); + &__a { + display: inline-block; + width: 33.3%; + line-height: 1.5em; + transition-property: color; + transition-ease(); - &:not(:last-child) { - border-right: 1px solid $sidebar-horizon-line-color; - } + &:not(:last-child) { + border-right: 1px solid $sidebar-horizon-line-color; + } - &.posts { - color: $sidebar-state-post-color; + &.posts { + color: $sidebar-state-post-color; - &:hover { - color: darken($sidebar-state-post-color, 30%); + &:hover { + color: darken($sidebar-state-post-color, 30%); + } } - } - &.categories { - color: $sidebar-state-category-color; + &.categories { + color: $sidebar-state-category-color; - &:hover { - color: darken($sidebar-state-category-color, 30%); + &:hover { + color: darken($sidebar-state-category-color, 30%); + } } - } - &.tags { - color: $sidebar-state-tag-color; + &.tags { + color: $sidebar-state-tag-color; - &:hover { - color: darken($sidebar-state-tag-color, 30%); + &:hover { + color: darken($sidebar-state-tag-color, 30%); + } } - } - &--count { - font-weight: $font-weight-bold; - color: $black-dark; + &--count { + font-weight: $font-weight-bold; + color: $black-dark; + } } } - } - &-cc { - padding-top: .5rem; - text-align: center; + &-cc { + padding-top: .5rem; + text-align: center; + } } -} -.sidebar-progress { - overflow: hidden; - margin-top: .5em; - text-align: center; + &-reading { + overflow: hidden; + margin-top: .5em; + text-align: center; - &-read { - margin-bottom: .3em; - } + &-info { + margin-bottom: .3em; + } - &-line { - width: 100%; - height: convert(hexo-config('reading_progress.height') || '1px'); - background-color: convert(hexo-config('reading_progress.color') || '#49b1f5'); - transition-property: transform; - transition-ease(); - transform: translateX(-100%); + &-line { + width: 100%; + height: convert(hexo-config('reading_progress.height') || '1px'); + background-color: convert(hexo-config('reading_progress.color') || '#49b1f5'); + transition-property: transform; + transition-ease(); + transform: translateX(-100%); + } } } diff --git a/source/css/_common/components/widgets/comments.styl b/source/css/_common/components/widgets/comments.styl index 68baff7..84c7570 100644 --- a/source/css/_common/components/widgets/comments.styl +++ b/source/css/_common/components/widgets/comments.styl @@ -1,16 +1,13 @@ .comments { margin: 1.5rem 0 0; width: $content-width; + layout-card(); if (hexo-config('sidebar.position') == 'left') { float: right; } else if (hexo-config('sidebar.position') == 'right') { float: left; } - - &-inner { - layout-card(); - } } // Disqus diff --git a/source/css/_common/components/widgets/copy-button.styl b/source/css/_common/components/widgets/copy-button.styl new file mode 100644 index 0000000..a46c772 --- /dev/null +++ b/source/css/_common/components/widgets/copy-button.styl @@ -0,0 +1,15 @@ +.copy-button { + position: absolute; + top: 0; + right: 0; + width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; + text-align: center; + color: $black-light; + cursor: pointer; + + i { + color: $copy-button-color; + } +} diff --git a/source/css/_common/components/widgets/copy.styl b/source/css/_common/components/widgets/copy.styl deleted file mode 100644 index 980bc66..0000000 --- a/source/css/_common/components/widgets/copy.styl +++ /dev/null @@ -1,10 +0,0 @@ -.copy-button - position: absolute - top: 0 - right: 0 - width: 1.5rem - height: 1.5rem - line-height: 1.5rem - text-align: center - color: $black-light - cursor: pointer diff --git a/source/css/_common/components/widgets/copyright.styl b/source/css/_common/components/widgets/copyright.styl new file mode 100644 index 0000000..2df4540 --- /dev/null +++ b/source/css/_common/components/widgets/copyright.styl @@ -0,0 +1,27 @@ +.post-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(); + } + + &-value { + color: $font-color; + word-wrap(); + } + } +} diff --git a/source/css/_common/components/widgets/external-link.styl b/source/css/_common/components/widgets/external-link.styl index 9187777..6f7ecb6 100644 --- a/source/css/_common/components/widgets/external-link.styl +++ b/source/css/_common/components/widgets/external-link.styl @@ -1,13 +1,18 @@ -.external-link i - margin: 0 .1em 0 .2em - font-size: .8em - color: convert(hexo-config('external_link.icon.color') || '#aaa') +.external-link i { + margin: 0 .1em 0 .2em; + font-size: .8em; + color: convert(hexo-config('external_link.icon.color') || '#aaa'); +} -.footer-inner - .external-link i - font-size: .7em - color: #fff +.footer-inner { + .external-link i { + font-size: .7em; + color: #fff; + } +} -.post-title - .external-link i - font-size: .7em +.post-header-title { + .external-link i { + font-size: .7em; + } +} diff --git a/source/css/_common/components/widgets/fancybox.styl b/source/css/_common/components/widgets/fancybox.styl index b35d6dd..3815703 100644 --- a/source/css/_common/components/widgets/fancybox.styl +++ b/source/css/_common/components/widgets/fancybox.styl @@ -1,2 +1,3 @@ -a.fancybox - cursor: zoom-in +a.fancybox { + cursor: zoom-in; +} diff --git a/source/css/_common/components/widgets/gallery-image.styl b/source/css/_common/components/widgets/gallery-image.styl new file mode 100644 index 0000000..3e83859 --- /dev/null +++ b/source/css/_common/components/widgets/gallery-image.styl @@ -0,0 +1,7 @@ +// Gallery in post / page. +.gallery { + &__img { + margin-bottom: convert(hexo-config('gallery_waterfall.gap_y') || '10px'); + width: convert(hexo-config('gallery_waterfall.col_width') || '220px'); + } +} diff --git a/source/css/_common/components/widgets/index.styl b/source/css/_common/components/widgets/index.styl index 8bd4c86..7f3343b 100644 --- a/source/css/_common/components/widgets/index.styl +++ b/source/css/_common/components/widgets/index.styl @@ -1,17 +1,13 @@ -// @import './copyright.styl' if (hexo-config('footer.copyright.enable')) -// @import './reward.styl' if (hexo-config('reward.enable')) +@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 './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 './recent-posts.styl' +@import './external-link.styl' if (hexo-config('external_link.icon.enable')); +@import './fancybox.styl' if (hexo-config('fancybox')); +@import './zoom-image.styl' if (hexo-config('zoom_image.enable')); +@import './gallery-image.styl' if (hexo-config('gallery_waterfall.enable')); +@import './lazyload.styl' if (hexo-config('lazyload.enable')); @import './comments.styl'; -// @import './copy.styl' -// @import './analytics/index.styl' -// @import './search/index.styl' -// @import './tag-plugin/index.styl' +@import './copy-button.styl' @import './loading-bar.styl'; @import './sticky-top.styl'; @import './pagination.styl'; -@import './reward.styl'; diff --git a/source/css/_common/components/widgets/lazyload.styl b/source/css/_common/components/widgets/lazyload.styl index 62a79f7..3770fca 100644 --- a/source/css/_common/components/widgets/lazyload.styl +++ b/source/css/_common/components/widgets/lazyload.styl @@ -1,5 +1,7 @@ -.lazyload - &.block - box-sizing: content-box - min-width: 30px - min-height: 30px +.lazyload { + &.block { + box-sizing: content-box; + min-width: 30px; + min-height: 30px; + } +} diff --git a/source/css/_common/components/widgets/other.styl b/source/css/_common/components/widgets/zoom-image.styl similarity index 69% rename from source/css/_common/components/widgets/other.styl rename to source/css/_common/components/widgets/zoom-image.styl index 6473cdb..9dc7c61 100644 --- a/source/css/_common/components/widgets/other.styl +++ b/source/css/_common/components/widgets/zoom-image.styl @@ -1,10 +1,3 @@ - -// Gallery in post / page. -.gallery-image { - margin-bottom: convert(hexo-config('gallery_waterfall.gap_y') || '10px'); - width: convert(hexo-config('gallery_waterfall.col_width') || '220px'); -} - .zoom-image-mask { position: fixed; top: 0; @@ -26,7 +19,6 @@ } &.show { - clearImgStyle(); position: absolute; z-index: $z-index2; margin: 0; diff --git a/source/css/_common/index.styl b/source/css/_common/index.styl index d79307e..f2765e6 100644 --- a/source/css/_common/index.styl +++ b/source/css/_common/index.styl @@ -1,5 +1,4 @@ @import './scaffolding/index.styl'; @import './outline/index.styl'; @import './components/index.styl'; - @import './responsive.styl'; diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl index d1951c9..dcb0894 100644 --- a/source/css/_common/outline/macro.styl +++ b/source/css/_common/outline/macro.styl @@ -15,12 +15,16 @@ .sidebar { float: convert(hexo-config('sidebar.position')); - width: convert(hexo-config('sidebar.width') || '$sidebar-width'); + + &.sticky { + position: fixed; + top: convert(hexo-config('sidebar.offsetTop') || '30px'); + z-index: $z-index0; + transform: translateZ(0); + } } .content { - width: $content-width; - if (hexo-config('sidebar.position') == 'left') { float: right; } else if (hexo-config('sidebar.position') == 'right') { @@ -28,22 +32,10 @@ } &-inner { - width: 100%; + width: $content-width; 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; - } - } - } - img { border: 1px solid $img-border-color; border-radius: 3px; @@ -60,43 +52,23 @@ } } - .external-link { - color: $gray-dark; - - i { - margin: 0 .1rem 0 .15rem; - font-size: .9em; - } - } - .table-container { overflow: auto; margin-bottom: 1rem; } - .table-plugin { - & tbody tr { - &:nth-of-type(odd) { - background-color: $table-row-odd-bg-color; - } - - &:hover { - background-color: $table-row-hover-bg-color; - } - } - } - .heading-link { color: $heading-color; + cursor: pointer; &::after { content: $icon-heading-link; margin-left: .3em; color: $heading-logo-color; opacity: 0; - @extend $font-awesome; transition-property: opacity; transition-ease(); + fontawesome-base(); } &:hover { diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl index 662167a..0562f1d 100644 --- a/source/css/_common/responsive.styl +++ b/source/css/_common/responsive.styl @@ -103,13 +103,13 @@ // // ----------------------------------------- // @media screen and (min-width: $xs-width) // .content -// font-size: $font-size-large +// font-size: $font-size-base + 2px // .sidebar-inner -// font-size: $font-size-large +// font-size: $font-size-base + 2px // .footer-inner -// font-size: $font-size-large +// font-size: $font-size-base + 2px // @media screen and (max-width: $xs-width) // #header diff --git a/source/css/_common/scaffolding/utils.styl b/source/css/_common/scaffolding/utils.styl index ee5a260..a4d9b93 100644 --- a/source/css/_common/scaffolding/utils.styl +++ b/source/css/_common/scaffolding/utils.styl @@ -55,7 +55,7 @@ popover-bg-color = alpha(#000, .7); position: relative; border-radius: 3px; padding: 8px 12px; - font-size: $font-size-large; + font-size: $font-size-base + 2px; line-height: 1rem; color: $black-light; background-color: #fff; diff --git a/source/css/_mixins/index.styl b/source/css/_mixins/index.styl index 1953107..80c1fc4 100644 --- a/source/css/_mixins/index.styl +++ b/source/css/_mixins/index.styl @@ -93,3 +93,11 @@ layout-card() { padding: 1rem 2rem; background-color: $white; } + +fontawesome-base() { + font: normal normal normal 14px / 1 $font-family-icons; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl index 2239a9b..99f4699 100644 --- a/source/css/_variables/index.styl +++ b/source/css/_variables/index.styl @@ -35,7 +35,7 @@ $md-width = 992px - 0.02px $lg-width = 1200px - 0.02px // Width -$sidebar-width = 260px +$sidebar-width = convert(hexo-config('sidebar.width') || '260px') $side-main-gap = 20px $content-width = $md-width $main-aside-gap = 40px @@ -187,7 +187,7 @@ $loading-bar-bg-color = #77b6ff $loading-bar-shadow-color = alpha(#77b6ff, .7) // Notification -$alert-success = #52c41a +$alert-success-color = #52c41a $alert-info-color = #1890ff $alert-warning-color = #faad14 $alert-error-color = #f5222d @@ -195,13 +195,6 @@ $alert-error-color = #f5222d // ------------------------------------------- // Icon font // ------------------------------------------- -$font-awesome - font: normal normal normal 14px/1 $font-family-icons; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - $icon-heading-link = '\f0c1' $icon-note-default = '\f0a9' diff --git a/source/css/index.styl b/source/css/index.styl index 24a5512..52bb193 100644 --- a/source/css/index.styl +++ b/source/css/index.styl @@ -1,15 +1,12 @@ // Variables Layer // -------------------------------------------------- @import './_variables/index.styl'; - // Mixins Layer // -------------------------------------------------- @import './_mixins/index.styl'; - // Common Layer // -------------------------------------------------- @import './_common/index.styl'; - // Custom Layer // -------------------------------------------------- @import './_custom/index.styl'; diff --git a/source/js/header.js b/source/js/header.js index f2763be..0519f99 100644 --- a/source/js/header.js +++ b/source/js/header.js @@ -1,6 +1,6 @@ $(document).ready(function () { var $menu = $('.header-nav-menu'); - var $menuItem = $('.header-nav-menu .menu-item'); + var $menuItem = $('.header-nav-menu-item'); $(document).on('click', function () { $menu.removeClass('show'); diff --git a/source/js/scroll.js b/source/js/scroll.js index 67a241f..d0893a9 100644 --- a/source/js/scroll.js +++ b/source/js/scroll.js @@ -5,18 +5,19 @@ $(document).ready(function () { var isNavShow = true; function headerNavScroll () { + var $headerNav = $('.header-nav'); var scrollTop = $(window).scrollTop(); var delta = scrollTop - prevScrollTop; if (scrollTop === 0) { - $('.header-nav').removeClass('fixed'); - $('.header-nav').removeClass('slider-up'); - $('.header-nav').addClass('slider-down'); + $headerNav.removeClass('fixed'); + $headerNav.removeClass('slider-up'); + $headerNav.addClass('slider-down'); isNavFix = false; } else { if (!isNavFix) { - $('.header-nav').addClass('fixed'); + $headerNav.addClass('fixed'); isNavFix = true; } @@ -25,13 +26,13 @@ $(document).ready(function () { // Make the state of nav bar not change due to tiny scrolling. if (Math.abs(delta) > MIN_SCROLL_TO_CHANGE_NAV) { if (isNavShow && delta > 0) { - $('.header-nav').removeClass('slider-down'); - $('.header-nav').addClass('slider-up'); + $headerNav.removeClass('slider-down'); + $headerNav.addClass('slider-up'); isNavShow = false; } else if (!isNavShow && delta < 0) { - $('.header-nav').removeClass('slider-up'); - $('.header-nav').addClass('slider-down'); + $headerNav.removeClass('slider-up'); + $headerNav.addClass('slider-down'); isNavShow = true; } @@ -48,10 +49,11 @@ $(document).ready(function () { } var isBack2topShow = false; + // Back the page to top. function back2top () { function back2topHandler () { - var $top = $('#back-top'); + var $top = $('#back2top'); var scrollTop = $(window).scrollTop(); if (scrollTop !== 0) { @@ -72,7 +74,7 @@ $(document).ready(function () { back2topHandler(); }, 500)); - $('#back-top').on('click', function () { + $('#back2top').on('click', function () { $('body').velocity('stop').velocity('scroll'); }); } @@ -87,7 +89,7 @@ $(document).ready(function () { Stun.utils.pjaxReloadScroll = function () { // Click the heading. - $('.content') + $('#content') .find('h1,h2,h3,h4,h5,h6') .on('click', function () { scrollHeadingToTop('#' + $(this).attr('id')); diff --git a/source/js/sidebar.js b/source/js/sidebar.js index c997fb6..a56669a 100644 --- a/source/js/sidebar.js +++ b/source/js/sidebar.js @@ -6,14 +6,10 @@ $(document).ready(function () { var isRemoveTocClass = false; var tocDepth = CONFIG.sidebar.renderTocDepth; // Optimize selector by theme config. - var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6'.slice(0, tocDepth * 3); + var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6,'.slice(0, tocDepth * 3).slice(0, -1); var $postBody = $('.post-body'); var $allTocItem = $('.sidebar-toc li'); - if (tocDepth !== 6) { - HEADING_SELECTOR = HEADING_SELECTOR.slice(0, -1); - } - // Automatically expand items in the article directory // based on the scrolling of heading in the article. function autoSpreadToc () { @@ -42,43 +38,44 @@ $(document).ready(function () { } if (currHeading !== lastHeading) { - var targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]'); + var $targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]'); // If the relevant "" is not found, remain the state of the toc, // either, remove styles for all active states. - if (targetLink[0]) { + if ($targetLink[0]) { $allTocItem.removeClass('active current'); } - targetLink.parents('li').addClass('active'); - targetLink.parent().addClass('current'); + $targetLink.parents('li').addClass('active'); + $targetLink.parent().addClass('current'); lastHeading = currHeading; } } // Whether toc needs scrolling. var isTocScroll = false; + // Scroll the post toc to the middle. function scrollTocToMiddle () { - var $tocWrapperHeight = $('.sidebar-toc').height(); + var $tocWrapHeight = $('.sidebar-toc').height(); var $tocHeight = $('.sidebar-toc .toc').height(); - if ($tocHeight <= $tocWrapperHeight) return; + if ($tocHeight <= $tocWrapHeight) return; - var $tocWrapper = $('.sidebar-toc'); + var $tocWrap = $('.sidebar-toc'); var $currTocItem = $('.sidebar-toc .current a'); - if ($currTocItem[0] && $tocWrapper[0]) { - var tocTop = $currTocItem.offset().top - $tocWrapper.offset().top; + if ($currTocItem[0] && $tocWrap[0]) { + var tocTop = $currTocItem.offset().top - $tocWrap.offset().top; - isTocScroll = tocTop > $tocWrapperHeight || tocTop < 0; + isTocScroll = tocTop > $tocWrapHeight || tocTop < 0; } if (isTocScroll) { $currTocItem .velocity('stop') .velocity('scroll', { - container: $tocWrapper, - offset: (-$tocWrapperHeight / 2), + container: $tocWrap, + offset: (-$tocWrapHeight / 2), duration: 500, easing: 'easeOutQuart' }); @@ -91,28 +88,24 @@ $(document).ready(function () { // Sticky the sidebar when it arrived the top. function sidebarSticky () { - var mainInner = $('.main-inner')[0]; - - if (mainInner) { - var targetY = mainInner.getBoundingClientRect().top; - - if (targetY < SIDEBAR_STICKY_TOP) { - if (!isSidebarSticky) { - $('.sidebar-inner').addClass('sticky'); - isSidebarSticky = true; - } - } else { - if (isSidebarSticky) { - $('.sidebar-inner').removeClass('sticky'); - isSidebarSticky = false; - } + var targetY = $('#main')[0].getBoundingClientRect().top; + + if (targetY < SIDEBAR_STICKY_TOP) { + if (!isSidebarSticky) { + $('#sidebar').addClass('sticky'); + isSidebarSticky = true; + } + } else { + if (isSidebarSticky) { + $('#sidebar').removeClass('sticky'); + isSidebarSticky = false; } } } // Update the reading progress lines of post. function readProgress () { - var $post = $('.content'); + var $post = $('#content'); var scrollH = ($post[0] && $post[0].getBoundingClientRect().top * -1) || 0; @@ -120,8 +113,8 @@ $(document).ready(function () { Math.abs($post.height() - $(window).height())) * 100); percent = percent > 100 ? 100 : percent < 0 ? 0 : percent; - $('.sidebar-progress-number').html(percent); - $('.sidebar-progress-line').css( + $('.sidebar-reading-info-num').html(percent); + $('.sidebar-reading-line').css( 'transform', 'translateX(' + (percent - 100) + '%)' ); } @@ -143,29 +136,35 @@ $(document).ready(function () { }, 150)); Stun.utils.pjaxReloadSidebar = function () { - var $tocWrapper = $('.sidebar-toc'); - var $view = $('.sidebar-overview'); + var $navToc = $('.sidebar-nav-toc'); + var $navOv = $('.sidebar-nav-ov'); + var $tocWrap = $('.sidebar-toc'); + var $overview = $('.sidebar-ov'); - $('.sidebar-nav-toc').on('click', function () { - $('.sidebar-nav-toc').toggleClass('current'); - $('.sidebar-nav-overview').toggleClass('current'); + $navToc.on('click', function () { + if ($(this).hasClass('current')) return; - $tocWrapper.css('display', 'block'); - $tocWrapper.velocity('fadeIn'); + $navToc.addClass('current'); + $navOv.removeClass('current'); - $view.css('display', 'none'); - $view.velocity('fadeOut'); + $tocWrap.css('display', 'block'); + $tocWrap.velocity('stop').velocity('fadeIn'); + + $overview.css('display', 'none'); + $overview.velocity('stop').velocity('fadeOut'); }); - $('.sidebar-nav-overview').on('click', function () { - $('.sidebar-nav-toc').toggleClass('current'); - $('.sidebar-nav-overview').toggleClass('current'); + $navOv.on('click', function () { + if ($(this).hasClass('current')) return; + + $navOv.addClass('current'); + $navToc.removeClass('current'); - $tocWrapper.css('display', 'none'); - $tocWrapper.velocity('fadeOut'); + $tocWrap.css('display', 'none'); + $tocWrap.velocity('stop').velocity('fadeOut'); - $view.css('display', 'block'); - $view.velocity('fadeIn'); + $overview.css('display', 'block'); + $overview.velocity('stop').velocity('fadeIn'); }); }; diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js index 7345503..95bad5b 100644 --- a/source/js/stun-boot.js +++ b/source/js/stun-boot.js @@ -8,14 +8,15 @@ $(document).ready(function () { Stun.utils.pjaxReloadBoot = function () { this.initTocDisplay(); - this.addCopyButtonToCopyright(); + this.addCopyButton(); this.registerCopyEvent(); + CONFIG.reward && this.registerShowReward(); - CONFIG.gallery_waterfall && this.showImageToWaterfall(); CONFIG.lazyload && this.lazyLoadImage(); + CONFIG.gallery_waterfall && this.showImageToWaterfall(); if (CONFIG.external_link) { - var WRAPPER = '.archive-inner, .post-title'; + var WRAPPER = '.archive, .post-header-title'; this.addIconToExternalLink(WRAPPER); } diff --git a/source/js/utils.js b/source/js/utils.js index 5e61d33..e3fb8e4 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -111,10 +111,11 @@ Stun.utils = Stun.$u = { }; if (!$('.stun-alert')[0]) { + var fa_prfix = CONFIG.fontawesome.prefix; var $alert = $( '
' + '
' + - '' + + '' + '' + text + '' + '
' + '
' @@ -179,7 +180,7 @@ Stun.utils = Stun.$u = { $('.sidebar-nav').addClass('hide'); $('.sidebar-toc').addClass('hide'); - $('.sidebar-overview').removeClass('hide'); + $('.sidebar-ov').removeClass('hide'); }, // Wrap images with fancybox support. wrapImageWithFancyBox: function () { @@ -235,14 +236,12 @@ Stun.utils = Stun.$u = { var colWidth = parseInt(gConfig.col_width); var colGapX = parseInt(gConfig.gap_x); - this.waitAllImageLoad('.gallery img', function () { - $('.gallery').masonry({ - itemSelector: '.gallery-image', - columnWidth: colWidth, - percentPosition: true, - gutter: colGapX, - transitionDuration: 0 - }); + $('.gallery').masonry({ + itemSelector: '.gallery__img', + columnWidth: colWidth, + percentPosition: true, + gutter: colGapX, + transitionDuration: 0 }); }, // Lazy load the images of post. @@ -251,11 +250,12 @@ Stun.utils = Stun.$u = { }, // Add a mark icon to the link with `target="_blank"` attribute. addIconToExternalLink: function (container) { - if (!$(container)[0]) return; + if (!$(container).length) return; + var fa_prfix = CONFIG.fontawesome.prefix; var $wrapper = $(''); var $icon = $( - '' ); @@ -275,10 +275,10 @@ Stun.utils = Stun.$u = { var isNext = e.keyCode === _this.codeToKeyCode('ArrowRight'); if (e.ctrlKey && isPrev) { - var prev = $('.article-prev').find('a')[0]; + var prev = $('.paginator-post-prev').find('a')[0]; prev && prev.click(); } else if (e.ctrlKey && isNext) { - var next = $('.article-next').find('a')[0]; + var next = $('.paginator-post-next').find('a')[0]; next && next.click(); } }); @@ -286,14 +286,14 @@ Stun.utils = Stun.$u = { // Show / Hide the reward QR. registerShowReward: function () { $('.reward-button').on('click', function () { - var $container = $('.reward-qr-wrapper'); + var $container = $('.reward-qr'); if ($container.is(':visible')) { $container.css('display', 'none'); } else { $container .velocity('stop') - .velocity('transition.slideDownBigIn', { + .velocity('transition.slideDownIn', { duration: 300 }); } @@ -301,7 +301,7 @@ Stun.utils = Stun.$u = { }, // Click to zoom in image, without fancybox. registerClickToZoomImage: function () { - $('.content img').not(':hidden').each(function () { + $('#content img').not(':hidden').each(function () { $(this).addClass('zoom-image'); }); @@ -371,7 +371,7 @@ Stun.utils = Stun.$u = { }); } }, - addCopyButtonToCopyright: function () { + addCopyButton: function () { $('figure.highlight').each(function () { if (!$(this).find('figcaption')[0]) { var CODEBLOCK_CLASS_NAME = 'highlight'; @@ -389,11 +389,12 @@ Stun.utils = Stun.$u = { } }); + var fa_prfix = CONFIG.fontawesome.prefix; var $copyIcon = $( '
' + - '' + + '' + '
' ); -- GitLab