From 0f98393ed382106b572bb0b87833628e95ed368e Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Thu, 25 Jan 2024 22:50:17 +0800 Subject: [PATCH] [opt] style --- _config.yml | 15 ++++--- layout/layout.ejs | 8 ++++ source/css/_common/button.styl | 60 +++++++++++++------------ source/css/_common/toast.styl | 1 + source/css/_defines/theme.styl | 6 ++- source/css/_layout/layout.styl | 4 +- source/css/_layout/list.styl | 18 +++++--- source/css/_layout/main.styl | 20 ++++++++- source/css/_layout/partial/navbar.styl | 21 ++++++--- source/css/_layout/sidebar/sidebar.styl | 21 +++++---- 10 files changed, 112 insertions(+), 62 deletions(-) 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 += `
` +} + var html = `` html += `` html += partial('_partial/head') html += `` + html += site_background html += partial('_partial/cover/index') html += `
` html += `