[opt] gradient

_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

layout/_partial/cover/wiki_cover.ejs

@@ -39,7 +39,7 @@ function layoutWikiCover() {
     el += '<div class="description">' + desc + '</div>';
   }
   el += '<div class="start-wrap">';
-  el += '<a class="button start" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
+  el += '<a class="button start gradient" href="#start">' + (proj.start || __('btn.getting_started')) + '</a>';
   el += '</div>';
   el += '</article>';
   el += '</div>';

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

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

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

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-bg1: hsl(hue($theme), 50, 16)
-    --theme-bg2: hsl(hue($theme), 16, 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)

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 
+  &.noresult
-    .search-input
-      &:focus
-        border: 1px solid $c-red
     .search-icon
       color: $c-red
 
@@ -84,20 +97,16 @@
     top: 0
     background: var(--site-bg)
   .search-input
-    margin-top: 1rem
+    padding-left: 1.5rem
-    margin-bottom: -1rem
-    padding-left: 1.75rem
   .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