diff --git a/_config.yml b/_config.yml index f3253fa..79a6e51 100644 --- a/_config.yml +++ b/_config.yml @@ -3,13 +3,15 @@ # --------------- # theme_color: # enable: true -# main: "#7A7FF1" -# paginator: "#7A7FF1" +# main: "#49B1F5" +# paginator: "#00c4b6" # button_hover: "#FF7242" -# text_selection: "#69c46d" -# link_color: "#858585" +# text_selection: "#00c4b6" +# link_color: "#99a9bf" +# meta_color: '#858585' # hr_color: "#A4D8FA" # read-mode-bg_color: '#FAF9DE' +# inline-code-color: '#F47466' # Main menu navigation # format: xxx: /xxx/||icon @@ -45,11 +47,13 @@ favicon: /img/favicon.ico # Highlight theme # --------------- highlight_theme: light -highlight_copy: true +highlight_copy: false #代碼複製按鈕 +highlight_lang: true #代碼語言顯示 +highlight_shrink: false #代碼框不展開，需點擊 '>' 打開 code_word_wrap: false -# Nav settings +# social settings # formal: # icon: link # --------------- @@ -57,6 +61,7 @@ social: fa fa-github: https://github.com/jerryc127 fa fa-rss: /atom.xml +#### search #### # Algolia search # --------------- algolia_search: @@ -69,7 +74,6 @@ algolia_search: hits_empty: "We didn't find any results for the search: ${query}" # if there are no result hits_stats: "${hits} results found in ${time} ms" - # Local search # Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索 # --------------- @@ -95,8 +99,7 @@ katex: hide_scrollbar: true - -# Analysis +#### Analysis #### # --------------- # baidu_analytics: @@ -151,7 +154,6 @@ lodding_bg: flink: /img/friend_404.gif post_page: /img/404.jpg - post_meta: date_type: both # or created or updated 文章日期是创建日或者更新日或都显示 categories: true # or false 是否显示分类 @@ -174,13 +176,14 @@ post_copyright: license: CC BY-NC-SA 4.0 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ +# 自動節選 auto_excerpt: enable: true length: 150 -# Share System -# --------------- +#### Share System #### +# ----------------------------------------- addThis: enable: false pubid: @@ -201,8 +204,8 @@ addtoany: - email - copy_link -# Comments System -# --------------- +#### Comments System #### +# ------------------------------------ disqus: enable: false shortname: @@ -242,8 +245,8 @@ valine: placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints ) guest_info: nick,mail,link #valine comment header inf -# Footer Settings -# --------------- +##### Footer Settings #### +# ------------------------------------ since: 2018 footer_custom_text: @@ -256,15 +259,8 @@ ICP: url: text: -# busuanzi count for PV / UV in site -busuanzi: - site_uv: true - site_pv: true - page_pv: true - - - +#### 站長驗證 #### # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ google_site_verification: @@ -281,6 +277,8 @@ baidu_site_verification: # see http://zhanzhang.so.com/ qihu_site_verification: + +# 友情鏈接界面設置 Flink: headline: 友情鏈接 info_headline: 我的Blog資料 @@ -290,25 +288,7 @@ Flink: info: Blog 簡介： 今日事,今日畢 comment: 如果需要交換友鏈,請留言 - - -runtimeshow: - enable: true - start_date: 6/7/2018 00:00:00 - - -nightshift: - enable: true - - -activate_power_mode: - enable: false - - - -announcement: - content: 感謝訪問本站，若喜歡請收藏 ^_^ - +# 打賞按鈕 reward: enable: true QR_code: @@ -319,64 +299,101 @@ reward: img: /img/alipay.jpg text: 支付寶 +# 推薦文章 related_post: enable: true limit: 6 # 顯示推薦文章數目 -# canvas_ribbon +#### 美化/效果 #### +#-------------------------------- + +# 設置網站背景 +# 可設置圖片 或者 顔色 +# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg) +# 顔色 background: '#49B202' +# 留空 顯示白色 +background: + +# footer是否顯示圖片背景(與top_img一致) +footer_bg: false + + +# canvas_ribbon 禁止彩帶背景 # See: https://github.com/hustcc/ribbon.js canvas_ribbon: - enable: true + enable: false size: 150 alpha: 0.6 zIndex: -1 click_to_change: false - +# 動態彩帶 canvas_ribbon_piao: enable: false +# canvas_nest +# https://github.com/hustcc/canvas-nest.js +canvas_nest: + enable: false + color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) + opacity: 0.7 # the opacity of line (0~1), default: 0.5. + zIndex: -1 # z-index property of the background, default: -1. + count: 99 # the number of lines, default: 99. + script: https://cdn.jsdelivr.net/gh/jerryc127/CDN/js/canvas-nest.js # or /js/third-party/canvas-nest.js -# 避免重複網址分散seo -canonical: true +# 打字效果 +activate_power_mode: + enable: false -# 禁止百度轉碼 -disable_baidu_transformation: true +# 鼠標點擊效果 +fireworks: + enable: false -twitter_meta: true -Open_Graph_meta: true +# 頭像會一直轉圈 +avatar_effect: false -#閲讀模式 -readmode: - enable: true +# 網站顯示模式 +# day 默認模式 +# night 黑暗模式（不建議） +display_mode: day -#全局字體 +# 美化post頁顯示 +post_beautify: + enable: false + title-prefix-icon: '\f0c1' + title-prefix-icon-color: "#F47466" + +# 全局字體 font: enable: false font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number -#網站名字字體 -#左上角網站名字 主頁居中網站名字 -blog_title_font: - #字體鏈接 - font_link: https://fonts.googleapis.com/css?family=Titillium+Web +# 網站名字字體 +# 左上角網站名字 主頁居中網站名字 +blog_title_font: + font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接 font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif -#水平分隔綫 +# 水平分隔綫 hr: enable: false - #fontawesome上圖標的Unicode - icon: '\f21c' + icon: '\f21c' #fontawesome上圖標的Unicode icon-top: -20px # 主頁subtitle +# 打字效果 subtitle: enable: true sub1: 今日事,今日畢 sub2: Never put off till tomorrow what you can do today #如果有符號 ' ，記得前面加上 \ -#側邊欄顯示設置 + + + +#### 側邊欄 #### +#------------------------------------- +# 側邊欄顯示設置 aside: position: right # left or right card_author: true @@ -387,8 +404,28 @@ aside: card_archives: true card_webinfo: true +# 網站公告 +announcement: + content: 感謝訪問本站，若喜歡請收藏 ^_^ -## chinese traditional to Simplified +# busuanzi count for PV / UV in site +# 訪問人數 +busuanzi: + site_uv: true + site_pv: true + page_pv: true + +# 網頁開通時間 +# 格式: 月/日/年 時間 +# 也可以寫成 年/月/日 時間 +runtimeshow: + enable: true + start_date: 6/7/2018 00:00:00 + + +#### 右下角按鈕 #### +#---------------------------------------------- +# 簡繁轉換 translate: enable: true # 默認按鈕顯示文字 @@ -404,20 +441,29 @@ translate: #當文字是繁體時，按鈕顯示的文字 msgToSimplifiedChinese: "简" +# 夜間模式 +nightshift: + enable: true -# 鼠標點擊效果 -fireworks: - enable: false +#閲讀模式 +readmode: + enable: true + + +#### other #### +#------------------------------------------------ #百度推送 baidu_push: enable: false -#https://instant.page/ -#prefetch預加載 +# https://instant.page/ +# prefetch預加載 instantpage: enable: true +# Note (Bootstrap Callout) +# https://muse.theme-next.org/docs/tag-plugins/note note: # Note tag style values: # - simple bs-callout old alert style. Default. @@ -431,8 +477,21 @@ note: # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 - -#圖片懶加載 +# 圖片懶加載 lazyload: enable: true - script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js \ No newline at end of file + script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js + +# 避免重複網址分散seo +canonical: true + +# 禁止百度轉碼 +disable_baidu_transformation: true + +# twitter分享自動帶上樣式 +# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png +twitter_meta: true + +# facebook QQ 等 分享自動帶上樣式 +# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png +Open_Graph_meta: true diff --git a/languages/default.yml b/languages/default.yml index 63845a8..223beff 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -20,7 +20,6 @@ page: sticky: Sticky no_title: No title archives: Archives -read_more: Read more post: created: Created diff --git a/languages/en.yml b/languages/en.yml index 03bc9f4..0940c4e 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -20,7 +20,6 @@ page: sticky: Sticky no_title: No title archives: Archives -read_more: Read more post: created: Created diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index c623001..65019f8 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -20,7 +20,6 @@ page: sticky: 置顶 no_title: 无题 archives: 时间轴 -read_more: 阅读更多 post: created: 发表于 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 283e9bd..7eab355 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -20,7 +20,6 @@ page: sticky: 置頂 no_title: 無題 archives: 時間軸 -read_more: 閲讀更多 post: created: 發表於 diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 00153b0..49253be 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -22,6 +22,9 @@ if (theme.canvas_ribbon && theme.canvas_ribbon.enable) if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable) include ./third-party/canvas-ribbon-piao.pug +if (theme.canvas_nest && theme.canvas_nest.enable) + include ./third-party/canvas-nest.pug + if theme.baidu_push && theme.baidu_push.enable script(src=url_for('js/baidupush.js')) diff --git a/layout/includes/comments/valine.pug b/layout/includes/comments/valine.pug index dfbbcc5..80d2747 100644 --- a/layout/includes/comments/valine.pug +++ b/layout/includes/comments/valine.pug @@ -2,8 +2,8 @@ if theme.valine && theme.valine.enable #vcomment.vcomment script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js') script. - var notify = '#{ theme.valine.notify }' == true ? true : false; - var verify = '#{ theme.valine.verify }' == true ? true : false; + var notify = #{ theme.valine.notify } == true ? true : false; + var verify = #{ theme.valine.verify } == true ? true : false; var GUEST_INFO = ['nick','mail','link']; var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){ return GUEST_INFO.indexOf(item) > -1 diff --git a/layout/includes/config.pug b/layout/includes/config.pug index 0be593f..c32460c 100644 --- a/layout/includes/config.pug +++ b/layout/includes/config.pug @@ -49,6 +49,8 @@ script. localSearch: !{localSearch}, translate: !{translate}, highlight_copy: '!{theme.highlight_copy}', + highlight_lang: '!{theme.highlight_lang}', + highlight_shrink: '!{theme.highlight_shrink}', copy: { success: '!{_p("copy.success")}', error: '!{_p("copy.error")}', diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug index 61c4854..f9fefba 100644 --- a/layout/includes/footer.pug +++ b/layout/includes/footer.pug @@ -1,4 +1,4 @@ -#footer.layout +#footer - var now = new Date() - var nowYear = now.getFullYear() if theme.since && theme.since != nowYear diff --git a/layout/includes/header.pug b/layout/includes/header.pug index bc88f99..b49db42 100644 --- a/layout/includes/header.pug +++ b/layout/includes/header.pug @@ -6,17 +6,56 @@ .menu-icon-first .menu-icon-second .menu-icon-third - + + .menu_mask + span.pull-right.menus .mobile_author_icon - img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) - .mobile_author-info__description= config.description + img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) + .mobile_post_data + if site.posts.length + .mobile_data_item.text-center + .mobile_data_link + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length_num= site.posts.length + + if site.tags.length + .mobile_data_item.text-center + .mobile_data_link + a(href=url_for(config.tag_dir) + '/' ) + .headline= _p('aside.tags') + .length_num= site.tags.length + + if site.categories.length + .mobile_data_item.text-center + .mobile_data_link + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length_num= site.categories.length + hr - .menus_item + .menus_items each value, label in theme.menu - a.site-page(href=value.split('||')[0]) - i.fa-fw(class=value.split('||')[1]) - span=' '+label + if !Array.isArray(value) + .menus_item + a.site-page(href=value.split('||')[0]) + i.fa-fw(class=value.split('||')[1]) + span=' '+label + else + .menus_item + a.site-page + i.fa-fw(class=label.split('||')[1] aria-hidden="true") + span=' '+label.split('||')[0] + i.fa.fa-chevron-down.menus-expand(aria-hidden="true") + ul.menus_item_child + each i in value + li + a.site-page(href=i.split('||')[1]) + i.fa-fw(class=i.split('||')[2]) + span=' '+i.split('||')[0] + + script. document.body.addEventListener('touchstart', function(){ }); span.pull-right diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 3d3ded0..53c45d2 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -22,6 +22,8 @@ - if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') - var pageAuthor = config.email ? config.author + ',' + config.email : config.author - var pageCopyright = config.copyright || config.author +- var body_class = theme.display_mode == 'night' ? 'night-mode' : '' + doctype html html(lang=config.language) @@ -44,9 +46,11 @@ html(lang=config.language) link(rel='stylesheet', href=item) include ./head.pug include ./config.pug - body + body(class=body_class) if theme.fireworks && theme.fireworks.enable canvas.fireworks + if theme.background + #web_bg if (is_post() && page.toc != false && theme.toc.enable) i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true") include ./sidebar.pug @@ -66,7 +70,9 @@ html(lang=config.language) div!= body else block content - footer + + - var footer_bg = theme.footer_bg == false ? '' : bg_img + footer(style=footer_bg) include ./footer.pug i.fa.fa-arrow-up#go-up(aria-hidden="true") include ./rightside.pug diff --git a/layout/includes/nav.pug b/layout/includes/nav.pug index 42215eb..4738f48 100644 --- a/layout/includes/nav.pug +++ b/layout/includes/nav.pug @@ -7,7 +7,8 @@ else if is_home() - nav#nav.full_page(style=bg_img) + nav#nav.full_page + .nav_bg(style=bg_img) include ./header.pug #site-info #site-title @@ -25,7 +26,8 @@ if is_home() i.fa.fa-angle-down.scroll-down-effects else - nav#nav.bg_local(style=bg_img) + nav#nav.not_index_bg + .nav_bg(style=bg_img) include ./header.pug #page_site-info #site-title diff --git a/layout/includes/post-bottom.pug b/layout/includes/post-bottom.pug index 6d8427b..240b5b3 100644 --- a/layout/includes/post-bottom.pug +++ b/layout/includes/post-bottom.pug @@ -1,8 +1,17 @@ -#post_bottom +- var no_comment_show = page.comments !== false ? '' : 'no_comment_show' +- var no_toc_show = (is_post() && page.toc != false && theme.toc.enable) ? '' : 'no_toc_show' +#post_bottom(class= no_comment_show + ' ' + no_toc_show) #post_bottom_items - a#to_comment(href="#post-comment") - i.scroll_to_comment.fa.fa-comments - i#mobile_toc.fa.fa-list - #toc_mobile - .toc_mobile_headline= _p('sidebar.catalog') - !=toc(page.content,{"class":"toc_mobile_items"}) + if page.comments !== false + a#mobile_to_comment(href="#post-comment") + i.mobile_scroll_to_comment.fa.fa-comments + + if (is_post() && page.toc != false && theme.toc.enable) + i#mobile_toc.fa.fa-list + #toc_mobile + .toc_mobile_headline= _p('sidebar.catalog') + if (page.encrypt == true) + .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items"}) + else + !=toc(page.content,{"class":"toc_mobile_items"}) + diff --git a/layout/includes/recent-posts.pug b/layout/includes/recent-posts.pug index 77d66fb..75a7ef3 100644 --- a/layout/includes/recent-posts.pug +++ b/layout/includes/recent-posts.pug @@ -62,8 +62,6 @@ each article , index in page.posts.data - let expert = content.substring(0, theme.auto_excerpt.length) - content.length > theme.auto_excerpt.length ? expert += ' ...' : '' .content!= expert - .more_setting - a.more.more--border.more--primary.more--animated(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more') else .content!= article.description diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 92bbb86..c750e09 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -1,4 +1,7 @@ section#rightside.rightside + if is_post() && page.comments !== false + a#to_comment(href="#post-comment") + i.scroll_to_comment.fa.fa-comments if theme.readmode.enable && is_post() i#readmode.fa.fa-book(title=_p('rightside.readmode_title')) i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title')) @@ -6,4 +9,5 @@ section#rightside.rightside if theme.translate && theme.translate.enable a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title'))= theme.translate.default if theme.nightshift.enable - i#nightshift.fa.fa-moon-o.nightshift(title=_p('rightside.night_mode_title')) + - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o' + i#nightshift.nightshift(class=display_mode title=_p('rightside.night_mode_title')) diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index 2e49cc2..58b61a9 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -16,5 +16,9 @@ span.progress-notice= _p('sidebar.have_read') span.progress-num 0 span.progress-percentage % - div.sidebar-toc__progress-bar - div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) \ No newline at end of file + div.sidebar-toc__progress-bar + if (page.encrypt == true) + div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) + else + div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) + \ No newline at end of file diff --git a/layout/includes/third-party/canvas-nest.pug b/layout/includes/third-party/canvas-nest.pug new file mode 100644 index 0000000..0410c9e --- /dev/null +++ b/layout/includes/third-party/canvas-nest.pug @@ -0,0 +1 @@ +script(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count src=url_for(theme.canvas_nest.script)) \ No newline at end of file diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index b31fff2..0e4ee3e 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -2,7 +2,7 @@ .card-content .post_data .data-item.text-center - img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) + img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) p.author-info__name.text-center= config.author p.author-info__description.text-center= config.description diff --git a/layout/post.pug b/layout/post.pug index 848302a..93bdc68 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -45,7 +45,7 @@ block top_img block content article#post(class="") #post-content.article-container!= page.content - if (theme.post_copyright && theme.post_copyright.enable) + if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false) .post-copyright .post-copyright__author span.post-copyright-meta= _p('post.copyright.author') + ": " diff --git a/package.json b/package.json new file mode 100644 index 0000000..b0b6523 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "name": "hexo-theme-melody", + "version": "1.1.5", + "description": "A Hexo Theme: Butterfly" + +} \ No newline at end of file diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index e68988f..9cb98c8 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -23,6 +23,19 @@ body *::-webkit-scrollbar-track background-color: transparent + +#web_bg + background: $web-bg + height: 100% + width: 100% + background-size: cover + position: fixed + z-index: -999 + background-attachment: local + background-repeat: no-repeat + background-position: center + + h1, h2, h3, @@ -160,6 +173,10 @@ table color: #fff border-color: #fff + &:hover + background-color: darken($light-blue, 40) + + textarea font-size: 0.7rem background: url(/img/comment_bg.png) 100% 100% no-repeat @@ -181,11 +198,8 @@ table .vnum font-size: 1.1rem - .vnick - font-size: 100% - .vsys - font-size: 70% + font-size: 80% .vtime font-size: .65rem @@ -194,14 +208,21 @@ table font-size: 100% .vat - font-size: .7125rem; - color: $cyan; - border: 1px solid $cyan; - padding: 0 .8rem; - border-radius: 5px; - + font-size: .7125rem + color: $cyan + border: 1px solid $cyan + padding: 0 .8rem + border-radius: 5px -#site-title, #site-sub-title, + &:hover + background-color: alpha($cyan,0.5) + + code, pre + font-size: 98% + font-family: $code-font + +.full_page #site-title, +.full_page #site-sub-title, #site-name, #aside_content .author-info__name, #aside_content .author-info__description @@ -216,7 +237,8 @@ table opacity: 0 transition: all .2s - #readmode,#font_plus,#font_minus + + #readmode,#font_plus,#font_minus,#to_comment width: 30px height: 30px background-color: $light-blue @@ -228,6 +250,9 @@ table margin-bottom: 2px cursor: pointer text-decoration: none + + #to_comment + display: none #font_minus,#font_plus display: none @@ -273,70 +298,67 @@ table // bookmark 樣式 -.fc-container .fancybox-bg { - background: #eee; -} +.fc-container .fancybox-bg + background: #eee -.fancybox-is-open.fc-container .fancybox-bg { - opacity: 0.95; -} -.fc-content { - margin: 20px; - max-width: 550px; - padding: 50px; - box-shadow: 10px 10px 60px -25px; - border-radius: 4px; -} +.fancybox-is-open.fc-container .fancybox-bg + opacity: 0.95 -.fc-content h3 { - margin-top: 0; - font-size: 1.6em; - letter-spacing: normal; -} -.fc-content p { - color: #666; - line-height: 1.5; -} +.fc-content + margin: 20px + max-width: 550px + padding: 50px + box-shadow: 10px 10px 60px -25px + border-radius: 4px + + +.fc-content h3 + margin-top: 0 + font-size: 1.6em + letter-spacing: normal + + +.fc-content p + color: #666 + line-height: 1.5 + + +.fc-content p:last-child + margin-bottom: 0 -.fc-content p:last-child { - margin-bottom: 0; -} /* Custom animation */ .fancybox-fx-material.fancybox-slide--previous, -.fancybox-fx-material.fancybox-slide--next { - transform: translateY(-60px) scale(1.1); - opacity: 0; -} +.fancybox-fx-material.fancybox-slide--next + transform: translateY(-60px) scale(1.1) + opacity: 0 + + +.fancybox-fx-material.fancybox-slide--current + opacity: 1 + transform: translateY(0) scale(1) -.fancybox-fx-material.fancybox-slide--current { - opacity: 1; - transform: translateY(0) scale(1); -} .bookmark-ok - background: #FF6666; - border-width: 0; - color: #fff; - text-decoration: none; - padding: 7px 20px; - line-height: 1.5; - border-radius: 20px; - text-transform: uppercase; - font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 80%; - font-weight: 700; - margin: 5px 5px 5px 0; - display: inline-block; - cursor: pointer; - outline: none; - transition: all .2s ease-in-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + background: #FF6666 + border-width: 0 + color: #fff + text-decoration: none + padding: 7px 20px + line-height: 1.5 + border-radius: 20px + text-transform: uppercase + font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif + font-size: 80% + font-weight: 700 + margin: 5px 5px 5px 0 + display: inline-block + cursor: pointer + outline: none + transition: all .2s ease-in-out + user-select: none .tright text-align: right @@ -344,6 +366,12 @@ table .is_visible display: block !important +.is_invisible + display: none !important + +.is_hidden + overflow: hidden + .fireworks position: fixed z-index: -1 diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index b77b297..6e07ddc 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -2,21 +2,8 @@ @require "theme" @require "diff" -// languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown" wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap") -// loopForLanguages() -// for lang in languages -// .article-container -// figure.highlight -// &{"." + lang} -// table -// &:before -// content: lang - -// loopForLanguages() - -// Placeholder: $code-block $code-block overflow: auto margin: 1rem 0 @@ -102,18 +89,8 @@ blockquote width: auto border: none - &:before - position: absolute - z-index: 1 - display: inline-block - margin-top: -1.4rem - padding: 0 0.7rem - width: 5rem - color: $highlight-foreground - content: attr(data-content) - font-weight: bold - font-size: 0.8rem - line-height: 1.4rem + if hexo-config('highlight_shrink') == true + display: none &:after position: absolute diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index a213a73..4a140b9 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -54,7 +54,7 @@ .headline display: block font-size: 0.7rem - letter-spacing: 1px + // letter-spacing: 1px margin-bottom: -21px text-transform: uppercase color:#4c4948 @@ -258,9 +258,6 @@ .card-archives margin-bottom: 20px - - .card-announcement-animation - animation: announ_animation 1.5s infinite .card-webinfo .webinfo diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index d6dfb6f..012ae13 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -2,16 +2,29 @@ footer margin-top: 1rem background: $light-blue background-attachment: local + background-position: bottom + background-size: cover + position: relative - &.footer-bg - background-position: bottom - background-size: cover + if hexo-config('footer_bg') != false + &:before + position: absolute + bottom: 0 + left: 0 + display: block + content: '' + width: 100% + height: 100% + opacity: 0.5 + background-color: #394245 + background-image: linear-gradient(234deg, #394245 0%, #000 100%) #footer padding: 1.2rem 1rem 1rem color: $light-grey text-align: center + position: relative a color: $light-grey diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 1ef97fe..04c3b78 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -1,18 +1,21 @@ #nav position: relative margin-bottom: 1rem - background-color: $light-blue - background-position: center - background-size: cover - &.full_page - background-attachment: local height: 100vh - &.bg_local + .nav_bg + width: 100% + height: 100% + background-color: $light-blue + background-position: center + background-size: cover background-attachment: local + &.not_index_bg + height: 20rem + #site-social-icons margin: 0 auto @@ -49,6 +52,11 @@ #site-sub-title font-size: 0.8rem +#page_site-info + position: absolute + top: 10rem + width: 100% + .scroll-down position: absolute bottom: 0 @@ -58,6 +66,10 @@ font-size: 30px text-align: center + .scroll-down-effects + position: absolute + color: #fff + #page-header position: absolute @@ -103,11 +115,23 @@ -webkit-transform: rotate(-45deg) translate(4px, -4px) transform: rotate(-45deg) translate(4px, -4px) + .menu_mask + position: fixed + top: 0 + bottom: 0 + width: 100% + height: 110vh + left: 0 + right: 0 + background: alpha($black,0.7) + display: none + .menus .mobile_author_icon display: none - padding: 3rem 1.5rem 0 + padding: 1.3rem 1.5rem 0 text-align: center + img height: 120px @@ -115,24 +139,49 @@ display: inline-block vertical-align: top border-radius: 70px - -webkit-transition: all .3s - -moz-transition: all .3s - -o-transition: all .3s - -ms-transition: all .3s transition: all .3s + .mobile_post_data + display: flex + justify-content: center + padding: .6rem .5rem 0 + display: none + + .mobile_data_item + flex: 1 + + .mobile_data_link + a + text-decoration: none + + .length_num + font-size: .9rem + color: #000 + + .headline + display: block + font-size: 0.7rem + // letter-spacing: .5px + text-transform: uppercase + color:#4c4948 + + .menus-expand + position: absolute + width: 30px !important + height: 30px + right: 0 + padding: 6px + display: none + transform: rotate(0deg) + transition: all .3s + + &.menus-closed + transform: rotate(180deg) !important + transition: all .3s + hr margin: 1rem auto display: none - - &.menu_open - display: block - animation: menu_open .3s - - &.menu_close - animation: menu_close .3s - display: block - a color: $light-grey @@ -143,13 +192,10 @@ .site-page position: relative - margin-left: 0.6rem padding-bottom: 0.3rem text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3) font-size: 0.7rem cursor: pointer - margin-left: 1rem - &::after position: absolute bottom: 0 @@ -202,15 +248,59 @@ font-weight: bold cursor: pointer -@media screen and (min-width: $sm) +@media screen and (min-width: $sm) #site-title font-size: 2rem #site-sub-title font-size: 1.2rem -@media screen and (max-width: $sm) + #page-header + .menus_item + display: inline-block + padding: 0 0.5rem + &:hover,&:focus + .menus_item_child + display: block + + .menus_item_child + position: absolute + background-color: alpha($white, 0.8) + padding: 8px 10px + width: fit-content + border-radius: 5px + box-shadow: 0 5px 20px -4px rgba(0,0,0,.5) + display: none + opacity: 1 + animation: sub_menus .3s .1s ease both + + &:before + content: "" + position: absolute + top: -20px + left: 50% + margin-left: -10px + border-width: 10px + border-style: solid + border-color: transparent transparent alpha($white, 0.8) + + .menus_item_child li + list-style: none + text-align: center + + a + color: #3b3a3a; + text-shadow: none; + + &.fixed.visible + .menus_item_child + background-color: #ffffff + + &:before + border-color: transparent transparent #ffffff + +@media screen and (max-width: $sm) #page-header padding: 10px 0.8rem @@ -220,41 +310,56 @@ .menus position: fixed top: 0 - right: 0 - width: 100% + right: -250px + width: 250px height 101vh background: $white cursor: pointer box-shadow: 0 0 4px rgba(0, 0, 0, 0.27) - z-index: -1 - overflow: auto + z-index: 1 + overflow-y: scroll display: none + + .mobile_post_data + display: flex - a - display: inline-block !important - opacity: 1 !important - // margin-left: 0 - // padding-top: 0.3rem - // padding-bottom: 0.3rem - // padding-left: 0.6rem - margin: 0 - padding: .5rem 1rem - color: $font-black - text-shadow: none - font-size: 0.8rem - z-index: 0 + .menus_items + a + display: block !important + opacity: 1 !important + margin: 0 + padding: .3rem 1.5rem + color: $font-black + text-shadow: none + font-size: 0.8rem + z-index: 0 + text-overflow: ellipsis + overflow: hidden + white-space: nowrap + + i + width: 30% + text-align: left + span + width 70% - &:hover - color: $light-blue - + &:hover + color: $light-blue + + .menus-expand + display: inline-block + + .menus_item_child + list-style: none + margin: 0 + .mobile_author_icon display: block - .menus_item + .menus_items padding: 0 .5rem - margin-bottom: 4rem - text-align: center + margin-bottom: 5rem hr display: block @@ -267,5 +372,8 @@ &.fixed.open-sidebar .search - display: inline-block; - opacity: 1; + display: inline-block + opacity: 1 + + + diff --git a/source/css/_layout/nightshift.styl b/source/css/_layout/nightshift.styl index 9ccdb5e..e796d82 100644 --- a/source/css/_layout/nightshift.styl +++ b/source/css/_layout/nightshift.styl @@ -1,8 +1,5 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .night-mode - footer - background: #2d3035 - #sidebar background: #2d3035 !important box-shadow: -0.25rem 0 0.25rem #2d3035 !important @@ -39,7 +36,7 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") // 評論 #vcomment - * + p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick color: #99a9bf !important .vsys @@ -48,6 +45,26 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .vbtn background: rgb(45, 48, 53) !important color: #99a9bf !important + border: 1px solid #99a9bf + + .vwrap + border: 1px solid #99a9bf + + input + border-bottom: 1px dashed #616a6b + + .vh + border-bottom: 1px dashed #616a6b + + pre + background-color: #2d3035 + border: 1px solid #99a9bf + + .vcontent.expand:before + background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%)) + + .vcontent.expand:after + background: hsla(204, 5%, 22%, 1) .recent-post-item .article-title color: #99a9bf @@ -126,7 +143,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .translate_chn_to_cht, .nightshift, - #readmode + #readmode, + #to_comment background-color: #2d3035 !important img @@ -162,7 +180,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") background:#2d3035 #nav, - #top-container + #top-container, + footer &::before content: "" position: absolute @@ -181,10 +200,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") #site-info .blogtitle, span.subtitle, + #site-title, #post-info .posttitle, #post-info #post-meta, #site-social-icons i, - #top-container a + #top-container a, + #footer, + #footer a, + #page-header a color: rgba(238,238,238,.6) //打賞 分享 @@ -199,8 +222,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") &::-webkit-scrollbar-thumb background: lighten(#2d3035,5) - .more - background-color: #616a6b #post_bottom background: #2d3035 @@ -215,6 +236,16 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") a color: #99a9bf !important + #web_bg + background-color: #2d3032 + + #hbe-security + label + color: #99a9bf !important + input + background-color: #616a6b + + @media screen and (max-width: 768px) .night-mode color: #99a9bf @@ -223,6 +254,12 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") #page-header .menus background: #2d3035 + + .headline + color: #99a9bf !important + + .length_num + color: darken(#99a9bf,10) !important a color: #99a9bf !important .menu-icon-first, @@ -239,6 +276,18 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .recent-post-item background: #2d3035 !important + #page-header + .menus_item_child + background-color: #2d3035 !important + + &:before + border-color: transparent transparent #2d3035 !important + + li + a + color: #99a9bf + + diff --git a/source/css/_layout/page.styl b/source/css/_layout/page.styl index b23536c..26d8e7b 100644 --- a/source/css/_layout/page.styl +++ b/source/css/_layout/page.styl @@ -104,24 +104,6 @@ galleryItemStyle(w, h) time color: $grey - - .more_setting - display: none - - .more - display: inline-block - padding: 0 1rem - height: h = 1.6rem - // background: $light-blue - // color: $white - text-align: center - text-decoration: none - line-height: h - cursor: pointer - // transition: all 0.2s ease-in-out - - // &:hover - // background: $ruby .article-title margin-bottom: 0.3rem diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 1835e81..dbc2d2f 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,3 +1,18 @@ +if hexo-config("post_beautify.enable") + headStyle(fontsize) + padding-left: unit(fontsize + 0.3, "rem") + + code + font-size: unit(fontsize, "rem") + + &:before + top: calc(50% - unit(fontsize / 2 - 0.05, "rem")) + font-size: unit(fontsize, "rem") + + &:hover + padding-left: unit(fontsize + 0.2, "rem") + + #post-title font-size: 1.4rem @@ -100,22 +115,130 @@ #post-content margin-bottom: 1rem - ol, - ul - margin-top: 0.4rem - counter-reset: li + if hexo-config("post_beautify.enable") + h1, + h2, + h3, + h4, + h5, + h6 + cursor: pointer + transition: all 0.2s ease-out - p - margin: 0 + &:before + position: absolute + top: calc(50% - 0.35rem) + left: 0 + color: $title-prefix-icon-color + content: $title-prefix-icon + font: normal normal normal 14px / 1 FontAwesome + font-size: 0.8rem + transition: all 0.2s ease-out + + &:hover + padding-left: 1.1rem + + &:before + color: $light-blue + + h1 + headStyle(1) + + h2 + headStyle(0.9) + + h3 + headStyle(0.8) + + h4 + headStyle(0.7) + + h5 + headStyle(0.6) + + h6 + headStyle(0.6) ol, ul - padding-left: 0.5rem + margin-top: 0.4rem + padding: 0 0 0 0.8rem + list-style: none + counter-reset: li - li - position: relative - margin: 0.3rem 0 - padding-left: 0.3rem + p + margin: 0 + + ol, + ul + padding-left: 0.5rem + + li + position: relative + margin: 0.2rem 0 + padding: 0.1rem 0.5rem 0.1rem 1.5rem + + &:hover + &:before + transform: rotate(360deg) + + &:before + position: absolute + top: 0 + left: 0 + background: $light-blue + color: $white + cursor: pointer + transition: all 0.3s ease-out + + ol + > li + &:before + margin-top: 0.2rem + width: w = 1.2rem + height: h = w + border-radius: 0.5 * w + content: counter(li) + counter-increment: li + text-align: center + font-size: 0.6rem + line-height: h + + ul + > li + &:hover + &:before + border-color: $ruby + + &:before + $w = 0.3rem + top: 10px + margin-left: 0.45rem + width: w = $w + height: h = w + border: 0.5 * w solid $light-blue + border-radius: w + background: $white + content: "" + line-height: h + + else + ol, + ul + margin-top: 0.4rem + counter-reset: li + + p + margin: 0 + + ol, + ul + padding-left: 0.5rem + + li + position: relative + margin: 0.3rem 0 + padding-left: 0.3rem a color: $a-link-color @@ -162,6 +285,31 @@ img &:hover color: darken($highlight-aqua, 20%) +.code_lang + position: absolute + font-weight: bold; + font-size: 0.8rem; + line-height: 1.4rem; + color: $highlight-foreground + left: 30px + z-index: 1 + cursor: pointer + +.code-expand + position: absolute + top: 0 + color: $highlight-foreground + padding: 7px 10px + z-index: 1 + cursor: pointer + transition: all .3s + transform: rotate(0deg) + +.code-closed + transform: rotate(-90deg) !important + transition: all .3s + + .copy-notice position: absolute top: 0 @@ -228,8 +376,6 @@ img @media screen and (min-width: $md) .layout width: $content-large-width - - .katex-wrap overflow: auto diff --git a/source/css/_layout/post_bottom.styl b/source/css/_layout/post_bottom.styl index b0ae7d4..2df28b7 100644 --- a/source/css/_layout/post_bottom.styl +++ b/source/css/_layout/post_bottom.styl @@ -8,11 +8,12 @@ display: none transition: all .2s cursor: pointer + z-index: 100 &.toc_mobile_show bottom: 0 - #to_comment,#mobile_toc + #mobile_to_comment,#mobile_toc width: 50% text-align: center font-size: 18px @@ -30,7 +31,7 @@ width: 50% height: 70% position: fixed - bottom: 65px + bottom: 60px right: 10px overflow: scroll padding: 15px 10px @@ -51,6 +52,18 @@ text-align: center font-size: 18px font-weight: bold + + &.no_comment_show + #mobile_toc + width: 100% + padding: 16px 0 + + #toc_mobile + right: 25% + + &.no_toc_show + #mobile_to_comment + width: 100% @media screen and (max-width:768px) #post_bottom diff --git a/source/css/_layout/readmode.styl b/source/css/_layout/readmode.styl index 036593c..6516988 100644 --- a/source/css/_layout/readmode.styl +++ b/source/css/_layout/readmode.styl @@ -35,7 +35,7 @@ if hexo-config("readmode") && hexo-config("readmode.enable") #page-header &.fixed - background: none + background: alpha(darken($pale-yellow,5),0.5) box-shadow: none &.open-sidebar @@ -99,6 +99,29 @@ if hexo-config("readmode") && hexo-config("readmode.enable") .copy-notice background: darken($pale-yellow,10) + .toc_mobile_show + background: alpha(darken($pale-yellow,5),0.5) !important + box-shadow: none !important + + #post_bottom_items + #mobile_to_comment + display: none + #mobile_toc + width: 100% + padding: 16px 0 + #toc_mobile + right: 25% + background: darken($pale-yellow,5) + + + @media screen and (min-width: 768px) + .read-mode + .menus_item_child + background-color: darken($pale-yellow,5) !important + + &:before + border-color: transparent transparent darken($pale-yellow,5) !important + diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 515df37..3ac59c4 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -21,10 +21,6 @@ .relatedPosts_cover border: 0 - -webkit-transition: all 0.6s - -moz-transition: all 0.6s - -o-transition: all 0.6s - -ms-transition: all 0.6s transition: all 0.6s display: block width: 100% @@ -35,21 +31,21 @@ object-fit: cover .relatedPosts_title - color: #fff - position: absolute - left: 0 - right: 0 - top: 45% - height: 60px - padding: 0 30px - display: -webkit-box - -webkit-line-clamp: 2 - -webkit-box-orient: vertical - overflow: hidden - max-width: 100% - width: 100% - margin: 0 auto - text-align: center + color: #fff + position: absolute + left: 0 + right: 0 + top: 45% + height: 60px + padding: 0 30px + display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical + overflow: hidden + max-width: 100% + width: 100% + margin: 0 auto + text-align: center .relatedPosts_headline font-size: 20px @@ -60,7 +56,6 @@ clear: both - @media screen and (max-width:768px) .relatedPosts_item width: calc(100%/2 - 4px) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index 2d06673..3cc35a2 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -30,6 +30,7 @@ left: 0 transition: all 0.6s display: none + opacity: 1 .reward-all margin: 0 auto diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index d3502c5..df0a44f 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -10,8 +10,7 @@ background: $sidebar-background box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset opacity: 0.9 - transition: all 0.2s - + .sidebar-toc ol, li diff --git a/source/css/_layout/z-other.styl b/source/css/_layout/z-other.styl index 93b211a..631124f 100644 --- a/source/css/_layout/z-other.styl +++ b/source/css/_layout/z-other.styl @@ -71,53 +71,6 @@ a.article-meta__categories overflow: hidden height: 90px -.more { - position: relative - letter-spacing: 1.2px - text-transform: uppercase - overflow: hidden - z-index: 1 - background-color: $light-blue - - &:focus { - outline: none - } -} - -.more--primary { - color: $white -} - -.more--animated { - transition-property: color - transition-duration: 0.5s - - &:before { - content: "" - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - background: $ruby - transform: scaleX(0) - transform-origin: 0 50% - transition-property: transform - transition-duration: 0.5s - transition-timing-function: ease-out - z-index: -1 - } - - &:hover { - color: white - - &:before { - transform: scaleX(1) - transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66) - } - } -} - .layout_page display: flex margin: 0 auto @@ -143,10 +96,7 @@ a.article-meta__categories -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15) box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15) -#page_site-info - padding: 10rem 1rem 7rem - #site-title - font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif + @media screen and (min-width: 900px) if hexo-config("aside.position") == "left" @@ -162,7 +112,10 @@ a.article-meta__categories width: 100% !important -@media screen and (max-width:768px) +@media screen and (max-width:768px) + #web_bg + display: none + .recent-post-item height: auto !important border-radius: 8px @@ -201,8 +154,7 @@ a.article-meta__categories &:hover -webkit-box-shadow: none box-shadow: none - - + .layout_page padding: 0 !important @@ -211,8 +163,6 @@ a.article-meta__categories .category-lists padding: 0 - - .recent-post-info padding: 20px 10px !important @@ -221,14 +171,15 @@ a.article-meta__categories #recent-posts #pagination margin-bottom: 0 - .more_setting - display: block !important + #nav + #site-social-icons + display: block - #nav #site-social-icons - display: block + &.not_index_bg + height: 14rem - #page_site-info - padding: 7rem 1rem 5rem + #page_site-info + top: 7rem #top-container height: 14rem @@ -245,11 +196,10 @@ a.article-meta__categories display: none !important - .layout_page, .layout_post, footer - animation: main 1s; + animation: main 1s #nav, #top-container @@ -258,104 +208,82 @@ footer #site-title animation: titlescale 1s -.search-dialog - transition: all .2s +canvas,#web_bg + animation: to_show 4s + +.card-announcement-animation + animation: announ_animation 1.5s infinite .scroll-down-effects - -webkit-animation: pulse 1.5s infinite - animation: pulse 1.5s infinite - // font-size: 28px - position: absolute - color: #fff + animation: scroll-down-effect 1.5s infinite -.is_hidden - overflow: hidden -@keyframes pulse{ +if hexo-config("avatar_effect") == true + .avatar_img + animation: avatar_turn_around 2s linear infinite - 0%,to{ - opacity:.4 - top:0} - 50%{ - opacity:1 - top:-16px} - } - -@keyframes header { - 0% { - opacity: 0; - transform: translateY(-50px) -} -100% { - opacity: 1; - transform: translateY(0) -} - -} +.reward-main + animation: donate_effcet .3s .1s ease both; -@keyframes main { - 0% { - opacity: 0; - transform: translateY(50px) -} -100% { - opacity: 1; - transform: translateY(0) -} -} - -@keyframes titlescale{ - - 0% { - // opacity:0; - transform: scale(0.7) -} - 100% { - // opacity:1; - transform: scale(1) -} +@keyframes scroll-down-effect + 0% + opacity: 0.4 + top: 0 + 50% + opacity: 1 + top: -16px + 100% + opacity: 0.4 + top: 0 -} +@keyframes header + 0% + opacity: 0 + transform: translateY(-50px) + 100% + opacity: 1 + transform: translateY(0) +@keyframes main + 0% + opacity: 0 + transform: translateY(50px) + 100% + opacity: 1 + transform: translateY(0) -.article-container .code_full_page - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: 9999; - margin: 0; - animation: code_full_page 1s; - -.code_body - overflow: hidden - -@keyframes code_full_page{ - 0%{transform:scale(0)} - 50%{transform:scale(1)} - 80%{transform:scale(.98)} - 100%{transform:scale(1)}} - - - -@keyframes menu_open{ - 0% { - transform: scale(0) - } - 100% { +@keyframes titlescale + 0% + opacity: 0 + transform: scale(0.7) + 100% + opacity: 1 transform: scale(1) - } - } -@keyframes menu_close{ -0% { - transform: scale(1) - display: block -} -100% { - transform: scale(0) - display: none -} -} +@keyframes to_show + 0% + opacity: 0 + 100% + opacity: 1 + +@keyframes avatar_turn_around + from + transform: rotate(0deg) + to + transform: rotate(360deg) + +@keyframes sub_menus + 0% + opacity: 0 + transform: translateY(10px) + 100% + opacity: 1 + transform: translateY(0) + +@keyframes donate_effcet + 0% + opacity: 0 + transform: translateY(-20px) + 100% + opacity: 1 + transform: translateY(0) \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index ebfbea1..8974894 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -7,12 +7,15 @@ $theme-meta-color = #858585 $theme-link-color = #99a9bf $theme-hr-color = #A4D8FA $theme-read-mode-bg-color = #FAF9DE +$inline-code-color = #F47466 $font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif $code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number $site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif //hr icon $hr-icon = '\f0c4' $hr-icon-top = -10px +$title-prefix-icon = '\f0c1' +$title-prefix-icon-color = #F47466 if hexo-config("theme_color") && hexo-config("theme_color.enable") $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5 @@ -23,6 +26,7 @@ if hexo-config("theme_color") && hexo-config("theme_color.enable") $theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585 $theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA $theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE + $inline-code-color = convert(hexo-config("theme_color.inline-code-color")) || #F47466 if hexo-config("font") && hexo-config("font.enable") $font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif' @@ -36,6 +40,10 @@ if hexo-config("hr") && hexo-config("hr.enable") $hr-icon = hexo-config("hr.icon") || '\f0c4' $hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px +if hexo-config("post_beautify.enable") + $title-prefix-icon = hexo-config("post_beautify.title-prefix-icon") || '\f0c1' + $title-prefix-icon-color= convert(hexo-config("post_beautify.title-prefix-icon-color")) || #F47466 + // Global Variables $font-size = 14px @@ -54,6 +62,7 @@ $sidebar-icon-left = $sidebar-icon-top - 4px $sidebar-icon-size = 16px $go-up-bottom = $sidebar-icon-top $go-up-right = -($sidebar-icon-left) +$web-bg = convert(hexo-config("background")) // Global color & SVG $pale-blue = $theme-hr-color $light-blue = $theme-color @@ -88,7 +97,7 @@ $selection = $theme-text-selection-color // code $code-font-size = $font-size $code-font-family = $font-family -$code-foreground = $font-color +$code-foreground = $inline-code-color $code-background = rgba(27, 31, 35, 0.05) $line-height-code-block = 20px $blockquote-color = #6a737d diff --git a/source/js/main.js b/source/js/main.js index 89883ec..30ee2e8 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -9,11 +9,11 @@ $(function () { $('body').animate({ paddingLeft: 300 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(300px)' - }, 200) - }) + + $('#sidebar').animate({ + left: 0 + }, 200) + $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ 'transform': 'rotateZ(180deg)', @@ -45,11 +45,9 @@ $(function () { paddingLeft: 0 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(0px)' - }) - }) + $('#sidebar').animate({ + left: -300 + }, 200) $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ @@ -63,11 +61,11 @@ $(function () { $('body').animate({ paddingLeft: 300 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(300px)' - }) - }) + + $('#sidebar').animate({ + left: 0 + }, 200) + $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ 'transform': 'rotateZ(180deg)', @@ -81,12 +79,13 @@ $(function () { //----------------------------------------------------------------------------------------------------- // 首页fullpage添加 // 添加class - if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { } else { - $('.full_page').css('background-attachment', 'fixed') + if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else { + $('.full_page .nav_bg').css('background-attachment', 'fixed'); + $('#to_comment').css("display", "block") } //--------------------------------------------------------------------------------------------------------- - + $(".scroll-down").on("click", function () { scrollTo('#content-outer') @@ -151,10 +150,10 @@ $(function () { //------------------------------------------------------------------------------------------------------- //代码copy // Add copy icon + $('figure.highlight').wrap('
') var highlight_copy = GLOBAL_CONFIG.highlight_copy if (highlight_copy == 'true') { - $('figure.highlight').wrap('
') var $copyIcon = $('') var $notice = $('
') $('.code-area-wrap').prepend($copyIcon) @@ -209,6 +208,47 @@ $(function () { selection.removeAllRanges() }) } + + //代碼框語言識別 + var highlight_lang = GLOBAL_CONFIG.highlight_lang + if (highlight_lang == 'true') { + var $highlight_lang = $('
') + $('figure').before($highlight_lang) + var lang_name_index + var lang_name + $('figure').each(function () { + lang_name_index = lang_name = $(this).attr('class').split(' ')[1]; + if (lang_name_index == 'js') + lang_name = 'javascript' + if (lang_name_index == 'md') + lang_name = 'markdown' + if (lang_name_index == 'plain') + lang_name = 'code' + if (lang_name_index == 'py') + lang_name = 'python' + + $(this).siblings(".code_lang").text(lang_name) + + }) + } + //代碼收縮 + var highlight_shrink = GLOBAL_CONFIG.highlight_shrink + if (highlight_shrink == 'true') { + var $code_expand = $('') + } else { + var $code_expand = $('') + } + $('.code-area-wrap').prepend($code_expand) + $('.code-area-wrap .code-expand').on('click', function () { + if ($(this).hasClass('code-closed')) { + $(this).siblings('figure').find('table').show(); + $(this).removeClass('code-closed'); + } else { + $(this).siblings('figure').find('table').hide(); + $(this).addClass('code-closed'); + } + }) + //--------------------------------------------------------------------------------------------------- //fancybox var imgList = $(".recent-post-info img").not('.no-fancybox'); @@ -218,13 +258,13 @@ $(function () { for (var i = 0; i < imgList.length; i++) { var lazyload_src = imgList[i].src ? imgList[i].src : imgList.eq(i).attr("data-src") - + var $a = $( '' + '" data-fancybox="group" data-caption="' + + imgList[i].alt + + '" class="fancybox">' ) var alt = imgList[i].alt @@ -267,86 +307,52 @@ $(function () { //--------------------------------------------------------------------------------------------------------- /** head点击*/ $('.toggle-menu').on('click', function () { - if ($(".toggle-menu").hasClass("open")) { $(".toggle-menu").removeClass("open").addClass("close"); - $("#page-header #site-name,#page-header .search").css({ 'color': '#3b3a3a', 'text-shadow': 'none' }) - $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' }); $('body').addClass("is_hidden"); - $('.menus').addClass("menu_open"); - fixbg_menu(); - } else { - $(".toggle-menu").removeClass("close").addClass("open"); - $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' }); - $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' }); - $('body').removeClass("is_hidden"); - $('.menus').removeClass("menu_open").addClass('menu_close'); - setTimeout(function () { - $('.menus').removeClass("menu_close") - + $('.menus').animate({ + right: 0 }, 300) + $('.menu_mask,.menus').css("display", "block") } }) - function fixbg_menu() { - const fixScroll = (scrollEl) => { - let startY - scrollEl.addEventListener('touchstart', function (event) { - // 如果多於1根手指點擊屏幕,則不處理 - if (event.targetTouches.length > 1) { - return - } - // 儲存手指的初始位置 - startY = event.targetTouches[0].clientY - }, false) - scrollEl.addEventListener('touchmove', function (event) { - if (event.targetTouches.length > 1) { - return - } - // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動 - const y = event.targetTouches[0].clientY - startY - // 如果到頂時繼續向下拉 - if (scrollEl.scrollTop <= 0 && y > 0) { - // 重置滾動距離為最小值 - scrollEl.scrollTop = 0 - // 阻止滾動 - event.preventDefault() - } - // 如果到底時繼續上滑 - const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight - if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) { - scrollEl.scrollTop = maxScrollTop - event.preventDefault() - } - }, { - passive: false + $('.menu_mask ').on('click touchstart', function () { + $(".toggle-menu").removeClass("close").addClass("open"); + $('body').removeClass("is_hidden"); + $('.menus').animate({ + right: -250 + }, 300, function () { + { + $('.menus').css({ + 'display': '' }) - } - const scrollEl = document.querySelector(".menus"); - fixScroll(scrollEl) - } - - + } + }) + $('.menu_mask').css("display", "") + }) $(window).on('resize', function (e) { if (!$('.toggle-menu').is(':visible')) { if ($(".toggle-menu").hasClass("close")) { $(".toggle-menu").removeClass("close").addClass("open"); - $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' }); - $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' }); $('body').removeClass("is_hidden"); - $('.menus').removeClass("menu_open"); + $('.menus').animate({ + right: -250 + }, 300) + $('.menu_mask').css("display", "") } } - } ) + }) - //--------------------------------------------------------------------------------------------------------- - /** scroll 滚动 toc*/ +/** scroll 滚动 toc*/ var initTop = 0 $('.toc-child').hide() + var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show')) + // main of scroll $(window).scroll(throttle(function (event) { var currentTop = $(this).scrollTop() @@ -355,21 +361,27 @@ $(function () { scrollPercent(currentTop) // head position findHeadPosition(currentTop) + auto_scroll_toc(currentTop) + } var isUp = scrollDirection(currentTop) if ($(".toggle-menu").hasClass("open")) { if (currentTop > 56) { - + if (isUp) { $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log() - $('#post_bottom').removeClass('toc_mobile_show') - $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + if (!is_post_bottom) { + $('#post_bottom').removeClass('toc_mobile_show') + $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + } } else { $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible') - $('#post_bottom').addClass('toc_mobile_show') - $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + if (!is_post_bottom) { + $('#post_bottom').addClass('toc_mobile_show') + $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + } } $('#page-header').addClass('fixed') @@ -396,7 +408,9 @@ $(function () { } else { if (currentTop === 0) { $('#page-header').removeClass('fixed').removeClass('visible') - $('#post_bottom').removeClass('toc_mobile_show') + if (!is_post_bottom) { + $('#post_bottom').removeClass('toc_mobile_show') + } } @@ -417,13 +431,15 @@ $(function () { } } - if ( $(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show') ){ - $('#rightside').css('bottom', '110px') - $('#go-up').css('bottom', '70px') - - } else { - $('#rightside').css('bottom', '60px') - $('#go-up').css('bottom', '20px') + if (!is_post_bottom) { + if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) { + $('#rightside').css('bottom', '110px') + $('#go-up').css('bottom', '70px') + + } else { + $('#rightside').css('bottom', '60px') + $('#go-up').css('bottom', '20px') + } } }, 50, 100)) @@ -530,74 +546,78 @@ $(function () { .find('.toc-child').hide() } - if ($('.toc-link').hasClass('active')) { - var active_position = $(".active").offset().top; - var sidebar_scrolltop = $("#sidebar").scrollTop(); - if (active_position > (top + $(window).height() - 50)) { - $("#sidebar").scrollTop(sidebar_scrolltop + 100); - } else if (active_position < top + 50) { - $("#sidebar").scrollTop(sidebar_scrolltop - 100); - } - } } - //代碼框雙擊全屏 - $('figure').on('dblclick', function (e) { - if (e.target !== this) - return; - $(this).toggleClass('code_full_page'); - $('body').toggleClass('code_body'); - }); - + function auto_scroll_toc(currentTop) { + if ($('.toc-link').hasClass('active')) { + var active_position = $(".active").offset().top; + var sidebar_scrolltop = $("#sidebar").scrollTop(); + if (active_position > (currentTop + $(window).height() - 50)) { + $("#sidebar").scrollTop(sidebar_scrolltop + 100); + } else if (active_position < currentTop + 50) { + $("#sidebar").scrollTop(sidebar_scrolltop - 100); + } + } + } //閲讀模式 $("#readmode").click(function () { - if (Cookies.get("night-mode") == "night") { $('body').toggleClass('night-mode'); $('body').toggleClass('read-mode'); - $('#font_plus,#font_minus').toggleClass('is_visible'); + $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible'); + $('#to_comment').toggleClass('is_invisible'); } else { $('body').toggleClass('read-mode'); - $('#font_plus,#font_minus').toggleClass('is_visible'); + $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible'); + $('#to_comment').toggleClass('is_invisible'); } - }); - //閲讀模式下字體調整 $("#font_plus").click(function () { var font_size_record = parseFloat($('body').css('font-size')) + var code_size_record = parseFloat($('pre').css('font-size')) + var code_size_record = parseFloat($('code').css('font-size')) $('body').css('font-size', font_size_record + 1) + $('pre').css('font-size', font_size_record + 1) + $('code').css('font-size', font_size_record + 1) }); $("#font_minus").click(function () { var font_size_record = parseFloat($('body').css('font-size')) + var code_size_record = parseFloat($('pre').css('font-size')) + var code_size_record = parseFloat($('code').css('font-size')) $('body').css('font-size', font_size_record - 1) + $('pre').css('font-size', font_size_record - 1) + $('code').css('font-size', font_size_record - 1) }); - + // 手機顯示toc $('#mobile_toc').on('click', function () { $("#toc_mobile").toggleClass('is_visible') }) - - //代碼框語言識別 - $('figure').each(function () { - var lang_name_index; - var lang_name; - lang_name_index = lang_name = $(this).attr('class').split(' ')[1]; - if (lang_name_index == 'js') - lang_name = 'javascript' - if (lang_name_index == 'md') - lang_name = 'markdown' - if (lang_name_index == 'plain') - lang_name = 'code' - if (lang_name_index == 'py') - lang_name = 'python' - - $('figure.' + lang_name_index + ' table').attr('data-content', lang_name); - }) + // sub-menus 位置調整 + if ( $(window).width() > 768 ) { + $('.menus_item_child').each(function () { + var a_width= $(this).siblings('a').outerWidth(true); + var child_width = $(this).outerWidth(true); + $(this).css("margin-left", -(child_width/ 2 - a_width/ 2)) + }) + } + + // 手機端sub-menu 展開/收縮 + $('.menus-expand').on('click', function () { + if ($(this).hasClass('menus-closed')) { + $(this).parents('.menus_item').find('.menus_item_child').show(); + $(this).removeClass('menus-closed'); + } else { + $(this).parents('.menus_item').find('.menus_item_child').hide(); + $(this).addClass('menus-closed'); + } + }) + }); \ No newline at end of file diff --git a/source/js/nightshift.js b/source/js/nightshift.js index f198121..6191aa0 100644 --- a/source/js/nightshift.js +++ b/source/js/nightshift.js @@ -11,6 +11,10 @@ $(function () { } function changeReadModel() { + + if (Cookies.get("night-mode") == null) + return + if (Cookies.get("night-mode") == "night") { $("body").addClass("night-mode"); $("#nightshift").removeClass("fa-moon-o").addClass("fa-sun-o"); diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 7513dec..41f4da2 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -7,7 +7,7 @@ $(function () { $('.search-dialog').css({ 'display': 'block', 'animation': 'titlescale 0.5s' - }) + }),300 }) $('.ais-search-box--input').focus() diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index c5140bb..67362e3 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -7,7 +7,7 @@ $(function () { $('.search-dialog').css({ 'display': 'block', 'animation': 'titlescale 0.5s' - }) + }),300 }) $('#local-search-input input').focus() diff --git a/source/js/third-party/canvas-nest.js b/source/js/third-party/canvas-nest.js new file mode 100644 index 0000000..446ddf9 --- /dev/null +++ b/source/js/third-party/canvas-nest.js @@ -0,0 +1,11 @@ +!function(){ + var userAgentInfo = navigator.userAgent; + var Agents = ["iPad", "iPhone", "Android", + "SymbianOS", "Windows Phone", + "iPod", "webOS", "BlackBerry", "IEMobile"]; + for (var v = 0; v < Agents.length; v++) { + if (userAgentInfo.indexOf(Agents[v]) > 0) { + return; + } + } + function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}(); \ No newline at end of file