From 3708fdf569fd9d5847c43d03a7c48c11fac63107 Mon Sep 17 00:00:00 2001 From: Jerry Date: Mon, 20 Sep 2021 17:55:20 +0800 Subject: [PATCH] =?UTF-8?q?breaking=20changes:=20=E7=A7=BB=E9=99=A4=20html?= =?UTF-8?q?=20=E7=9A=84=20font-size=20=E6=94=B9=E7=82=BA=E7=80=8F=E8=A6=BD?= =?UTF-8?q?=E5=99=A8=E9=BB=98=E8=AA=8D=E5=A4=A7=E5=B0=8F=20feat:=20?= =?UTF-8?q?=E7=82=BA=E6=96=87=E7=AB=A0=E5=96=AE=E7=8D=A8=E8=A8=AD=E7=BD=AE?= =?UTF-8?q?=20TOC=20simple=5Fstyle=20=E9=A1=AF=E7=A4=BA=20closed=20#631=20?= =?UTF-8?q?feat:=20page=20=E9=A0=81=E9=A0=82=E9=83=A8=E5=9C=96=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E9=BB=91=E8=89=B2=E9=81=AE=E7=BD=A9=20closed=20#671?= =?UTF-8?q?=20feat:=20=E9=A6=96=E9=A0=81=20pagination=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=20UI=20fix:=20=E4=BF=AE=E5=BE=A9=E4=BD=BF=E7=94=A8=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E6=90=9C=E7=B4=A2=E6=99=82=EF=BC=8C=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=E9=85=8D=E7=BD=AE=E7=82=BA=E4=B8=8D=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=96=87=E7=AB=A0=E5=85=A7=E5=AE=B9=E6=9C=83=E7=84=A1?= =?UTF-8?q?=E6=B3=95=E4=BD=BF=E7=94=A8=E6=90=9C=E7=B4=A2=20=E7=9A=84=20bug?= =?UTF-8?q?=20fix:=20=E4=BF=AE=E5=BE=A9=E9=96=8B=E5=95=9F=20photofigcaptio?= =?UTF-8?q?n=20=E5=BE=8C=EF=BC=8C=E5=B0=8E=E8=87=B4inlineImg=E6=A8=99?= =?UTF-8?q?=E7=B1=A4=E5=A4=96=E6=8E=9B=E9=A1=AF=E7=A4=BA=E9=8C=AF=E4=BA=82?= =?UTF-8?q?=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9=20=E5=AD=97?= =?UTF-8?q?=E9=AB=94=E9=81=8E=E5=A4=A7/=E9=81=8E=E5=B0=8F=E8=80=8C?= =?UTF-8?q?=E5=B0=8E=E8=87=B4=20=E9=83=A8=E5=88=86=20ui=20=E5=81=8F?= =?UTF-8?q?=E7=A7=BB=E7=9A=84=20bug=20improvement:=20=E4=B8=BB=E9=A1=8C=20?= =?UTF-8?q?css=20=E4=BD=BF=E7=94=A8=E7=9A=84=20rem=20=E6=94=B9=E7=82=BA=20?= =?UTF-8?q?em=20=E6=88=96=20px=20improvement:=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=B2=A1=E6=9C=89=E9=A1=B6=E9=83=A8=E5=9B=BE=E4=B8=8B=EF=BC=8C?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E7=9A=84=E6=A0=87=E9=A2=98=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=20closed=20#669=20improvement:=20=E4=BB=A3=E7=A2=BC?= =?UTF-8?q?=E5=84=AA=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 2 +- layout/includes/mixins/post-ui.pug | 19 ++-- layout/includes/widget/card_post_toc.pug | 1 + layout/includes/widget/index.pug | 4 +- package.json | 2 +- source/css/_global/function.styl | 14 ++- source/css/_global/index.styl | 32 ++++--- source/css/_highlight/highlight.styl | 52 ++++------- source/css/_highlight/highlight/index.styl | 12 +-- source/css/_highlight/prismjs/index.styl | 2 +- source/css/_highlight/theme.styl | 6 +- source/css/_layout/aside.styl | 74 +++++++-------- source/css/_layout/comments.styl | 8 +- source/css/_layout/footer.styl | 8 +- source/css/_layout/head.styl | 85 +++++++++--------- source/css/_layout/loading.styl | 2 +- source/css/_layout/pagination.styl | 47 ++++++---- source/css/_layout/post.styl | 79 ++++++++-------- source/css/_layout/relatedposts.styl | 4 +- source/css/_layout/reward.styl | 7 +- source/css/_layout/sidebar.styl | 12 +-- source/css/_layout/third-party.styl | 7 +- source/css/_mode/readmode.styl | 4 +- source/css/_page/404.styl | 30 +++---- source/css/_page/archives.styl | 28 +++--- source/css/_page/categories.styl | 12 +-- source/css/_page/common.styl | 21 +++-- source/css/_page/flink.styl | 3 - source/css/_page/homepage.styl | 100 +++++++-------------- source/css/_page/tags.styl | 2 +- source/css/_search/algolia.styl | 22 ++--- source/css/_search/index.styl | 16 ++-- source/css/_search/local-search.styl | 14 +-- source/css/_tags/button.styl | 18 ++-- source/css/_tags/gallery.styl | 16 ++-- source/css/_tags/hexo.styl | 4 +- source/css/_tags/hide.styl | 14 +-- source/css/_tags/note.styl | 14 +-- source/css/_tags/tabs.styl | 8 +- source/css/var.styl | 1 - source/js/main.js | 3 +- source/js/search/local-search.js | 3 +- 42 files changed, 387 insertions(+), 425 deletions(-) diff --git a/_config.yml b/_config.yml index f8ae95f..2e19882 100644 --- a/_config.yml +++ b/_config.yml @@ -171,7 +171,7 @@ toc: post: true page: false number: true - style_simple: false + style_simple: false # for post post_copyright: enable: true diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index cdf62ee..4a4a123 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -1,14 +1,19 @@ mixin postUI(posts) each article , index in page.posts.data .recent-post-item - - let link = article.link || article.path - - let title = article.title || _p('no_title') - - let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' - - let post_cover = article.cover - - let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - + let link = article.link || article.path + let title = article.title || _p('no_title') + const position = theme.cover.position + let leftOrRight = position === 'both' + ? index%2 == 0 ? 'left' : 'right' + : position === 'left' ? 'left' : 'right' + let post_cover = article.cover + let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : '' + - if post_cover && theme.cover.index_enable .post_cover(class=leftOrRight) - a(href=url_for(link) title=title) + a(href=url_for(link) title=title) img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) .recent-post-info(class=no_cover) a.article-title(href=url_for(link) title=title)= title @@ -20,7 +25,7 @@ mixin postUI(posts) span.article-meta__separator | if (theme.post_meta.page.date_type) span.post-meta-date - if (theme.post_meta.page.date_type === 'both') + if (theme.post_meta.page.date_type === 'both') i.far.fa-calendar-alt span.article-meta-label=_p('post.created') time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format) diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug index 3874dc7..ec80335 100644 --- a/layout/includes/widget/card_post_toc.pug +++ b/layout/includes/widget/card_post_toc.pug @@ -4,6 +4,7 @@ .item-headline i.fas.fa-stream span= _p('aside.card_toc') + span.toc-percentage if (page.encrypt == true) .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index 9d523d2..72f2784 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,7 +1,9 @@ #aside-content.aside-content //- post if is_post() - if showToc && theme.toc.style_simple + - const tocStyle = page.style_simple + - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple + if showToc && tocStyleVal .sticky_layout include ./card_post_toc.pug else diff --git a/package.json b/package.json index b49ca22..f326611 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b5", + "version": "4.0.0-b6", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 9173ce7..6788bb8 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -17,6 +17,16 @@ text-rendering: auto -webkit-font-smoothing: antialiased +// card hover +.cardHover + border-radius: 8px + background: var(--card-bg) + box-shadow: var(--card-box-shadow) + transition: all .3s + + &:hover + box-shadow: var(--card-hover-box-shadow) + maxWidth600() @media screen and (max-width: 600px) {block} @@ -123,12 +133,12 @@ if hexo-config('avatar.effect') == true @keyframes bottom-top 0% - opacity: 0 margin-top: 50px + opacity: 0 100% - opacity: 1 margin-top: 0 + opacity: 1 @keyframes titlescale 0% diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 09c966b..23f40b5 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -30,10 +30,6 @@ --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) -html - height: 100% - font-size: 20px - body position: relative min-height: 100% @@ -79,7 +75,7 @@ h4, h5, h6 position: relative - margin: 1rem 0 .7rem + margin: 20px 0 14px color: var(--text-highlight-color) font-weight: bold @@ -91,7 +87,7 @@ h6 hr position: relative - margin: 2rem auto + margin: 40px auto border: 2px dashed var(--hr-border) if hexo-config('hr_icon.enable') @@ -115,7 +111,7 @@ hr .table-wrap overflow-x: scroll - margin: 0 0 1rem + margin: 0 0 20px table display: table @@ -129,7 +125,7 @@ table th, td - padding: .3rem .6rem + padding: 6px 12px border: 1px solid var(--light-grey) vertical-align: middle @@ -213,8 +209,24 @@ if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-confi filter: none .img-alt - margin: -.5rem 0 .5rem + margin: -10px 0 10px color: #858585 &:hover - text-decoration: none !important \ No newline at end of file + text-decoration: none !important + +blockquote + margin: 0 0 20px + padding: 12px 15px + border-left: 3px solid $blockquote-padding-color + background-color: var(--blockquote-bg) + color: var(--blockquote-color) + + footer + cite + &:before + padding: 0 5px + content: '—' + + & > :last-child + margin-bottom: 0 !important diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index b69660e..4be7103 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -23,7 +23,7 @@ if $prismjsEnable $code-block overflow: auto - margin: 0 0 1rem + margin: 0 0 20px padding: 0 background: var(--hl-bg) color: var(--hl-color) @@ -33,28 +33,6 @@ $code-block counter-reset: line white-space: pre-wrap -blockquote - margin: 0 0 1rem - padding: .1rem .8rem - border-left: .2rem solid $blockquote-padding-color - background-color: var(--blockquote-bg) - color: var(--blockquote-color) - - a - word-break: break-all - - p - margin: 0 !important - padding: .5rem 0 - - footer - padding: 0 0 .5rem - - cite - &:before - padding: 0 .3em - content: '—' - #article-container pre, code @@ -62,7 +40,7 @@ blockquote font-family: $code-font-family !important code - padding: .1rem .2rem + padding: 2px 4px background: $code-background color: $code-foreground @@ -87,7 +65,7 @@ blockquote figcaption, .caption - padding: .3rem 0 .1rem .7rem + padding: 6px 0 2px 14px font-size: $code-font-size line-height: 1em @@ -104,7 +82,7 @@ blockquote display: flex align-items: center overflow: hidden - min-height: 1.2rem + min-height: 24px height: 2.15em background: var(--hltools-bg) color: var(--hltools-color) @@ -115,12 +93,12 @@ blockquote .expand position: absolute - padding: .4rem .7rem + padding: .57em .7em cursor: pointer transition: transform .3s & + .code-lang - left: 1.7rem + left: 1.6em &.closed transition: all .3s @@ -128,7 +106,7 @@ blockquote .code-lang position: absolute - left: .7rem + left: 14px text-transform: uppercase font-weight: bold font-size: 1.15em @@ -136,13 +114,13 @@ blockquote .copy-notice position: absolute - right: 1.7rem + right: 2.1em opacity: 0 transition: opacity .4s .copy-button position: absolute - right: .7rem + right: 14px cursor: pointer transition: color .2s @@ -160,7 +138,7 @@ blockquote if $highlight_theme == 'mac' || ($highlight_theme == 'mac light') figure.highlight - margin: 0 0 1.2rem + margin: 0 0 24px border-radius: 7px box-shadow: 0 5px 10px 0 $highlight-mac-border -webkit-transform: translateZ(0) @@ -168,7 +146,7 @@ blockquote .highlight-tools &:after position: absolute - left: .7rem + left: 14px width: 12px height: 12px border-radius: 50% @@ -184,13 +162,13 @@ blockquote transform: rotate(90deg) !important & ~ .copy-notice - right: 2.8rem + right: 3.3em & ~ .copy-button - right: 1.8rem + right: 2.1em .code-lang - left: 3.8rem !important + left: 75px if hexo-config('highlight_height_limit') .code-expand-btn @@ -204,7 +182,7 @@ blockquote cursor: pointer i - padding: .3rem 0 + padding: 6px 0 color: var(--hlnumber-color) animation: code-expand-key 1.2s infinite diff --git a/source/css/_highlight/highlight/index.styl b/source/css/_highlight/highlight/index.styl index cb214c0..bdb9d96 100644 --- a/source/css/_highlight/highlight/index.styl +++ b/source/css/_highlight/highlight/index.styl @@ -7,8 +7,8 @@ if $highlight_theme != false if wordWrap &:before display: inline-block - padding: 0 .3rem 0 0 - min-width: 1.6rem + padding: 0 6px 0 0 + min-width: 30px color: var(--hlnumber-color) content: counter(line) counter-increment: line @@ -27,13 +27,13 @@ if $highlight_theme != false border: none .gutter pre - padding-right: .5rem - padding-left: .5rem + padding-right: 10px + padding-left: 10px background-color: var(--hlnumber-bg) color: var(--hlnumber-color) text-align: right .code pre - padding-right: .5rem - padding-left: .5rem + padding-right: 10px + padding-left: 10px width: 100% diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index b21c5bf..f0be1d5 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -14,7 +14,7 @@ if $highlight_theme != false .caption margin-left: -3.8em - padding: .2rem .8rem !important + padding: 4px 16px !important a padding: 0 !important diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index c9c45c7..58fc330 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -11,7 +11,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac') color: alpha($highlight-foreground, .8), bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 6) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = #969896 @@ -37,7 +37,7 @@ if $highlight_theme == 'pale night' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-background, 6) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = #676E95 @@ -63,7 +63,7 @@ if $highlight_theme == 'ocean' color: $highlight-foreground, bg-color: darken($highlight-background, 2) } - $highlight-scrollbar = darken($highlight-foreground, 40) + $highlight-scrollbar = lighten($highlight-background, 8) if $highlighEnable $highlight-comment = rgba(101, 115, 126, .8) diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 3d88d36..be55212 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -14,20 +14,14 @@ margin-top: 0 +maxWidth900() - margin-top: 1rem + margin-top: 20px .card-widget + @extend .cardHover position: relative overflow: hidden - margin-top: 1rem - padding: 1rem 1.2rem - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: box-shadow .3s - - &:hover - box-shadow: var(--card-hover-box-shadow) + margin-top: 20px + padding: 20px 24px if hexo-config('aside.mobile') == false +maxWidth768() @@ -41,11 +35,11 @@ font-size: 1.57em &__description - margin-top: -.3rem + margin-top: -.42em .card-info-data display: table - margin: .7rem 0 .2rem + margin: 14px 0 4px width: 100% table-layout: fixed @@ -59,18 +53,17 @@ font-size: 1em .length-num - margin-top: -.3rem + margin-top: -.42em color: var(--text-highlight-color) font-size: 1.4em .card-info-social-icons - margin: .3rem 0 -.3rem + margin: 6px 0 -6px .social-icon - margin: 0 .5rem + margin: 0 10px color: var(--font-color) font-size: 1.4em - cursor: pointer i transition: all .3s @@ -80,21 +73,21 @@ #card-info-btn display: block - margin-top: .7rem + margin-top: 14px background-color: var(--btn-bg) color: var(--btn-color) text-align: center line-height: 2.4 span - padding-left: .5rem + padding-left: 10px .item-headline - padding-bottom: .3rem + padding-bottom: 6px font-size: 1.2em span - margin-left: .3rem + margin-left: 6px .sticky_layout +minWidth900() @@ -106,7 +99,7 @@ .card-tag-cloud a display: inline-block - padding: 0 .2rem + padding: 0 4px &:hover color: $text-hover !important @@ -114,13 +107,13 @@ .aside-list & > span display: block - margin-bottom: .5rem + margin-bottom: 10px text-align: center & > .aside-list-item display: flex align-items: center - padding: .3rem 0 + padding: 6px 0 &:first-child padding-top: 0 @@ -184,13 +177,13 @@ .card-categories ul.card-category-list > .card-category-list-item a display: inline-block - padding: .15rem .5rem + padding: 3px 10px width: 100% color: var(--font-color) transition: all .4s &:hover - padding: .15rem .85rem + padding: 3px 17px background-color: var(--text-bg-hover) span @@ -208,7 +201,7 @@ .card-categories .card-category-list &.child - padding: 0 0 0 .8rem + padding: 0 0 0 16px > .parent > a @@ -222,8 +215,8 @@ i float: right - margin-right: -.35rem - padding: .35rem + margin-right: -.5em + padding: .5em transition: transform .3s transform: rotate(0) @@ -239,12 +232,12 @@ .webinfo-item display: flex align-items: center - padding: .1rem .5rem 0 + padding: 2px 10px 0 div &:first-child flex: 1 - padding-right: 1rem + padding-right: 20px // toc #card-toc @@ -261,7 +254,15 @@ opacity: 0 transform-origin: right bottom + .toc-percentage + float: right + margin-top: -9px + color: #a9a9a9 + font-style: italic + font-size: 140% + .toc-content + clear: both overflow-y: auto max-height: calc(100vh - 120px) @@ -288,11 +289,11 @@ ol margin: 0 - padding-left: .4rem + padding-left: 15px .toc-link display: block - padding-left: .3rem + padding-left: 6px border-left: 3px solid transparent color: var(--toc-link-color) transition: all .2s ease-in-out @@ -302,15 +303,6 @@ background: $theme-toc-color color: $toc-active-color - &:before - position: absolute - top: .6rem - right: 1.2rem - color: #a9a9a9 - content: attr(progress-percentage) - font-style: italic - font-size: 1.2rem - :only-child > .card-widget margin-top: 0 diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl index 04d2fa7..838094a 100644 --- a/source/css/_layout/comments.styl +++ b/source/css/_layout/comments.styl @@ -1,6 +1,6 @@ #post-comment .comment-head - margin-bottom: 1rem + margin-bottom: 20px .comment-headline display: inline-block @@ -13,8 +13,8 @@ if hexo-config('comments.text') float: right - margin: .1rem auto 0 - padding: .2rem .8rem + margin: 2px auto 0 + padding: 4px 16px width: max-content border-radius: 8px background: $comments-switch-bg @@ -33,7 +33,7 @@ .switch-btn position: relative display: inline-block - margin: -4px .4rem 0 + margin: -4px 8px 0 width: 42px height: 22px border-radius: 34px diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 5f96c15..3b8a3bf 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -15,7 +15,7 @@ #footer-wrap position: relative - padding: 2rem 1rem + padding: 40px 20px color: var(--light-grey) text-align: center @@ -26,10 +26,10 @@ text-decoration: underline .footer-separator - margin: 0 .2rem + margin: 0 4px .icp-icon padding: 0 4px - vertical-align: text-bottom max-height: 1.4em - width auto + width: auto + vertical-align: text-bottom diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 3bb93ae..e487fe6 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -7,6 +7,13 @@ background-repeat: no-repeat transition: all .5s + &:not(.not-top-img):before + position: absolute + width: 100% + height: 100% + background-color: alpha($dark-black, .3) + content: '' + // index &.full_page height: $index_top_img_height @@ -15,14 +22,14 @@ #site-info position: absolute top: $index_site_info_top - padding: 0 .5rem + padding: 0 10px width: 100% #site-title, #site-subtitle, #scroll-down .scroll-down-effects text-align: center - text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) + text-shadow: 2px 2px 4px rgba(0, 0, 0, .15) line-height: 1.5 #site-title @@ -43,18 +50,17 @@ #site_social_icons display: none margin: 0 auto - width: 15rem + width: 300px text-align: center +maxWidth768() display: block .social-icon - margin: 0 .5rem + margin: 0 10px color: var(--light-grey) - text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) + text-shadow: 2px 2px 4px rgba(0, 0, 0, .15) font-size: 1.43em - cursor: pointer #scroll-down position: absolute @@ -70,54 +76,47 @@ // page &.not-home-page - height: 20rem + height: 400px +maxWidth768() - height: 14rem + height: 280px #page-site-info position: absolute - top: 10rem - padding: 0 .5rem + top: 200px + padding: 0 10px width: 100% +maxWidth768() - top: 7rem + top: 140px // post &.post-bg - height: 20rem + height: 400px +maxWidth768() - height: 18rem + height: 360px &:before - position: absolute - top: 0 - left: 0 - display: block - width: 100% - height: 100% background-color: alpha($dark-black, .5) - content: '' #post-info position: absolute - bottom: 5rem + bottom: 100px padding: 0 8% width: 100% text-align: center +maxWidth900() - bottom: 1.5rem + bottom: 30px text-align: left +maxWidth768() - bottom: 1.1rem - padding: 0 1.1rem + bottom: 22px + padding: 0 22px &.not-top-img - margin-bottom: .5rem + margin-bottom: 10px height: 60px background: 0 @@ -157,21 +156,17 @@ top: 70px transition: top .5s -.apple - #page-header.full_page - background-attachment: scroll !important - #page h1.page-title - margin: .4rem 0 1rem + margin: 8px 0 20px // for not top_img #post & > #post-info - margin-bottom: 1.5rem + margin-bottom: 30px .post-title - padding-bottom: .2rem + padding-bottom: 4px border-bottom: 1px solid var(--light-grey) color: var(--text-highlight-color) @@ -185,7 +180,7 @@ #post-info .post-title @extend .limit-more-line - margin-bottom: .4rem + margin-bottom: 8px color: var(--white) font-weight: normal font-size: 2.5em @@ -193,10 +188,10 @@ -webkit-line-clamp: 3 +maxWidth768() - font-size: 1.72em + font-size: 2.1em .post-edit-link - padding-left: .5rem + padding-left: 10px #post-meta color: var(--light-grey) @@ -216,14 +211,14 @@ .post-meta &-separator - margin: 0 .25rem + margin: 0 5px &-icon - margin-right: .2rem + margin-right: 4px &-label if hexo-config('post_meta.post.label') - margin-right: .2rem + margin-right: 4px else display: none @@ -264,7 +259,7 @@ #toggle-menu display: none - padding: .1rem 0 0 .3rem + padding: 2px 0 0 6px vertical-align: top &:hover @@ -277,7 +272,7 @@ color: var(--white) #site-name - text-shadow: .1rem .1rem .2rem rgba($dark-black, .15) + text-shadow: 2px 2px 4px rgba($dark-black, .15) font-weight: bold cursor: pointer @@ -287,7 +282,7 @@ .menus_item position: relative display: inline-block - padding: 0 0 0 .7rem + padding: 0 0 0 14px &:hover .menus_item_child @@ -327,7 +322,7 @@ a display: inline-block - padding: .3rem .7rem + padding: 6px 14px width: 100% color: var(--font-color) !important text-shadow: none !important @@ -350,12 +345,12 @@ #search-button display: inline - padding: 0 0 0 .7rem + padding: 0 0 0 14px .site-page position: relative - padding-bottom: .3rem - text-shadow: .05rem .05rem .1rem rgba($dark-black, .3) + padding-bottom: 6px + text-shadow: 1px 1px 2px rgba($dark-black, .3) font-size: .78em cursor: pointer diff --git a/source/css/_layout/loading.styl b/source/css/_layout/loading.styl index dc5d191..29a08bd 100644 --- a/source/css/_layout/loading.styl +++ b/source/css/_layout/loading.styl @@ -43,7 +43,7 @@ if hexo-config('preloader') .loading-word position: absolute color: var(--preloader-color) - font-size: .8rem + font-size: 16px .configure-core width: 100% diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index aee8aca..5038e57 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -1,24 +1,12 @@ #pagination - overflow: hidden - margin-top: 1rem - width: 100% - .pagination + margin-top: 20px text-align: center .page-number - display: inline-block - margin: 0 .2rem - min-width: w = 1.2rem - height: w - text-align: center - line-height: w - cursor: pointer - &.current background: $theme-paginator-color color: var(--white) - cursor: default img.prev-cover, img.next-cover @@ -32,7 +20,7 @@ .pagination-info position: absolute top: 50% - padding: 1rem 2rem + padding: 20px 40px width: 100% transform: translate(0, -50%) @@ -75,5 +63,32 @@ transform: scale(1.1) &.pagination-post - margin-top: 2rem - background: $dark-black \ No newline at end of file + overflow: hidden + margin-top: 40px + background: $dark-black + +.layout + & > .recent-posts + .pagination + & > * + @extend .cardHover + display: inline-block + margin: 0 6px + width: w = 2.5em + height: w + line-height: w + + &:hover + background: var(--btn-hover-color) + color: var(--btn-color) + + & > div:not(.recent-posts) + .pagination + .page-number + display: inline-block + margin: 0 4px + min-width: w = 24px + height: w + text-align: center + line-height: w + cursor: pointer diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 0b341c6..d6fa246 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,16 +1,13 @@ beautify() headStyle(fontsize) - padding-left: unit(fontsize + .4, 'rem') - - code - font-size: unit(fontsize, 'rem') + padding-left: unit(fontsize + .4, 'px') &:before - margin-left: unit((-(fontsize + .2)), 'rem') - font-size: unit(fontsize, 'rem') + margin-left: unit((-(fontsize + 4)), 'px') + font-size: unit(fontsize, 'px') &:hover - padding-left: unit(fontsize + .6, 'rem') + padding-left: unit(fontsize + 12, 'px') h1, h2, @@ -22,7 +19,7 @@ beautify() &:before position: absolute - top: calc(50% - .35rem) + top: calc(50% - 7px) color: $title-prefix-icon-color content: $title-prefix-icon line-height: 1 @@ -34,47 +31,47 @@ beautify() color: $light-blue h1 - headStyle(1) + headStyle(20) h2 - headStyle(.9) + headStyle(18) h3 - headStyle(.8) + headStyle(16) h4 - headStyle(.7) + headStyle(14) h5 - headStyle(.6) + headStyle(12) h6 - headStyle(.6) + headStyle(12) ol, ul - margin-top: .4rem - padding: 0 0 0 .8rem + margin-top: 8px + padding: 0 0 0 16px list-style: none counter-reset: li +maxWidth768() - padding: 0 0 0 .4rem + padding: 0 0 0 8px p - margin: 0 0 .5rem + margin: 0 0 10px ol, ul - padding-left: .6rem + padding-left: 12px +maxWidth768() - padding-left: .2rem + padding-left: 4px li &:not(.tab) position: relative - margin: .2rem 0 + margin: 4px 0 &:hover &:before @@ -127,19 +124,19 @@ beautify() no-beautify() ol, ul - margin-top: .4rem + margin-top: 8px p - margin: 0 0 .5rem + margin: 0 0 10px ol, ul - padding-left: .5rem + padding-left: 10px li position: relative - margin: .3rem 0 - padding-left: .3rem + margin: 6px 0 + padding-left: 6px #article-container word-wrap: break-word @@ -153,14 +150,14 @@ no-beautify() img display: block - margin: 0 auto .8rem + margin: 0 auto 20px max-width: 100% p - margin: 0 0 .8rem + margin: 0 0 16px iframe - margin: 0 0 1rem + margin: 0 0 20px kbd margin: 0 3px @@ -197,11 +194,11 @@ no-beautify() &__tags display: inline-block - margin: .4rem .4rem .4rem 0 - padding: 0 .6rem + margin: 8px 8px 8px 0 + padding: 0 12px width: fit-content border: 1px solid $light-blue - border-radius: .6rem + border-radius: 12px color: $light-blue font-size: .85em transition: all .2s ease-in-out @@ -213,7 +210,7 @@ no-beautify() .post_share display: inline-block float: right - margin: .4rem 0 + margin: 8px 0 width: fit-content .social-share @@ -228,19 +225,19 @@ no-beautify() .post-copyright position: relative - margin: 2rem 0 .5rem - padding: .5rem .8rem + margin: 40px 0 10px + padding: 10px 16px border: 1px solid var(--light-grey) transition: box-shadow .3s ease-in-out &:before @extend .fontawesomeIcon position: absolute - top: .1rem - right: .6rem + top: 2px + right: 12px color: $theme-color content: '\f1f9' - font-size: 1rem + font-size: 1.3em &:hover box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) @@ -251,7 +248,7 @@ no-beautify() font-weight: bold &-info - padding-left: .3rem + padding-left: 6px a text-decoration: underline @@ -262,7 +259,7 @@ no-beautify() .post-outdate-notice position: relative - margin: 0 0 1rem + margin: 0 0 20px padding: .5em 1.2em border-radius: 3px background-color: $noticeOutdate-bg @@ -282,4 +279,4 @@ no-beautify() transform: translateY(-50%) .ads-wrap - margin: 2rem 0 + margin: 40px 0 diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 5d69ec5..dba9154 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -1,5 +1,5 @@ .relatedPosts - margin-top: 2rem + margin-top: 40px & > .headline margin-bottom: 5px @@ -40,7 +40,7 @@ .content position: absolute top: 50% - padding: 0 1rem + padding: 0 20px width: 100% transform: translate(0, -50%) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index ba91955..b69f71f 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -1,12 +1,12 @@ .post-reward position: relative - margin-top: 4rem + margin-top: 80px width: 100% text-align: center .reward-button display: inline-block - padding: .2rem 1.2rem + padding: 4px 24px background: var(--btn-bg) color: var(--btn-color) cursor: pointer @@ -28,7 +28,7 @@ .reward-all display: inline-block margin: 0 - padding: 1rem .5rem + padding: 20px 10px border-radius: 4px background: var(--reward-pop) @@ -64,6 +64,5 @@ height: 130px .post-qr-code-desc - padding-top: .4rem width: 130px color: $reward-pop-up-color diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 783ca20..d557980 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -23,11 +23,11 @@ transform: translate3d(-100%, 0, 0) & > .avatar-img - margin: 1rem auto + margin: 20px auto .site-data display: table - padding: 0 .5rem + padding: 0 10px width: 100% table-layout: fixed @@ -45,16 +45,16 @@ color: var(--font-color) hr - margin: 1rem auto + margin: 20px auto .menus_items - padding: 0 .5rem 2rem + padding: 0 10px 40px .site-page @extend .limit-one-line position: relative display: block - padding: .3rem 1.5rem .3rem 1.1rem + padding: 6px 30px 6px 22px color: var(--font-color) font-size: 1.15em @@ -69,7 +69,7 @@ & > i:last-child position: absolute top: .78em - right: .9rem + right: 18px transition: transform .3s &.hide diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 0d3fc08..accc410 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -24,7 +24,6 @@ --waline-font-size: 1.1em --waline-theme-color: $button-bg --waline-active-color: $button-hover-color - --waline-avatar-size: 2.75rem .vuser transition: all .5s @@ -64,7 +63,7 @@ if hexo-config('waline.bg') .mermaid overflow: auto - margin: 0 0 1rem + margin: 0 0 20px background: $white text-align: center opacity: 0 @@ -80,7 +79,7 @@ if hexo-config('waline.bg') #gitalk-container .gt-meta margin: 0 0 .8em - padding: .3rem 0 .8em + padding: 6px 0 16px .katex-wrap overflow: auto @@ -100,7 +99,7 @@ mjx-container[display], #article-container .aplayer - margin: 0 0 1rem + margin: 0 0 20px if hexo-config('beautify.enable') ol, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index aa16207..19c790c 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -131,7 +131,7 @@ if hexo-config('readmode') ul >li &:before - border: .15rem solid var(--gray) !important + border-color: var(--gray) !important .tabs border: 2px solid var(--tab-border-color) @@ -160,7 +160,7 @@ if hexo-config('readmode') color: var(--font-color) blockquote - border-left: .2rem solid var(--gray) + border-color: var(--gray) background-color: var(--readmode-light-color) kbd diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl index 20e6fed..60244be 100644 --- a/source/css/_page/404.styl +++ b/source/css/_page/404.styl @@ -6,29 +6,23 @@ if hexo-config('error_404.enable') right: 0 left: 0 margin: 0 auto - padding: 0 1rem + padding: 0 20px max-width: 1000px transform: translate(0, -50%) .error-content + @extend .cardHover display: flex flex-direction: row justify-content: center align-items: center - margin: 0 1rem - height: 18rem - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: all .3s - - &:hover - box-shadow: var(--card-hover-box-shadow) + margin: 0 20px + height: 360px +maxWidth768() flex-direction: column margin: 0 - height: 25rem + height: 500px .error-img flex: 1 @@ -47,7 +41,7 @@ if hexo-config('error_404.enable') .error-info flex: 1 - padding: .5rem + padding: 10px text-align: center font-size: 14px @@ -59,28 +53,28 @@ if hexo-config('error_404.enable') width: 100% .error_title - margin-top: -4rem + margin-top: -80px font-size: 9em +maxWidth768() - margin-top: -3rem + margin-top: -60px .error_subtitle @extend .limit-more-line - margin-top: -3.5rem + margin-top: -70px word-break: break-word font-size: 1.6em -webkit-line-clamp: 2 a display: inline-block - margin-top: .5rem - padding: .3rem 1.5rem + margin-top: 10px + padding: 6px 30px background: var(--btn-bg) color: var(--btn-color) i - padding-right: .3rem + padding-right: 6px & + #rightside display: none \ No newline at end of file diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl index ede2dcf..f2bc8c5 100644 --- a/source/css/_page/archives.styl +++ b/source/css/_page/archives.styl @@ -1,13 +1,13 @@ .article-sort - margin-left: .5rem - padding-left: 1rem + margin-left: 10px + padding-left: 20px border-left: 2px solid lighten($light-blue, 20) &-title position: relative - margin-left: .5rem - padding-bottom: 1rem - padding-left: 1rem + margin-left: 10px + padding-bottom: 20px + padding-left: 20px font-size: 1.72em &:hover @@ -16,10 +16,10 @@ &:before position: absolute - top: calc(((100% - 1.8rem) / 2)) - left: -.45rem + top: calc(((100% - 36px) / 2)) + left: -9px z-index: 1 - width: w = .5rem + width: w = 10px height: h = w border: .5 * w solid $light-blue border-radius: w @@ -33,7 +33,7 @@ bottom: 0 left: 0 z-index: 0 - width: .1rem + width: 2px height: 1.5em background: lighten($light-blue, 20) content: '' @@ -42,7 +42,7 @@ position: relative display: flex align-items: center - margin: 0 0 1rem .5rem + margin: 0 0 20px 10px transition: all .2s ease-in-out &:hover @@ -50,9 +50,9 @@ border-color: $pseudo-hover &:before - $w = .3rem + $w = 6px position: absolute - left: calc(-1rem - 17px) + left: calc(-20px - 17px) width: w = $w height: h = w border: .5 * w solid $light-blue @@ -82,7 +82,7 @@ font-size: 95% time - padding-left: .3rem + padding-left: 6px cursor: default &-title @@ -112,4 +112,4 @@ &-info flex: 1 - padding: 0 .8rem + padding: 0 16px diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index 4e2d9cb..38d92cf 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -1,6 +1,6 @@ #page .category-lists - padding: 1rem 0 1.5rem + padding: 20px 0 30px +maxWidth768() padding: 0 @@ -19,7 +19,7 @@ color: $text-hover .category-list-count - margin-left: .4rem + margin-left: 8px color: $theme-meta-color &:before @@ -29,17 +29,17 @@ content: ')' ul - margin-top: .4rem - padding: 0 0 0 1rem + margin-top: 8px + padding: 0 0 0 20px list-style: none counter-reset: li ul - padding-left: .2rem + padding-left: 4px li position: relative - margin: .3rem 0 + margin: 6px 0 padding: .12em .4em .12em 1.4em &:before diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index c695216..bf98482 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -7,7 +7,7 @@ display: flex flex: 1 auto margin: 0 auto - padding: 2rem 15px + padding: 40px 15px max-width: 1200px width: 100% @@ -15,23 +15,18 @@ flex-direction: column +maxWidth768() - padding: 1rem 5px + padding: 20px 5px +minWidth2000() max-width: 1500px & > div:first-child:not(.recent-posts) + @extend .cardHover align-self: flex-start padding: 50px 40px - border-radius: 8px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - - &:hover - box-shadow: var(--card-hover-box-shadow) +maxWidth768() - padding: 1.8rem .7rem !important + padding: 36px 14px & > div:first-child width: 75% @@ -53,3 +48,11 @@ & > div width: 100% !important + +// for apple device +.apple + #page-header.full_page + background-attachment: scroll !important + + .recent-post-item + transform: translateZ(0) diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl index 1d8dbc0..651d4b7 100644 --- a/source/css/_page/flink.styl +++ b/source/css/_page/flink.styl @@ -1,8 +1,5 @@ #article-container .flink - .flink-desc - margin: .2rem 0 .5rem - .flink-list overflow: auto padding: 10px 10px 0 diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 7d10e3e..288e02b 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -1,48 +1,23 @@ #recent-posts & > .recent-post-item:not(:first-child) - margin-top: 1rem + margin-top: 20px & > .recent-post-item + @extend .cardHover display: flex flex-direction: row align-items: center + overflow: hidden height: 20em - border-radius: 12px 8px 8px 12px - background: var(--card-bg) - box-shadow: var(--card-box-shadow) - transition: all .3s +maxWidth768() - border-radius: 12px 12px 8px 8px + flex-direction: column + height: auto &:hover - box-shadow: var(--card-hover-box-shadow) - img.post_bg transform: scale(1.1) - if hexo-config('cover.position') == 'both' - .left_radius - border-radius: 8px 0 0 8px - - .right_radius - order: 2 - border-radius: 0 8px 8px 0 - else if hexo-config('cover.position') == 'left' - .left_radius - border-radius: 8px 0 0 8px - - .right_radius - border-radius: 8px 0 0 8px - else if hexo-config('cover.position') == 'right' - .left_radius - order: 2 - border-radius: 0 8px 8px 0 - - .right_radius - order: 2 - border-radius: 0 8px 8px 0 - &.ads-wrap display: block !important height: auto !important @@ -51,7 +26,10 @@ overflow: hidden width: 45% height: 100% - -webkit-mask-image: -webkit-radial-gradient(white, black) + + +maxWidth768() + width: 100% + height: 230px img.post_bg width: 100% @@ -59,31 +37,42 @@ transition: all .6s object-fit: cover - &:hover - transform: scale(1.1) + &.right + order: 1 + + +maxWidth768() + order: 0 & >.recent-post-info - display: inline-block - overflow: hidden padding: 0 40px width: 55% + +maxWidth768() + padding: 20px 20px 30px + width: 100% + &.no-cover width: 100% + +maxWidth768() + padding: 30px 20px + & > .article-title @extend .limit-more-line - margin-bottom: .3rem color: var(--text-highlight-color) font-size: 1.72em line-height: 1.4 transition: all .2s ease-in-out -webkit-line-clamp: 2 + +maxWidth768() + font-size: 1.43em + &:hover color: $text-hover & > .article-meta-wrap + margin: 6px 0 color: $theme-meta-color font-size: 90% @@ -94,22 +83,22 @@ color: $sticky-color i - margin: 0 .2rem 0 0 + margin: 0 4px 0 0 .article-meta-label if hexo-config('post_meta.page.label') - padding-right: .2rem + padding-right: 4px else display: none .article-meta__separator - margin: 0 .3rem + margin: 0 6px .article-meta__link - margin: 0 .2rem + margin: 0 4px .fa-angle-right - margin: 0 .2rem + margin: 0 4px if hexo-config('post_meta.page.date_format') == 'relative' time @@ -124,31 +113,4 @@ & > .content @extend .limit-more-line - margin-top: .3rem - -webkit-line-clamp: 3 - -+maxWidth768() - #recent-posts - .recent-post-item - flex-direction: column - height: auto !important - - .post_cover - order: 1 !important - width: 100% - height: 230px - border-radius: 8px 8px 0 0 - - .recent-post-info - order: 2 !important - padding: 1rem 1rem 1.5rem - width: 100% - - &.no-cover - padding: 1.5rem 1rem - - .article-title - font-size: 1.43em - - .content - height: auto + -webkit-line-clamp: 3 \ No newline at end of file diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl index ff9ad43..ee3e932 100644 --- a/source/css/_page/tags.styl +++ b/source/css/_page/tags.styl @@ -2,7 +2,7 @@ &-list a display: inline-block - padding: 0 .4rem + padding: 0 8px transition: all .3s &:hover diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index be72c4a..702f8dc 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -6,16 +6,16 @@ width: 100% input - padding: .25rem .7rem + padding: 5px 14px outline: none border: 2px solid $search-color - border-radius: 2rem + border-radius: 40px background: var(--search-bg) color: var(--search-input-color) .ais-hits--item.algolia-hit-item position: relative - padding-left: 1.2rem + padding-left: 24px &:hover &:before @@ -28,7 +28,7 @@ left: 0 width: w = $w height: h = w - border: .15rem solid $search-color + border: 3px solid $search-color border-radius: w background: transparent content: '' @@ -48,20 +48,20 @@ font-weight: bold .ais-pagination.pagination - margin: .8rem 0 0 + margin: 16px 0 0 padding: 0 text-align: center .ais-pagination--item - margin: 0 .2rem + margin: 0 4px padding: 0 a display: inline-block - min-width: 1.2rem - height: 1.2rem + min-width: 24px + height: 24px text-align: center - line-height: 1.2rem + line-height: 24px .ais-pagination--item.current a @@ -71,5 +71,5 @@ .algolia-logo padding-top: 2px - width: 4rem - height: 1.5rem \ No newline at end of file + width: 80px + height: 30px \ No newline at end of file diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 948f41e..9a58862 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -1,12 +1,12 @@ .search-dialog position: fixed - top: 5rem + top: 100px left: 50% z-index: 1001 display: none - margin-left: -15rem - padding: 1rem - width: 30rem + margin-left: -300px + padding: 20px + width: 600px border-radius: 8px background: var(--search-bg) animation: titlescale .5s @@ -20,12 +20,12 @@ border-radius: 0 hr - margin: 1rem auto + margin: 20px auto span.search-close-button position: absolute - top: .8rem - right: 1rem + top: 16px + right: 20px color: $grey font-size: 1.4em line-height: 1 @@ -36,7 +36,7 @@ color: $search-color &__title - padding: 0 0 .7rem + padding: 0 0 14px color: $search-color font-size: 1.4em line-height: 1 diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index e24abd1..aa07477 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -6,18 +6,18 @@ width: 100% input - padding: .25rem .7rem + padding: 5px 14px width: 100% outline: none border: 2px solid $search-color - border-radius: 2rem + border-radius: 40px background: var(--search-bg) color: var(--search-input-color) -webkit-appearance: none .local-search__hit-item position: relative - padding-left: 1.2rem + padding-left: 24px line-height: 1.7 &:hover @@ -31,7 +31,7 @@ left: 0 width: w = $w height: h = w - border: .15rem solid $search-color + border: 3px solid $search-color border-radius: w background: transparent content: '' @@ -48,7 +48,7 @@ color: $search-color .search-result - margin: 0 0 .4rem + margin: 0 0 8px word-break: break-all .search-keyword @@ -57,8 +57,8 @@ .search-result-list overflow-y: auto - max-height: 10.5rem + max-height: 210px +maxWidth768() - padding-bottom: 2rem + padding-bottom: 40px max-height: 75vh !important diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index 7dcf0a7..2547ccf 100644 --- a/source/css/_tags/button.styl +++ b/source/css/_tags/button.styl @@ -1,36 +1,36 @@ #article-container .btn-center - margin: 0 0 1rem + margin: 0 0 20px text-align: center .btn-beautify display: inline-block - margin: 0 .2rem .3rem - padding: 0 1rem + margin: 0 4px 6px + padding: 0 15px background-color: $btn-default-color color: $btn-color line-height: 2 i + span - margin-left: .3rem + margin-left: 6px &:not(.block) + .btn-beautify:not(.block) - margin: 0 .2rem 1rem + margin: 0 4px 20px &.block display: block - margin: 0 0 1rem + margin: 0 0 20px width: fit-content width: -moz-fit-content &.center - margin: 0 auto 1rem + margin: 0 auto 20px &.right - margin: 0 0 1rem auto + margin: 0 0 20px auto &.larger - padding: .3rem 1.3rem + padding: 6px 15px &:hover text-decoration: none diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index 743a645..b726062 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -2,15 +2,15 @@ figure.gallery-group position: relative float: left overflow: hidden - margin: .3rem .2rem - width: calc(50% - .4rem) + margin: 6px 4px + width: calc(50% - 8px) height: 250px border-radius: 8px background: $dark-black -webkit-transform: translate3d(0, 0, 0) +maxWidth600() - width: calc(100% - .4rem) + width: calc(100% - 8px) &:hover img @@ -40,7 +40,7 @@ figure.gallery-group position: absolute top: 0 left: 0 - padding: 1.5rem + padding: 30px width: 100% height: 100% color: $gallery-color @@ -59,7 +59,7 @@ figure.gallery-group p @extend .limit-more-line margin: 0 - padding: .4rem 0 0 + padding: 8px 0 0 letter-spacing: 1px font-size: 1.1em line-height: 1.5 @@ -72,7 +72,7 @@ figure.gallery-group @extend .limit-more-line position: relative margin: 0 - padding: .4rem 0 + padding: 8px 0 font-weight: bold font-size: 1.65em line-height: 1.5 @@ -91,10 +91,10 @@ figure.gallery-group .gallery-group-main overflow: auto - padding: 0 0 .8rem + padding: 0 0 16px .justified-gallery - margin: 0 0 .8rem + margin: 0 0 16px img opacity: 0 diff --git a/source/css/_tags/hexo.styl b/source/css/_tags/hexo.styl index 57e87b9..08cdee7 100644 --- a/source/css/_tags/hexo.styl +++ b/source/css/_tags/hexo.styl @@ -11,13 +11,13 @@ blockquote &.right float: right - margin: 1em 0 0 .5rem + margin: 1em 0 0 .5em // hexo tag video .video-container position: relative overflow: hidden - margin-bottom: .8rem + margin-bottom: 16px padding-top: 56.25% height: 0 diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index 95534a5..d9785b4 100644 --- a/source/css/_tags/hide.styl +++ b/source/css/_tags/hide.styl @@ -3,7 +3,7 @@ .hide-block & > .hide-button display: inline-block - padding: .3rem 1rem + padding: 6px 20px background: $tag-hide-bg color: var(--white) @@ -21,20 +21,20 @@ .hide-inline & > .hide-button - margin: 0 .3rem + margin: 0 6px & > .hide-content - margin: 0 .3rem + margin: 0 6px .hide-block - margin: 0 0 .8rem + margin: 0 0 16px .hide-toggle - margin-bottom: 1rem + margin-bottom: 20px border: 1px solid $tag-hide-toggle-bg & > .hide-button - padding: .3rem .5rem + padding: 6px 10px background: $tag-hide-toggle-bg color: #1F2D3D cursor: pointer @@ -52,4 +52,4 @@ & > .hide-content display: none - margin: 1.5rem 1.2rem + margin: 30px 24px diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl index cb5d899..e128e65 100644 --- a/source/css/_tags/note.styl +++ b/source/css/_tags/note.styl @@ -1,19 +1,19 @@ .note $note-icons = hexo-config('note.icons') position: relative - margin: 0 0 1rem + margin: 0 0 20px padding: 15px if hexo-config('note.border_radius') is a 'unit' border-radius: unit(hexo-config('note.border_radius'), px) &.icon - padding-left: 2.25rem + padding-left: 3em & > .note-icon position: absolute - top: calc(50% - .4rem) - left: .7rem + top: calc(50% - .5em) + left: .8em font-size: larger for $type in $tagsP-types @@ -75,12 +75,12 @@ if $note-icons &:not(.no-icon) - padding-left: 2.25rem + padding-left: 3em &::before position: absolute - top: calc(50% - .8rem) - left: .7rem + top: calc(50% - .95em) + left: .8em font-size: larger @extend .fontawesomeIcon diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl index 785991d..90ede9c 100644 --- a/source/css/_tags/tabs.styl +++ b/source/css/_tags/tabs.styl @@ -2,7 +2,7 @@ #article-container .tabs position: relative - margin: 0 0 1rem + margin: 0 0 20px border-right: 1px solid var(--tab-border-color) border-bottom: 1px solid var(--tab-border-color) border-left: 1px solid var(--tab-border-color) @@ -24,7 +24,7 @@ button display: block - padding: .5rem 1rem + padding: 8px 18px width: 100% border-top: 2px solid var(--tab-border-color) background: var(--tab-botton-bg) @@ -51,10 +51,10 @@ .tab-item-content position: relative display: none - padding: 1.8rem 1.2rem + padding: 36px 24px +maxWidth768() - padding: 1.2rem .7rem + padding: 24px 14px &.active display: block diff --git a/source/css/var.styl b/source/css/var.styl index 87e1503..d36ab41 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -30,7 +30,6 @@ $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size) $font-color = #1F2D3D -$rem = 20px $text-line-height = 2 $web-bg = hexo-config('background') && unquote(hexo-config('background')) $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh diff --git a/source/js/main.js b/source/js/main.js index be82660..e6e83af 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -354,6 +354,7 @@ document.addEventListener('DOMContentLoaded', function () { const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] const $tocLink = $cardToc.querySelectorAll('.toc-link') const $article = document.getElementById('article-container') + const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage') // main of scroll window.tocScrollFn = function () { @@ -373,7 +374,7 @@ document.addEventListener('DOMContentLoaded', function () { const scrollPercent = (currentTop - headerHeight) / (contentMath) const scrollPercentRounded = Math.round(scrollPercent * 100) const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded - $cardToc.setAttribute('progress-percentage', percentage) + $tocPercentage.textContent = percentage } // anchor diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 1abc7cf..5b13445 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -47,9 +47,10 @@ window.addEventListener('load', () => { .then(str => new window.DOMParser().parseFromString(str, 'text/xml')) .then(data => { const datas = [...data.querySelectorAll('entry')].map(function (item) { + const content = item.querySelector('content') return { title: item.querySelector('title').textContent, - content: item.querySelector('content').textContent, + content: content ? content.textContent : '', url: item.querySelector('url').textContent } })