diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index 57b4b2b..60bdf1f 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -30,6 +30,7 @@ body { line-height: 1.5rem; background-color: $global-background-color; color: $global-font-color; + overflow-wrap: break-word; &::before { content: ""; diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss index 29a3db4..1a6b8c1 100644 --- a/assets/css/_core/_media.scss +++ b/assets/css/_core/_media.scss @@ -32,8 +32,8 @@ } @media only screen and (max-width: 960px) { - .navbar { - .navbar-container { + header.desktop { + .header-wrapper { margin: 0 1rem; } } @@ -52,11 +52,11 @@ } @media only screen and (max-width: 560px) { - .navbar { + header.desktop { display: none; } - .navbar-mobile { + header.mobile { display: block; } diff --git a/assets/css/_page/_404.scss b/assets/css/_page/_404.scss index f6d9195..4b2790f 100644 --- a/assets/css/_page/_404.scss +++ b/assets/css/_page/_404.scss @@ -1,4 +1,4 @@ -.notfound { +#content-404 { font-size: 1.8rem; line-height: 3rem; transform: translateY(30vh); diff --git a/assets/css/_page/_archive.scss b/assets/css/_page/_archive.scss new file mode 100644 index 0000000..2c6fed2 --- /dev/null +++ b/assets/css/_page/_archive.scss @@ -0,0 +1,9 @@ +.archive { + .single-title { + text-align: right; + padding-bottom: 2rem; + } + + @import "../_partial/_archive/terms"; + @import "../_partial/_archive/tags"; +} diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index 2f21d4b..0de22fe 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -1,55 +1,70 @@ /** Home **/ -.home-intro { - transform: translateY(25vh); - text-align: center; +@import "../_partial/_home/summary"; - .home-avatar { - padding: 0.6rem; +@mixin page-home($profile, $posts) { + .home { + @if $profile { + .home-profile { + transform: translateY(if($posts, 0, 16vh)); + padding: if($posts, 2rem, 0) 0; + text-align: center; - img { - width: 8rem; - height: auto; - display: inline-block; - -webkit-border-radius: 100%; - border-radius: 100%; - -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); - box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); - margin: 0 auto; - -webkit-transition: all ease 0.4s; - -moz-transition: all ease 0.4s; - -o-transition: all ease 0.4s; - transition: all ease 0.4s; - cursor: pointer; + .home-avatar { + padding: 0.6rem; - &:hover { - position: relative; - -webkit-transform: translateY(-0.75rem); - -moz-transform: translateY(-0.75rem); - -ms-transform: translateY(-0.75rem); - -o-transform: translateY(-0.75rem); - transform: translateY(-0.75rem); - cursor: pointer; + img { + width: if($posts, 6rem, 8rem); + height: auto; + display: inline-block; + -webkit-border-radius: 100%; + border-radius: 100%; + -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); + box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); + margin: 0 auto; + -webkit-transition: all ease 0.4s; + -moz-transition: all ease 0.4s; + -o-transition: all ease 0.4s; + transition: all ease 0.4s; + cursor: pointer; + + &:hover { + position: relative; + -webkit-transform: translateY(-0.75rem); + -moz-transform: translateY(-0.75rem); + -ms-transform: translateY(-0.75rem); + -o-transform: translateY(-0.75rem); + transform: translateY(-0.75rem); + cursor: pointer; + } + } + } + + .home-description { + font-size: 1rem; + font-weight: normal; + margin: 0; + padding: .4rem; + } + + .home-social-links { + padding-top: .6rem; + + i { + font-size: 1.45rem; + } + + img { + width: 1.5rem; + height: 1.5rem; + } + } } } - } - .home-description { - font-size: 1rem; - font-weight: normal; - margin: 0; - padding: .4rem; - } - - .home-social-links { - padding-top: .6rem; - - i { - font-size: 1.45rem; - } - - img { - width: 1.5rem; - height: 1.5rem; + @if $posts { + @include summary; } } } + +@include page-home($home-profile, $home-posts); diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss index 405a90a..78cd7c8 100644 --- a/assets/css/_page/_index.scss +++ b/assets/css/_page/_index.scss @@ -1,30 +1,13 @@ -@import "_home"; -@import "_404"; - .page { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding-top: 6rem; - - @import "_post"; - @import "_posts"; } -.archive { - .post-title { - text-align: right; - padding-bottom: 2rem; - } - - @import "_terms"; - @import "_tags"; -} - -.single { - .post-title { - text-align: right; - padding-bottom: 2rem; - } -} +@import "_single"; +@import "_special"; +@import "_archive"; +@import "_home"; +@import "_404"; diff --git a/assets/css/_page/_post.scss b/assets/css/_page/_post.scss deleted file mode 100644 index 34d1fd1..0000000 --- a/assets/css/_page/_post.scss +++ /dev/null @@ -1,376 +0,0 @@ -/** Post **/ -.post-title { - margin: 0 !important; - font-size: 1.8rem; - line-height: 3rem; -} - -.post-meta { - font-size: .88rem; - color: $global-font-secondary-color; - - span { - display: inline-block; - } - - .dark-theme & { - color: $global-font-secondary-color-dark; - } - - a { - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - - &:hover { - color: $post-link-hover-color; - - .dark-theme & { - color: $post-link-hover-color-dark; - } - } - } - - .author { - font-size: 1.05rem; - } -} - -.post-featured-image { - padding-top: .6rem; - - img { - display: block; - max-width: 100%; - height: auto; - margin: 0 auto; - overflow: hidden; - } -} - -@import "../_partial/_post/toc"; - -.post-content { - .post-dummy-target:target { - display: inline-block; - position: relative; - top: -5.6rem; - visibility: hidden; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: bold; - - .dark-theme & { - font-weight: bolder; - } - } - - h2, - h3, - h4, - h5, - h6 { - padding-top: .8rem; - padding-bottom: .3rem; - } - - h2::before { - content: "#"; - margin-right: .3125rem; - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - h3::before, - h4::before, - h5::before, - h6::before { - content: "|"; - margin-right: .3125rem; - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - p { - font-size: 1rem; - margin: .5rem 0; - } - - a { - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - a:hover { - color: $post-link-hover-color; - - .dark-theme &:hover { - color: $post-link-hover-color-dark; - font-weight: bold; - } - } - - ul { - padding-left: 2rem; - list-style-type: disc; - } - - ruby { - background: $code-background-color; - - rt { - color: $global-font-secondary-color; - } - - .dark-theme & { - background: $code-background-color-dark; - - rt { - color: $global-font-secondary-color-dark; - } - } - } - - .table-wrapper { - overflow-x: auto; - - &::-webkit-scrollbar { - background-color: $table-background-color; - - .dark-theme & { - background-color: $table-background-color-dark; - } - } - - > table { - width: 100%; - max-width: 100%; - margin: .625rem 0; - border-spacing: 0; - background: $table-background-color; - - .dark-theme & { - background: $table-background-color-dark; - } - - thead { - background: $table-thead-color; - - .dark-theme & { - background-color: $table-thead-color-dark; - } - } - - th, td { - padding: .3rem 1rem; - border: 1px double $global-border-color; - - .dark-theme & { - border: 1px double $global-border-color-dark; - } - } - } - } - - figure { - text-align: center; - } - - .image-caption:not(:empty) { - min-width: 20%; - max-width: 80%; - display: inline-block; - padding: .625rem; - margin: 0 auto; - border-bottom: 1px solid #d9d9d9; - font-size: .875rem; - color: #969696; - line-height: 1.7; - } - - img { - display: block; - max-width: 100%; - height: auto; - margin: 0 auto; - overflow: hidden; - } - - blockquote { - font-size: 1rem; - display: block; - border-width: 1px 0; - border-style: solid; - border-color: $global-border-color; - padding: 1.5em 1.2em 0.5em 1.2em; - margin: 0 0 2em 0; - position: relative; - - &::before { - content: '\201C'; - position: absolute; - top: 0em; - left: 50%; - transform: translate(-50%, -50%); - width: 3rem; - height: 2rem; - font: 6em/1.08em 'PT Sans', sans-serif; - color: $post-link-color; - text-align: center; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - &::after { - content: '#blockquote' attr(cite); - display: block; - text-align: right; - font-size: 0.875em; - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - .dark-theme & { - border-color: $global-border-color-dark; - } - } - - .footnotes { - color: $global-font-secondary-color; - - .dark-theme & { - color: $global-font-secondary-color-dark; - } - } - - @import "../_partial/_post/code"; - @import "../_partial/_post/admonition"; - - .mermaid { - width: 100%; - margin: 3% auto; - text-align: center; - - @import "../_mermaid/neutral/index"; - - .dark-theme & { - @import "../_mermaid/dark/index"; - } - } - - @import "../_aplayer/dark.scss"; - - .echarts { - width: 100%; - height: 30rem; - margin: 3% auto; - text-align: center; - } - - .bilibili { - position: relative; - width: 100%; - height: 0; - padding-bottom: 75%; - margin: 3% auto; - text-align: center; - - iframe { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - } - } - - hr { - margin: 1rem 0; - position: relative; - border-top: 1px dashed $global-border-color; - border-bottom: none; - - .dark-theme & { - border-top: 1px dashed $global-border-color-dark; - } - } - - kbd { - display: inline-block; - padding: .25rem; - background-color: $global-background-color; - border: 1px solid $global-border-color; - border-bottom-color: $global-border-color; - border-radius: 3px; - -webkit-box-shadow: inset 0 -1px 0 $global-border-color; - box-shadow: inset 0 -1px 0 $global-border-color; - font-size: .8rem; - font-family: $code-font-family; - color: $code-color; - - .dark-theme & { - background-color: $global-background-color-dark; - border: 1px solid $global-border-color-dark; - border-bottom-color: $global-border-color-dark; - -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark; - box-shadow: inset 0 -1px 0 $global-border-color-dark; - color: $code-color-dark; - } - } - - .typeit { - .code { - padding: .375rem; - font-size: .875rem; - font-family: $code-font-family; - font-weight: bold; - word-break: break-all; - } - } - - .align-left { - text-align: left; - } - - .align-center { - text-align: center; - } - - .align-right { - text-align: right; - } - - .float-left { - float: left; - } - - .float-right { - float: right; - } -} - -@import "../_partial/_post/footer"; - -@import "../_partial/_post/comment"; diff --git a/assets/css/_page/_posts.scss b/assets/css/_page/_posts.scss deleted file mode 100644 index 003beae..0000000 --- a/assets/css/_page/_posts.scss +++ /dev/null @@ -1,133 +0,0 @@ -.home-intro { - transform: translateY(0); - padding: 2rem 0 2rem 0; - - .home-avatar { - img { - width: 6rem; - } - } -} - -.post { - padding-top: 1rem; - padding-bottom: .8rem; - color: $global-font-color; - border-bottom: 1px dashed $global-border-color; - - .dark-theme & { - color: $global-font-color-dark; - border-bottom: 1px dashed $global-border-color-dark; - } - - .post-featured-image-preview { - width: 100%; - padding: 30% 0 0; - position: relative; - margin: 0.6rem auto; - - img { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - object-fit: cover; - } - } - - .post-list-title { - font-size: 1.6rem; - } - - .post-meta { - font-size: .875rem !important; - a { - color: $global-font-secondary-color !important; - - .dark-theme & { - color: $global-font-secondary-color-dark !important; - } - - &:hover { - color: $global-link-hover-color !important; - - .dark-theme & { - color: $global-link-hover-color-dark !important; - } - } - } - } - - .post-content { - display: -webkit-box; - margin-top: .3rem; - width: 100%; - max-height: 10rem; - text-overflow: ellipsis; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - - h2, - h3, - h4, - h5, - h6, - p { - font-size: 1rem; - margin: 0; - padding: .2rem 0; - overflow: hidden; - overflow-wrap: break-word; - text-overflow: ellipsis; - } - - a { - word-break: break-all; - } - } - - .post-footer { - margin-top: .5rem; - display: flex; - justify-content: space-between; - align-items: center; - font-size: .875rem !important; - - a { - color: $post-link-color !important; - - .dark-theme & { - color: $post-link-color-dark !important; - } - - &:hover { - color: $post-link-hover-color !important; - - .dark-theme & { - color: $post-link-hover-color-dark !important; - } - } - } - - .post-tags { - padding: 0; - - a { - color: $global-link-color !important; - - .dark-theme & { - color: $global-link-color-dark !important; - } - - &:hover { - color: $global-link-hover-color !important; - - .dark-theme & { - color: $global-link-hover-color-dark !important; - } - } - } - } - } -} \ No newline at end of file diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss new file mode 100644 index 0000000..9a6603d --- /dev/null +++ b/assets/css/_page/_single.scss @@ -0,0 +1,364 @@ +/** Single **/ +.single { + .single-title { + margin: 0; + font-size: 1.8rem; + line-height: 3rem; + } + + .meta { + font-size: .88rem; + color: $global-font-secondary-color; + + span { + display: inline-block; + } + + .dark-theme & { + color: $global-font-secondary-color-dark; + } + + a { + color: $single-link-color; + + .dark-theme & { + color: $single-link-color-dark; + } + + &:hover { + color: $single-link-hover-color; + + .dark-theme & { + color: $single-link-hover-color-dark; + } + } + } + + .author { + font-size: 1.05rem; + } + } + + .featured-image { + padding-top: .6rem; + + img { + display: block; + max-width: 100%; + height: auto; + margin: 0 auto; + overflow: hidden; + } + } + + @import "../_partial/_single/toc"; + + .content { + .post-dummy-target:target { + display: inline-block; + position: relative; + top: -5.6rem; + visibility: hidden; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + + .dark-theme & { + font-weight: bolder; + } + } + + h2, + h3, + h4, + h5, + h6 { + padding-top: .8rem; + padding-bottom: .3rem; + } + + h2::before { + content: "#"; + margin-right: .3125rem; + color: $single-link-color; + + .dark-theme & { + color: $single-link-color-dark; + } + } + + h3::before, + h4::before, + h5::before, + h6::before { + content: "|"; + margin-right: .3125rem; + color: $single-link-color; + + .dark-theme & { + color: $single-link-color-dark; + } + } + + p { + font-size: 1rem; + margin: .5rem 0; + } + + a { + word-break: break-all; + color: $single-link-color; + + .dark-theme & { + color: $single-link-color-dark; + } + } + + a:hover { + color: $single-link-hover-color; + + .dark-theme &:hover { + color: $single-link-hover-color-dark; + font-weight: bold; + } + } + + ul { + padding-left: 2rem; + list-style-type: disc; + } + + ruby { + background: $code-background-color; + + rt { + color: $global-font-secondary-color; + } + + .dark-theme & { + background: $code-background-color-dark; + + rt { + color: $global-font-secondary-color-dark; + } + } + } + + .table-wrapper { + overflow-x: auto; + + &::-webkit-scrollbar { + background-color: $table-background-color; + + .dark-theme & { + background-color: $table-background-color-dark; + } + } + + > table { + width: 100%; + max-width: 100%; + margin: .625rem 0; + border-spacing: 0; + background: $table-background-color; + + .dark-theme & { + background: $table-background-color-dark; + } + + thead { + background: $table-thead-color; + + .dark-theme & { + background-color: $table-thead-color-dark; + } + } + + th, td { + padding: .3rem 1rem; + border: 1px double $global-border-color; + + .dark-theme & { + border: 1px double $global-border-color-dark; + } + } + } + } + + figure { + text-align: center; + } + + .image-caption:not(:empty) { + min-width: 20%; + max-width: 80%; + display: inline-block; + padding: .625rem; + margin: 0 auto; + border-bottom: 1px solid #d9d9d9; + font-size: .875rem; + color: #969696; + line-height: 1.7; + } + + img { + display: block; + max-width: 100%; + height: auto; + margin: 0 auto; + overflow: hidden; + } + + blockquote { + font-size: 1rem; + display: block; + border-width: 1px 0; + border-style: solid; + border-color: $global-border-color; + padding: 1.5em 1.2em 0.5em 1.2em; + margin: 0 0 2em 0; + position: relative; + + &::before { + content: '\201C'; + position: absolute; + top: 0em; + left: 50%; + transform: translate(-50%, -50%); + width: 3rem; + height: 2rem; + font: 6em/1.08em 'PT Sans', sans-serif; + color: $single-link-color; + text-align: center; + + .dark-theme & { + color: $single-link-color-dark; + } + } + + &::after { + content: '#blockquote' attr(cite); + display: block; + text-align: right; + font-size: 0.875em; + color: $single-link-color; + + .dark-theme & { + color: $single-link-color-dark; + } + } + + .dark-theme & { + border-color: $global-border-color-dark; + } + } + + .footnotes { + color: $global-font-secondary-color; + + .dark-theme & { + color: $global-font-secondary-color-dark; + } + } + + @import "../_partial/_single/code"; + @import "../_partial/_single/admonition"; + + .echarts { + width: 100%; + height: 30rem; + margin: 3% auto; + text-align: center; + } + + .bilibili { + position: relative; + width: 100%; + height: 0; + padding-bottom: 75%; + margin: 3% auto; + text-align: center; + + iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } + } + + hr { + margin: 1rem 0; + position: relative; + border-top: 1px dashed $global-border-color; + border-bottom: none; + + .dark-theme & { + border-top: 1px dashed $global-border-color-dark; + } + } + + kbd { + display: inline-block; + padding: .25rem; + background-color: $global-background-color; + border: 1px solid $global-border-color; + border-bottom-color: $global-border-color; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 $global-border-color; + box-shadow: inset 0 -1px 0 $global-border-color; + font-size: .8rem; + font-family: $code-font-family; + color: $code-color; + + .dark-theme & { + background-color: $global-background-color-dark; + border: 1px solid $global-border-color-dark; + border-bottom-color: $global-border-color-dark; + -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark; + box-shadow: inset 0 -1px 0 $global-border-color-dark; + color: $code-color-dark; + } + } + + .typeit { + .code { + padding: .375rem; + font-size: .875rem; + font-family: $code-font-family; + font-weight: bold; + word-break: break-all; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + .float-left { + float: left; + } + + .float-right { + float: right; + } + } + + @import "../_partial/_single/footer"; + @import "../_partial/_single/comment"; +} diff --git a/assets/css/_page/_special.scss b/assets/css/_page/_special.scss new file mode 100644 index 0000000..00bb32a --- /dev/null +++ b/assets/css/_page/_special.scss @@ -0,0 +1,6 @@ +.special { + .single-title { + text-align: right; + padding-bottom: 2rem; + } +} diff --git a/assets/css/_page/_tags.scss b/assets/css/_partial/_archive/_tags.scss similarity index 94% rename from assets/css/_page/_tags.scss rename to assets/css/_partial/_archive/_tags.scss index 9e466ea..05f352c 100644 --- a/assets/css/_page/_tags.scss +++ b/assets/css/_partial/_archive/_tags.scss @@ -5,7 +5,7 @@ display: inline-block; position: relative; margin: 5px 10px; - word-wrap: break-word; + overflow-wrap: break-word; transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out; diff --git a/assets/css/_page/_terms.scss b/assets/css/_partial/_archive/_terms.scss similarity index 100% rename from assets/css/_page/_terms.scss rename to assets/css/_partial/_archive/_terms.scss diff --git a/assets/css/_partial/_navbar.scss b/assets/css/_partial/_header.scss similarity index 82% rename from assets/css/_partial/_navbar.scss rename to assets/css/_partial/_header.scss index 10ce1bc..61df6d3 100644 --- a/assets/css/_partial/_navbar.scss +++ b/assets/css/_partial/_header.scss @@ -1,78 +1,78 @@ -.navbar { +header.desktop { display: block; position: fixed; width: 100%; z-index: 100; height: 4rem; line-height: 4rem; - background-color: $navbar-background-color; + background-color: $header-background-color; .dark-theme & { - background-color: $navbar-background-color-dark; + background-color: $header-background-color-dark; } - .navbar-container { + .header-wrapper { width: auto; text-align: center; margin: 0 4rem; display: flex; justify-content: space-between; - .navbar-header a { + .header-title a { padding: 0 8px; - font-size: 20px; + font-size: 1.25rem; i { - line-height: 2em; + line-height: 2rem; } } - .navbar-menu a { + .menu a { padding: 0 8px; &.active { font-weight: 900; - color: $navbar-hover-color; + color: $header-hover-color; .dark-theme & { - color: $navbar-hover-color-dark; + color: $header-hover-color-dark; } } } } } -.navbar-mobile { +header.mobile { display: none; position: fixed; width: 100%; z-index: 100; transition: all 0.3s ease 0s; - .navbar-container { + .header-wrapper { padding: 0; margin: 0; - height: 4.5em; - line-height: 4.5em; + height: 4.5rem; + line-height: 4.5rem; background: $global-background-color; - .navbar-header { + .header-container { display: flex; justify-content: space-between; align-items: center; width: 100%; - font-size: 18px; - padding-right: 1em; - padding-left: 1em; + font-size: 1.125rem; + padding-right: 1rem; + padding-left: 1rem; box-sizing: border-box; - .navbar-header-title { - font-size: 20px; + .header-title { + font-size: 1.25rem; } .menu-toggle { cursor: pointer; - line-height: 4.5em; + line-height: 4.5rem; span { display: block; @@ -127,7 +127,7 @@ } } - .navbar-menu { + .menu { text-align: center; background: $global-background-color; border-top: 2px solid $global-font-color; @@ -136,7 +136,7 @@ a { display: block; - line-height: 2.5em; + line-height: 2.5rem; } &.active { diff --git a/assets/css/_partial/_home/_summary.scss b/assets/css/_partial/_home/_summary.scss new file mode 100644 index 0000000..2a20903 --- /dev/null +++ b/assets/css/_partial/_home/_summary.scss @@ -0,0 +1,134 @@ +@mixin summary { + .summary { + padding-top: 1rem; + padding-bottom: .8rem; + color: $global-font-color; + border-bottom: 1px dashed $global-border-color; + + .dark-theme & { + color: $global-font-color-dark; + border-bottom: 1px dashed $global-border-color-dark; + } + + .featured-image-preview { + width: 100%; + padding: 30% 0 0; + position: relative; + margin: 0.6rem auto; + + img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; + } + } + + .single-title { + font-size: 1.6rem; + } + + .meta { + font-size: .875rem !important; + a { + color: $global-font-secondary-color !important; + + .dark-theme & { + color: $global-font-secondary-color-dark !important; + } + + &:hover { + color: $global-link-hover-color !important; + + .dark-theme & { + color: $global-link-hover-color-dark !important; + } + } + } + } + + .content { + display: -moz-box; + display: -webkit-box; + -moz-box-orient: vertical; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + margin-top: .3rem; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + overflow-wrap: break-word; + } + + h1, + h2, + h3, + h4, + h5, + h6, + p { + font-size: 1rem; + display: inline; + + &::after { + content: "\A"; + white-space: pre; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 2; + } + + .post-footer { + margin-top: .5rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: .875rem !important; + + a { + color: $single-link-color !important; + + .dark-theme & { + color: $single-link-color-dark !important; + } + + &:hover { + color: $single-link-hover-color !important; + + .dark-theme & { + color: $single-link-hover-color-dark !important; + } + } + } + + .post-tags { + padding: 0; + + a { + color: $global-link-color !important; + + .dark-theme & { + color: $global-link-color-dark !important; + } + + &:hover { + color: $global-link-hover-color !important; + + .dark-theme & { + color: $global-link-hover-color-dark !important; + } + } + } + } + } + } +} diff --git a/assets/css/_partial/_pagination.scss b/assets/css/_partial/_pagination.scss index 9019b34..8ab38ac 100644 --- a/assets/css/_partial/_pagination.scss +++ b/assets/css/_partial/_pagination.scss @@ -1,4 +1,4 @@ - /** pagination **/ +/** pagination **/ .pagination { display: flex; flex-direction: row; diff --git a/assets/css/_partial/_post/_admonition.scss b/assets/css/_partial/_single/_admonition.scss similarity index 100% rename from assets/css/_partial/_post/_admonition.scss rename to assets/css/_partial/_single/_admonition.scss diff --git a/assets/css/_partial/_post/_code.scss b/assets/css/_partial/_single/_code.scss similarity index 100% rename from assets/css/_partial/_post/_code.scss rename to assets/css/_partial/_single/_code.scss diff --git a/assets/css/_partial/_post/_comment.scss b/assets/css/_partial/_single/_comment.scss similarity index 56% rename from assets/css/_partial/_post/_comment.scss rename to assets/css/_partial/_single/_comment.scss index 27bcb30..21dbd9d 100644 --- a/assets/css/_partial/_post/_comment.scss +++ b/assets/css/_partial/_single/_comment.scss @@ -1,3 +1,3 @@ -.post-comment { +.comment { padding: 4rem 0; } diff --git a/assets/css/_partial/_post/_footer.scss b/assets/css/_partial/_single/_footer.scss similarity index 89% rename from assets/css/_partial/_post/_footer.scss rename to assets/css/_partial/_single/_footer.scss index 41f0c5a..cd2bdb2 100644 --- a/assets/css/_partial/_post/_footer.scss +++ b/assets/css/_partial/_single/_footer.scss @@ -34,17 +34,17 @@ .post-info-md a { font-size: 0.8em; - color: $post-link-color; + color: $single-link-color; .dark-theme & { - color: $post-link-color-dark; + color: $single-link-color-dark; } &:hover { - color: $post-link-hover-color; + color: $single-link-hover-color; .dark-theme & { - color: $post-link-hover-color-dark; + color: $single-link-hover-color-dark; } } } diff --git a/assets/css/_partial/_post/_toc.scss b/assets/css/_partial/_single/_toc.scss similarity index 87% rename from assets/css/_partial/_post/_toc.scss rename to assets/css/_partial/_single/_toc.scss index 5a132fa..a39f7ed 100644 --- a/assets/css/_partial/_post/_toc.scss +++ b/assets/css/_partial/_single/_toc.scss @@ -5,7 +5,7 @@ margin-left: 1000px; padding: 0 .8rem; border-left: 1px solid $global-border-color; - word-wrap: break-word; + overflow-wrap: break-word; box-sizing: border-box; top: 12rem; @@ -37,10 +37,10 @@ content: "|"; font-weight: bolder; margin-right: .5rem; - color: $post-link-color; + color: $single-link-color; .dark-theme & { - color: $post-link-color-dark; + color: $single-link-color-dark; } } @@ -56,18 +56,18 @@ .toc-link.active { font-weight: bold; - color: $post-link-hover-color; + color: $single-link-hover-color; .dark-theme & { - color: $post-link-hover-color-dark; + color: $single-link-hover-color-dark; } &::before { font-weight: bolder; - color: $post-link-hover-color; + color: $single-link-hover-color; .dark-theme & { - color: $post-link-hover-color-dark; + color: $single-link-hover-color-dark; } } } diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index 2161d1e..e93928b 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -47,24 +47,24 @@ $selection-color: rgba(38, 139, 211, 0.2) !default; $selection-color-dark: rgba(38, 139, 211, 0.3) !default; // ========== Selection ========== // -// ========== Navbar ========== // -// Color of the navbar background -$navbar-background-color: #fafafa !default; -$navbar-background-color-dark: #252627 !default; +// ========== Header ========== // +// Color of the header background +$header-background-color: #fafafa !default; +$header-background-color-dark: #252627 !default; -// Color of the hover navbar item -$navbar-hover-color: #161209 !default; -$navbar-hover-color-dark: #fff !default; -// ========== Navbar ========== // +// Color of the hover header item +$header-hover-color: #161209 !default; +$header-hover-color-dark: #fff !default; +// ========== Header ========== // -// ========== Post Content ========== // -// Color of the post link -$post-link-color: #2d96bd !default; -$post-link-color-dark: #eee !default; +// ========== Single Content ========== // +// Color of the single link +$single-link-color: #2d96bd !default; +$single-link-color-dark: #eee !default; -// Color of the hover post link -$post-link-hover-color: #ef3982 !default; -$post-link-hover-color-dark: #2d96bd !default; +// Color of the hover single link +$single-link-hover-color: #ef3982 !default; +$single-link-hover-color-dark: #2d96bd !default; // Color of the table background $table-background-color: #fff !default; @@ -73,7 +73,7 @@ $table-background-color-dark: #272c34 !default; // Color of the table thead $table-thead-color: #ededed !default; $table-thead-color-dark: #20252b !default; -// ========== Post Content ========== // +// ========== Single Content ========== // // ========== Pagination ========== // // Color of the link in pagination diff --git a/assets/css/custom-style.scss b/assets/css/custom-style.scss deleted file mode 100644 index 50c2f86..0000000 --- a/assets/css/custom-style.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "_variables"; -@import "_custom"; - -@import "_core/normalize"; -@import "_core/base"; -@import "_core/layout"; - -@import "_page/index"; - -@import "_partial/navbar"; -@import "_partial/footer"; -@import "_partial/pagination"; - -@import "_core/media"; - -@import "_custom"; diff --git a/assets/css/lib/VERSION b/assets/css/lib/VERSION index fbe4ff5..24cae60 100644 --- a/assets/css/lib/VERSION +++ b/assets/css/lib/VERSION @@ -4,3 +4,4 @@ gittalk@1.5.0 katex@0.11.1 aplayer@1.10.1 animate.css@3.7.2 +mermaid@8.4.2 diff --git a/assets/css/_aplayer/dark.scss b/assets/css/lib/aplayer/dark.scss similarity index 100% rename from assets/css/_aplayer/dark.scss rename to assets/css/lib/aplayer/dark.scss diff --git a/assets/css/_mermaid/class.scss b/assets/css/lib/mermaid/class.scss similarity index 100% rename from assets/css/_mermaid/class.scss rename to assets/css/lib/mermaid/class.scss diff --git a/assets/css/_mermaid/dark/index.scss b/assets/css/lib/mermaid/dark/index.scss similarity index 100% rename from assets/css/_mermaid/dark/index.scss rename to assets/css/lib/mermaid/dark/index.scss diff --git a/assets/css/_mermaid/default/index.scss b/assets/css/lib/mermaid/default/index.scss similarity index 100% rename from assets/css/_mermaid/default/index.scss rename to assets/css/lib/mermaid/default/index.scss diff --git a/assets/css/_mermaid/flowchart.scss b/assets/css/lib/mermaid/flowchart.scss similarity index 100% rename from assets/css/_mermaid/flowchart.scss rename to assets/css/lib/mermaid/flowchart.scss diff --git a/assets/css/_mermaid/forest/index.scss b/assets/css/lib/mermaid/forest/index.scss similarity index 100% rename from assets/css/_mermaid/forest/index.scss rename to assets/css/lib/mermaid/forest/index.scss diff --git a/assets/css/_mermaid/gantt.scss b/assets/css/lib/mermaid/gantt.scss similarity index 100% rename from assets/css/_mermaid/gantt.scss rename to assets/css/lib/mermaid/gantt.scss diff --git a/assets/css/_mermaid/git.scss b/assets/css/lib/mermaid/git.scss similarity index 100% rename from assets/css/_mermaid/git.scss rename to assets/css/lib/mermaid/git.scss diff --git a/assets/css/_mermaid/mermaid.scss b/assets/css/lib/mermaid/mermaid.scss similarity index 100% rename from assets/css/_mermaid/mermaid.scss rename to assets/css/lib/mermaid/mermaid.scss diff --git a/assets/css/_mermaid/neutral/index.scss b/assets/css/lib/mermaid/neutral/index.scss similarity index 100% rename from assets/css/_mermaid/neutral/index.scss rename to assets/css/lib/mermaid/neutral/index.scss diff --git a/assets/css/_mermaid/pie.scss b/assets/css/lib/mermaid/pie.scss similarity index 100% rename from assets/css/_mermaid/pie.scss rename to assets/css/lib/mermaid/pie.scss diff --git a/assets/css/_mermaid/sequence.scss b/assets/css/lib/mermaid/sequence.scss similarity index 100% rename from assets/css/_mermaid/sequence.scss rename to assets/css/lib/mermaid/sequence.scss diff --git a/assets/css/_mermaid/state.scss b/assets/css/lib/mermaid/state.scss similarity index 100% rename from assets/css/_mermaid/state.scss rename to assets/css/lib/mermaid/state.scss diff --git a/assets/css/mermaid.scss b/assets/css/mermaid.scss new file mode 100644 index 0000000..088ad2d --- /dev/null +++ b/assets/css/mermaid.scss @@ -0,0 +1,11 @@ +.mermaid { + width: 100%; + margin: 3% auto; + text-align: center; + + @import "lib/mermaid/neutral/index"; + + .dark-theme & { + @import "lib/mermaid/dark/index"; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss deleted file mode 100644 index 3c580d8..0000000 --- a/assets/css/style.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import "_variables"; - -@import "_core/normalize"; -@import "_core/base"; -@import "_core/layout"; - -@import "_page/index"; - -@import "_partial/navbar"; -@import "_partial/footer"; -@import "_partial/pagination"; - -@import "_core/media"; diff --git a/assets/css/style.template.scss b/assets/css/style.template.scss new file mode 100644 index 0000000..e8f399f --- /dev/null +++ b/assets/css/style.template.scss @@ -0,0 +1,29 @@ +{{- if eq .Site.Params.home_mode "post" -}} + $home-profile: true; + $home-posts: true; +{{- else -}} + $home-profile: true; + $home-posts: false; +{{- end -}} + +@import "_variables"; + +{{- if fileExists "config/css/_custom.scss" -}} + @import "_custom"; +{{- end -}} + +@import "_core/normalize"; +@import "_core/base"; +@import "_core/layout"; + +@import "_page/index"; + +@import "_partial/header"; +@import "_partial/footer"; +@import "_partial/pagination"; + +@import "_core/media"; + +{{- if fileExists "config/css/_custom.scss" -}} + @import "_custom"; +{{- end -}} diff --git a/assets/js/blog.js b/assets/js/theme.js similarity index 87% rename from assets/js/blog.js rename to assets/js/theme.js index 6f5761e..225ed4a 100644 --- a/assets/js/blog.js +++ b/assets/js/theme.js @@ -2,16 +2,20 @@ jQuery(function($) { 'use strict'; - var _Blog = window._Blog || {}; + var _Theme = window._Theme || {}; - _Blog.toggleMobileMenu = function() { + _Theme.scroll = function () { + window.scroll = new SmoothScroll('[data-scroll]', {speed: 300, speedAsDuration: true}); + } + + _Theme.toggleMobileMenu = function () { $('#menu-toggle').on('click', () => { $('#menu-toggle').toggleClass('active'); - $('#mobile-menu').toggleClass('active'); + $('#menu-mobile').toggleClass('active'); }); }; - _Blog.toggleTheme = function() { + _Theme.toggleTheme = function () { $('.theme-switch').on('click', () => { $('body').toggleClass('dark-theme'); window.isDark = !window.isDark; @@ -20,17 +24,7 @@ jQuery(function($) { }); }; - _Blog.changeTitle = function() { - var currentTitle = document.title; - window.onblur = function() { - document.title = currentTitle; - }; - window.onfocus = function() { - document.title = currentTitle; - }; - }; - - _Blog.dynamicToTop = function() { + _Theme.dynamicToTop = function () { const min = 300; var $toTop = $('#dynamic-to-top'); $(window).scroll(() => { @@ -73,7 +67,7 @@ jQuery(function($) { }); }; - _Blog.chroma = function () { + _Theme.chroma = function () { const blocks = document.querySelectorAll('.highlight > .chroma'); for (let i = 0; i < blocks.length; i++) { const block = blocks[i]; @@ -101,8 +95,8 @@ jQuery(function($) { } }; - _Blog.responsiveTable = function() { - const tables = document.querySelectorAll('.post-content table'); + _Theme.responsiveTable = function () { + const tables = document.querySelectorAll('.content table'); for (let i = 0; i < tables.length; i++) { const table = tables[i]; const wrapper = document.createElement('div'); @@ -112,7 +106,7 @@ jQuery(function($) { } }; - _Blog._refactorToc = function(toc) { + _Theme._refactorToc = function(toc) { // when headings do not start with `h1` const oldTocList = toc.children[0]; let newTocList = oldTocList; @@ -124,12 +118,12 @@ jQuery(function($) { if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList); }; - _Blog._linkToc = function() { + _Theme._linkToc = function () { const links = document.querySelectorAll('#TableOfContents a:first-child'); for (let i = 0; i < links.length; i++) links[i].className += ' toc-link'; for (let num = 1; num <= 6; num++) { - const headers = document.querySelectorAll('.post-content>h' + num); + const headers = document.querySelectorAll('.content>h' + num); for (let i = 0; i < headers.length; i++) { const header = headers[i]; header.innerHTML = `${header.innerHTML}`; @@ -137,7 +131,7 @@ jQuery(function($) { } }; - _Blog._initToc = function() { + _Theme._initToc = function () { const $toc = $('#post-toc'); if ($toc.length && $toc.css('display') !== 'none') { const SPACING = 80; @@ -145,7 +139,7 @@ jQuery(function($) { const minTop = $toc.position().top;; const mainTop = $('main').position().top; const minScrollTop = minTop + mainTop - SPACING; - const changeTocState = function() { + const changeTocState = function () { const scrollTop = $(window).scrollTop(); const maxTop = $footer.position().top - $toc.height(); const maxScrollTop = maxTop + mainTop - SPACING; @@ -213,7 +207,7 @@ jQuery(function($) { } }; - _Blog.toc = function() { + _Theme.toc = function () { const tocContainer = document.getElementById('post-toc'); if (tocContainer !== null) { const toc = document.getElementById('TableOfContents'); @@ -225,15 +219,16 @@ jQuery(function($) { this._linkToc(); this._initToc(); // Listen for orientation changes - window.addEventListener("resize", function() { - this.setTimeout(_Blog._initToc, 0); + window.addEventListener("resize", function () { + this.setTimeout(_Theme._initToc, 0); }, false); } } }; - _Blog.mermaid = function() { + _Theme.mermaid = function () { if (window.mermaidMap) { + mermaid.initialize({startOnLoad: false, theme: null}); const mermaidAPI = mermaid.mermaidAPI Object.keys(mermaidMap).forEach((id) => { const element = document.getElementById(id); @@ -246,7 +241,7 @@ jQuery(function($) { } } - _Blog.echarts = function() { + _Theme.echarts = function () { if (window.echartsMap) { for (let i = 0; i < echartsArr.length; i++) { echartsArr[i].dispose(); @@ -257,7 +252,7 @@ jQuery(function($) { myChart.setOption(echartsMap[id]); echartsArr.push(myChart); }); - window.addEventListener("resize", function() { + window.addEventListener("resize", function () { this.setTimeout(() => { for (let i = 0; i < echartsArr.length; i++) { echartsArr[i].resize(); @@ -267,7 +262,7 @@ jQuery(function($) { } } - _Blog.countdown = function() { + _Theme.countdown = function () { if (window.countdownMap) { Object.keys(countdownMap).forEach(function(id) { $(`#${id}`).countdown(countdownMap[id]['date'], {elapse: true}) @@ -278,7 +273,7 @@ jQuery(function($) { } }; - _Blog.typeit = function() { + _Theme.typeit = function () { if (window.typeitArr) { for (let i = 0; i < typeitArr.length; i++) { const group = typeitArr[i]; @@ -303,16 +298,16 @@ jQuery(function($) { }; $(document).ready(() => { - _Blog.toggleMobileMenu(); - _Blog.toggleTheme(); - _Blog.changeTitle(); - _Blog.dynamicToTop(); - _Blog.chroma(); - _Blog.responsiveTable(); - _Blog.mermaid(); - _Blog.echarts(); - _Blog.countdown(); - _Blog.typeit(); - _Blog.toc(); + _Theme.scroll(); + _Theme.toggleMobileMenu(); + _Theme.toggleTheme(); + _Theme.dynamicToTop(); + _Theme.chroma(); + _Theme.responsiveTable(); + _Theme.mermaid(); + _Theme.echarts(); + _Theme.countdown(); + _Theme.typeit(); + _Theme.toc(); }); }); diff --git a/i18n/en.toml b/i18n/en.toml index 6d95705..f798934 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -33,10 +33,10 @@ other = "More" other = "Switch Theme" # === partials/header.html === -# === partials/comments.html === +# === partials/comment.html === [valineLang] other = "en" -# === partials/comments.html === +# === partials/comment.html === # === partials/footer.html === [powered] diff --git a/i18n/zh.toml b/i18n/zh.toml index 6b2db78..41ee9ca 100644 --- a/i18n/zh.toml +++ b/i18n/zh.toml @@ -33,10 +33,10 @@ other = "更多" other = "切换主题" # === partials/header.html === -# === partials/comments.html === +# === partials/comment.html === [valineLang] other = "zh-cn" -# === partials/comments.html === +# === partials/comment.html === # === partials/footer.html === [powered] diff --git a/layouts/404.html b/layouts/404.html index a1319f0..153b0d7 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -3,7 +3,7 @@ {{- end -}} {{- define "content" -}} -
+

{{- T "pageNotFoundText" -}}  @@ -11,12 +11,12 @@

{{- end -}} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9cd2b89..bc131ae 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,15 +3,26 @@ {{- errorf "\n\nThere are two possible situations that led to this error:\n 1. You haven't copied the config.toml yet. See https://github.com/dillonzq/LoveIt#installation \n 2. You have an incompatible update. See https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n\n有两种可能的情况会导致这个错误发生:\n 1. 你还没有复制 config.toml 参考 https://github.com/dillonzq/LoveIt#installation \n 2. 你进行了一次不兼容的更新 参考 https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n" -}} {{- end -}} +{{- if eq (getenv "HUGO_ENV") "production" -}} + {{- .Scratch.Set "production" true -}} + {{- .Scratch.Set "CDN" .Site.Params.cdn -}} +{{- end -}} + - + + + {{- block "title" . }}{{ .Site.Title }}{{ end -}} - {{- partial "head.html" . -}} + + + {{- partial "head/meta.html" . -}} + {{- partial "head/link.html" . -}} + {{- partial "head/seo.html" . -}} {{- /* Check theme isDark before body rendering */ -}} @@ -45,7 +56,7 @@   - {{- /* Load scripts */ -}} - {{- partial "scripts.html" . -}} + {{- /* Load script */ -}} + {{- partial "script.html" . -}} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 7eae58a..5b1bf19 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -5,7 +5,7 @@ {{- define "content" -}}
{{- /* Title */ -}} -

+

{{- T "all" | humanize}}{{ T .Section | default .Section | humanize -}}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html index fc75ec3..4f20bc5 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,14 +1,14 @@ {{- define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end -}} {{- define "content" -}} -
+
{{- /* Title */ -}} -

+

{{- .Title -}}

{{- /* Content */ -}} -
+
{{- partial "hook/content.html" .Content | safeHTML -}}
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 32c0a8c..cc11c2d 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,19 +1,19 @@ -
+
{{- /* Featured image */ -}} {{- with .Params.featured_image -}} -
+ {{- end -}} {{- /* Title */ -}} -

+

{{ .Title }}

{{- /* Meta */ -}} -