diff --git a/_config.yml b/_config.yml
index c35b19e..cfe4214 100755
--- a/_config.yml
+++ b/_config.yml
@@ -513,15 +513,20 @@ style:
search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
sidebar:
# 可以设置：纯色/渐变色/图片作为背景
- # background: 'linear-gradient(to bottom, #abc3, #abc3)'
- # background: 'linear-gradient(to bottom, #20E2D744, #F9FEA544)'
- background: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)'
- # 在图片上层增加高斯模糊效果（同时附带饱和度增强效果）
- blur: true
+ # background: var(--sidebar-bg)
+ # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'
+ background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
+ blur-px: 100px
+ blur-bg: var(--alpha60)
paginator:
prev: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg
next: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/064b95430caf4.svg
error_page: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/404/1c830bfcd517d.svg
+ site:
+ background-image: #'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/image/site-bg1@small.webp)' # 未完全适配，慎用
+ blur-px: 100px
+ blur-bg: var(--alpha75)
+
default:
avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg
diff --git a/layout/layout.ejs b/layout/layout.ejs
index d99279d..2bfc236 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -25,10 +25,18 @@ if (page.indent != null) {
indent = article_type === 'story'
}
+var site_background = ''
+if (theme.style.site && theme.style.site['background-image']) {
+ site_background += ``
+ site_background += `
`
+ site_background += `
`
html += `
`
diff --git a/source/css/_common/button.styl b/source/css/_common/button.styl
index 55f0cbe..e0c47c5 100644
--- a/source/css/_common/button.styl
+++ b/source/css/_common/button.styl
@@ -26,34 +26,36 @@ a[onclick]:hover
cursor: pointer
a.button.start.gradient
- transition: 0.38s ease-out
position relative
- z-index: 0
- background: convert(hexo-config('style.gradient.start'))
- background-size: 1000%
- color: white
- text-shadow: 0 0 1px rgba(0,0,0,0.12)
- animation: glow 60s linear infinite
- @keyframes glow {
- from {
- background-position: 0%
- }
- to {
- background-position: 1000%
- }
- }
- &:after
- content: ''
- position absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
- border-radius: 100px
- background: inherit
- z-index -1
- filter: blur(36px)
+ @media (prefers-color-scheme: dark)
transition: 0.38s ease-out
- opacity 0
- &:hover:after
- opacity 1
\ No newline at end of file
+ z-index: 0
+ background: convert(hexo-config('style.gradient.start'))
+ background-size: 1000%
+ color: white
+ text-shadow: 0 0 1px rgba(0,0,0,0.12)
+ animation: glow 60s linear infinite
+ @keyframes glow {
+ from {
+ background-position: 0%
+ }
+ to {
+ background-position: 1000%
+ }
+ }
+ &:after
+ content: ''
+ position absolute
+ left: 0
+ right: 0
+ top: 0
+ bottom: 0
+ border-radius: 100px
+ background: inherit
+ z-index -1
+ filter: blur(12px)
+ opacity: 0.5
+ transition: 0.38s ease-out
+ &:hover:after
+ filter: blur(36px)
+ opacity 1
\ No newline at end of file
diff --git a/source/css/_common/toast.styl b/source/css/_common/toast.styl
index bb1704c..6927e23 100644
--- a/source/css/_common/toast.styl
+++ b/source/css/_common/toast.styl
@@ -20,6 +20,7 @@ div.toast
visibility: visible
-webkit-animation: fadein 0.5s, fadeout 0.5s 2s
animation: fadein 0.5s, fadeout 0.5s 2s
+ animation-fill-mode: forwards
@-webkit-keyframes fadein
from {top: -64px; opacity: 0;}
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index d1ac6f9..4704dce 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -38,8 +38,9 @@ set_text_light()
--alpha20: rgba(white, 0.2)
--alpha50: rgba(white, 0.5)
--alpha60: rgba(white, 0.6)
+ --alpha75: rgba(white, 0.75)
--alpha100: white
- --sidebar-bg: rgba(white, 0.5)
+ --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
--block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92)
@@ -56,8 +57,9 @@ set_darkmode()
--alpha20: rgba(black, 0.2)
--alpha50: rgba(black, 0.5)
--alpha60: rgba(black, 0.6)
+ --alpha75: rgba(black, 0.75)
--alpha100: black
- --sidebar-bg: rgba(black, 0.64)
+ --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
set_text_light()
@media screen and (max-width: $device-mobile-max)
--site-bg: black
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index c4f45b0..26a7c8b 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -27,7 +27,7 @@
left: 0
width: 100%
height: 100%
- background: rgba(black, 0.5)
+ background: rgba(black, 0.2)
z-index: 9
opacity 0
trans1 opacity
@@ -47,7 +47,7 @@
max-width: 100%
.l_body.mobile
.l_left
- transition: transform .3s ease-out
+ transition: transform .38s ease-out
.l_body.mobile.sidebar
.l_left
transform: translateX(0px)
diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl
index 89db0a3..ac4d0c9 100644
--- a/source/css/_layout/list.styl
+++ b/source/css/_layout/list.styl
@@ -24,11 +24,17 @@
display: block
margin: 1rem 0
border-radius: $border-card
- box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
+ background: var(--card)
+ @media (prefers-color-scheme: dark)
+ &:hover
+ box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+ @media (prefers-color-scheme: light)
+ box-shadow: $boxshadow-card
+ hover-float()
trans1 all
overflow: hidden
z-index: 0
- background: var(--card)
+
position: relative
.excerpt
margin: 1rem 0
@@ -56,11 +62,9 @@
height: 1.5rem
color: $c-red
-.post-list .post-card:hover
- img
- transform: scale(1.02)
- filter: brightness(80%)
-
+.post-list.post .post-card:hover
+ img
+ filter: brightness(50%)
// common article
.post-list .md-text
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index 66e074d..8bea011 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -16,4 +16,22 @@
.l_body.index
.l_main
@media screen and (max-width: $device-mobile-max)
- padding-top: 0
\ No newline at end of file
+ padding-top: 0
+
+body>.sitebg
+ position fixed
+ top: 0
+ left: 0
+ right: 0
+ bottom: 0
+ background-size: cover
+ if hexo-config('style.site') && hexo-config('style.site.background-image')
+ background-image: convert(hexo-config('style.site.background-image'))
+ .siteblur
+ width: 100%
+ height: 100%
+ blur-effect()
+ if hexo-config('style.site') && hexo-config('style.site.blur-px')
+ --blur-px: convert(hexo-config('style.site.blur-px'))
+ if hexo-config('style.site') && hexo-config('style.site.blur-bg')
+ --blur-bg: convert(hexo-config('style.site.blur-bg'))
\ No newline at end of file
diff --git a/source/css/_layout/partial/navbar.styl b/source/css/_layout/partial/navbar.styl
index 3ee1220..c25e9de 100644
--- a/source/css/_layout/partial/navbar.styl
+++ b/source/css/_layout/partial/navbar.styl
@@ -1,12 +1,16 @@
.nav-wrap
- position: sticky
- position: -webkit-sticky
- margin-top: -0.5rem
- top: -2px
- background: var(--site-bg)
padding: 0 1rem
z-index: 8
- margin-bottom: 1px
+ top: 0
+ background: var(--site-bg)
+ if hexo-config('style.site') && hexo-config('style.site.background-image')
+ position inherit
+ background: none
+ else
+ position: sticky
+ position: -webkit-sticky
+ margin-bottom: 1px
+ margin-top: -8px
&:after
content: ''
width: 'calc(100% - 2 * %s)' % 1rem
@@ -25,7 +29,10 @@ nav.cap
margin: 0
a
padding: .25rem 0.75rem
- margin: 10px 0.25rem 8px 0.25rem
+ if hexo-config('style.site') && hexo-config('style.site.background-image')
+ margin: 10px 0.25rem 8px 0
+ else
+ margin: 10px 0.25rem 8px 0.25rem
line-height: 2
color: var(--text-p3)
border-radius: $border-button
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 02a0240..3fe4a7e 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -12,18 +12,21 @@
.l_left
background-size: cover
- if hexo-config('style.sidebar.background')
- background-image: convert(hexo-config('style.sidebar.background'))
+ if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image')
+ background-image: convert(hexo-config('style.sidebar.background-image'))
+ else if hexo-config('style.sidebar') && hexo-config('style.sidebar.background')
+ background: convert(hexo-config('style.sidebar.background'))
.sidebar-container
height: 100%
display: flex
flex-direction: column
word-break: break-all
text-align: justify
- .sidebar-blur
- --blur-px: 100px
- --blur-bg: var(--sidebar-bg)
- @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
- background: var(--blur-bg)
- backdrop-filter: saturate(240%) blur(var(--blur-px))
- -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
\ No newline at end of file
+ if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px')
+ --blur-px: convert(hexo-config('style.sidebar.blur-px'))
+ @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
+ background: var(--blur-bg)
+ backdrop-filter: saturate(240%) blur(var(--blur-px))
+ -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
+ if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-bg')
+ --blur-bg: convert(hexo-config('style.sidebar.blur-bg'))
\ No newline at end of file