From fffc16463ae5ab4510293b4d14122ba16cd5efa8 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 16 Dec 2022 14:53:08 +0800 Subject: [PATCH] [opt] gradient --- _config.yml | 3 ++ layout/_partial/cover/wiki_cover.ejs | 2 +- source/css/_common/button.styl | 34 ++++++++++++++++- source/css/_layout/md.styl | 4 +- source/css/_layout/sidebar/sidebar.styl | 3 +- source/css/_layout/tag-plugins/common.styl | 4 +- source/css/_layout/widgets/search.styl | 43 +++++++++++++--------- 7 files changed, 68 insertions(+), 25 deletions(-) diff --git a/_config.yml b/_config.yml index 5fd7276..2dd255b 100755 --- a/_config.yml +++ b/_config.yml @@ -357,6 +357,9 @@ style: loading: loading: 正在加载 error: 加载失败，请稍后重试。 + gradient: # https://webgradients.com/ + start: 'linear-gradient(to right, #92fe9d 0%, #00c9ff 50%, #92fe9d 100%)' + search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)' default: avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg diff --git a/layout/_partial/cover/wiki_cover.ejs b/layout/_partial/cover/wiki_cover.ejs index 407c9f6..2be64b3 100644 --- a/layout/_partial/cover/wiki_cover.ejs +++ b/layout/_partial/cover/wiki_cover.ejs @@ -39,7 +39,7 @@ function layoutWikiCover() { el += '
' + desc + '
'; } el += '
'; - el += '' + (proj.start || __('btn.getting_started')) + ''; + el += '' + (proj.start || __('btn.getting_started')) + ''; el += '
'; el += ''; el += ''; diff --git a/source/css/_common/button.styl b/source/css/_common/button.styl index e0ed82a..db74989 100644 --- a/source/css/_common/button.styl +++ b/source/css/_common/button.styl @@ -10,8 +10,8 @@ a.button line-height: 1 padding: 0.75rem 2rem border-radius: $border-button - trans1: background font-size: $fs-15 + user-select: none &.theme background: $color-theme color: var(--card) @@ -24,3 +24,35 @@ a.button 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 + animation: glow 60s linear forwards + @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 + opacity 0 + &:hover:after + opacity 1 \ No newline at end of file diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index 7ef978d..ed32dc9 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -63,6 +63,7 @@ h1.article-title code font-size: inherit padding: 0 + background: none p,blockquote,.tag-plugin,ul,ol,.highlight,table * --gap-p: var(--gap-p-compact) @@ -74,9 +75,6 @@ h1.article-title margin-bottom: var(--gap-p) iframe display: block - ul>li, ol>li - margin-top: 4px - margin-bottom: 4px // titles .md-text.content diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl index 21dd367..07ee045 100644 --- a/source/css/_layout/sidebar/sidebar.styl +++ b/source/css/_layout/sidebar/sidebar.styl @@ -23,7 +23,8 @@ margin-bottom: 6rem -.l_left .widgets .widget-wrapper.logo-wrap.wiki +.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body + display: flex margin-bottom: 1.5rem flex-direction: column align-items: flex-start diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl index 2287cb1..71b1a09 100644 --- a/source/css/_layout/tag-plugins/common.styl +++ b/source/css/_layout/tag-plugins/common.styl @@ -69,8 +69,8 @@ set_dynamic_color($theme) set_darkmode_tags() set_dynamic_color($theme) --theme: $theme - --theme-bg1: hsl(hue($theme), 80, 20) - --theme-bg2: hsl(hue($theme), 16, 16) + --theme-bg1: hsl(hue($theme), 50, 16) + --theme-bg2: hsl(hue($theme), 32, 16) --theme-border: hsl(hue($theme), 50, 24) --text-p0: hsl(hue($theme), 100, 85) --text-p1: hsl(hue($theme), 50, 75) diff --git a/source/css/_layout/widgets/search.styl b/source/css/_layout/widgets/search.styl index 746731f..6d8d040 100644 --- a/source/css/_layout/widgets/search.styl +++ b/source/css/_layout/widgets/search.styl @@ -10,23 +10,36 @@ display: flex flex-direction: row align-items: center + transition: 0.38s ease-out + z-index: 0 + &:after + content: '' + position absolute + left: 0 + right: 0 + bottom: 0 + height: 2px + border-radius: 4px + background: convert(hexo-config('style.gradient.search')) + background-size: 200% + animation: glow 10s linear forwards + @keyframes glow { + from { + background-position: 0% + } + to { + background-position: 200% + } + } .search-input width: 100% - padding: 0.5rem + padding: 0.5rem 0 line-height: 1 box-sizing: border-box font-family: $ff-body - border-radius: $border-bar - background-color: var(--card) color: var(--text-p0) - border: 1px solid var(--block-border) - &:focus - trans1 border-color - &.noresult - .search-input - &:focus - border: 1px solid $c-red + &.noresult .search-icon color: $c-red @@ -84,20 +97,16 @@ top: 0 background: var(--site-bg) .search-input - margin-top: 1rem - margin-bottom: -1rem - padding-left: 1.75rem + padding-left: 1.5rem .search-icon - margin-top: 1rem - margin-bottom: -1rem position: absolute - margin-left: 0.5rem + margin-left: 0.25rem left: 0 pointer-events: none color: var(--text-p2) #search-result,.search-no-result - margin-top: 2rem + margin-top: 1rem .widget-wrapper:not(:first-child) .search-wrapper