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)'
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

8
layout/layout.ejs
View File

@ -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 += `<div class="sitebg">`
site_background += `<div class="siteblur"></div>`
site_background += `</div>`
}
var html = `<!DOCTYPE html>`
html += `<html lang="${page.lang}">`
html += partial('_partial/head')
html += `<body>`
html += site_background
html += partial('_partial/cover/index')
html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
html += `<aside class="l_left">`

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

@ -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
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

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

@ -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;}

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

@ -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

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

@ -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)

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

@ -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

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

@ -16,4 +16,22 @@
.l_body.index
.l_main
@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
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

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

@ -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))
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'))