xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[opt] style

This commit is contained in:
xaoxuu 2024-01-25 22:50:17 +08:00
parent 4eccaf0ed2
commit 0f98393ed3
10 changed files with 112 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
_config.yml
View File

@ -513,15 +513,20 @@ style:
search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)' search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
sidebar: sidebar:
# 可以设置：纯色/渐变色/图片作为背景 # 可以设置：纯色/渐变色/图片作为背景
# background: 'linear-gradient(to bottom, #abc3, #abc3)' # background: var(--sidebar-bg)
# background: 'linear-gradient(to bottom, #20E2D744, #F9FEA544)' # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'
background: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)' background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
# 在图片上层增加高斯模糊效果（同时附带饱和度增强效果） blur-px: 100px
blur: true blur-bg: var(--alpha60)
paginator: paginator:
prev: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg 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 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 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: default:
avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg

8
layout/layout.ejs
View File

@ -25,10 +25,18 @@ if (page.indent != null) {
indent = article_type === 'story' indent = article_type === 'story'
} }
var site_background = ''
if (theme.style.site && theme.style.site['background-image']) {
site_background += `<div class="sitebg">`
site_background += `<div class="siteblur"></div>`
site_background += `</div>`
}
var html = `<!DOCTYPE html>` var html = `<!DOCTYPE html>`
html += `<html lang="${page.lang}">` html += `<html lang="${page.lang}">`
html += partial('_partial/head') html += partial('_partial/head')
html += `<body>` html += `<body>`
html += site_background
html += partial('_partial/cover/index') html += partial('_partial/cover/index')
html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>` html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
html += `<aside class="l_left">` html += `<aside class="l_left">`

60
source/css/_common/button.styl
View File

@ -26,34 +26,36 @@ a[onclick]:hover
cursor: pointer cursor: pointer
a.button.start.gradient a.button.start.gradient
transition: 0.38s ease-out
position relative position relative
z-index: 0 @media (prefers-color-scheme: dark)
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)
transition: 0.38s ease-out transition: 0.38s ease-out
opacity 0 z-index: 0
&:hover:after background: convert(hexo-config('style.gradient.start'))
opacity 1 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

1
source/css/_common/toast.styl
View File

@ -20,6 +20,7 @@ div.toast
visibility: visible visibility: visible
-webkit-animation: fadein 0.5s, fadeout 0.5s 2s -webkit-animation: fadein 0.5s, fadeout 0.5s 2s
animation: fadein 0.5s, fadeout 0.5s 2s animation: fadein 0.5s, fadeout 0.5s 2s
animation-fill-mode: forwards
@-webkit-keyframes fadein @-webkit-keyframes fadein
from {top: -64px; opacity: 0;} from {top: -64px; opacity: 0;}

6
source/css/_defines/theme.styl
View File

@ -38,8 +38,9 @@ set_text_light()
--alpha20: rgba(white, 0.2) --alpha20: rgba(white, 0.2)
--alpha50: rgba(white, 0.5) --alpha50: rgba(white, 0.5)
--alpha60: rgba(white, 0.6) --alpha60: rgba(white, 0.6)
--alpha75: rgba(white, 0.75)
--alpha100: white --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: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90) --block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92) --block-hover: hsl($color-block-h, $color-block-s, 92)
@ -56,8 +57,9 @@ set_darkmode()
--alpha20: rgba(black, 0.2) --alpha20: rgba(black, 0.2)
--alpha50: rgba(black, 0.5) --alpha50: rgba(black, 0.5)
--alpha60: rgba(black, 0.6) --alpha60: rgba(black, 0.6)
--alpha75: rgba(black, 0.75)
--alpha100: black --alpha100: black
--sidebar-bg: rgba(black, 0.64) --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
set_text_light() set_text_light()
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
--site-bg: black --site-bg: black

4
source/css/_layout/layout.styl
View File

@ -27,7 +27,7 @@
left: 0 left: 0
width: 100% width: 100%
height: 100% height: 100%
background: rgba(black, 0.5) background: rgba(black, 0.2)
z-index: 9 z-index: 9
opacity 0 opacity 0
trans1 opacity trans1 opacity
@ -47,7 +47,7 @@
max-width: 100% max-width: 100%
.l_body.mobile .l_body.mobile
.l_left .l_left
transition: transform .3s ease-out transition: transform .38s ease-out
.l_body.mobile.sidebar .l_body.mobile.sidebar
.l_left .l_left
transform: translateX(0px) transform: translateX(0px)

16
source/css/_layout/list.styl
View File

@ -24,11 +24,17 @@
display: block display: block
margin: 1rem 0 margin: 1rem 0
border-radius: $border-card 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 trans1 all
overflow: hidden overflow: hidden
z-index: 0 z-index: 0
background: var(--card)
position: relative position: relative
.excerpt .excerpt
margin: 1rem 0 margin: 1rem 0
@ -56,11 +62,9 @@
height: 1.5rem height: 1.5rem
color: $c-red color: $c-red
.post-list .post-card:hover .post-list.post .post-card:hover
img img
transform: scale(1.02) filter: brightness(50%)
filter: brightness(80%)
// common article // common article
.post-list .md-text .post-list .md-text

18
source/css/_layout/main.styl
View File

@ -17,3 +17,21 @@
.l_main .l_main
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
padding-top: 0 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'))

21
source/css/_layout/partial/navbar.styl
View File

@ -1,12 +1,16 @@
.nav-wrap .nav-wrap
position: sticky
position: -webkit-sticky
margin-top: -0.5rem
top: -2px
background: var(--site-bg)
padding: 0 1rem padding: 0 1rem
z-index: 8 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 &:after
content: '' content: ''
width: 'calc(100% - 2 * %s)' % 1rem width: 'calc(100% - 2 * %s)' % 1rem
@ -25,7 +29,10 @@ nav.cap
margin: 0 margin: 0
a a
padding: .25rem 0.75rem 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 line-height: 2
color: var(--text-p3) color: var(--text-p3)
border-radius: $border-button border-radius: $border-button

21
source/css/_layout/sidebar/sidebar.styl
View File

@ -12,18 +12,21 @@
.l_left .l_left
background-size: cover background-size: cover
if hexo-config('style.sidebar.background') if hexo-config('style.sidebar') && hexo-config('style.sidebar.background-image')
background-image: convert(hexo-config('style.sidebar.background')) 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 .sidebar-container
height: 100% height: 100%
display: flex display: flex
flex-direction: column flex-direction: column
word-break: break-all word-break: break-all
text-align: justify text-align: justify
.sidebar-blur if hexo-config('style.sidebar') && hexo-config('style.sidebar.blur-px')
--blur-px: 100px --blur-px: convert(hexo-config('style.sidebar.blur-px'))
--blur-bg: var(--sidebar-bg) @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px)))) background: var(--blur-bg)
background: var(--blur-bg) backdrop-filter: saturate(240%) blur(var(--blur-px))
backdrop-filter: saturate(240%) blur(var(--blur-px)) -webkit-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'))