Make nav blur gradient optional

Author: MrWillCom

.changeset/tricky-kiwis-swim.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': minor
+---
+
+Add nav bar blur gradient effect.

_config.yml

@@ -162,6 +162,8 @@ builtin_components:
 # smooth scroll powered by [darkroomengineering/lenis](https://github.com/darkroomengineering/lenis)
 smooth_scroll: true
 
+nav_blur_gradient: false
+
 insertions:
   head:
     ending: ''

layout/_partial/nav.ejs

@@ -1,11 +1,14 @@
-<div class="masked">
+
+<% if (theme.nav_blur_gradient) { %>
+<div class="nav-mask">
   <div order="1"></div>
   <div order="2"></div>
   <div order="3"></div>
   <div order="4"></div>
   <div order="5"></div>
   <div order="6"></div>
 </div>
+<% } %>
 <nav id="theme-nav">
   <div class="inner">
     <a class="title" href="<%= config.root %>"><%= theme.nav.title %></a>

layout/layout.ejs

@@ -22,6 +22,7 @@
     data-scroll-reveal-disappear="<%= theme.scroll_reveal_disappear %>"
     data-scroll-reveal-query="<%= theme.scroll_reveal_query %>"
     <% } %>
+    data-nav-blur-gradient="<%= theme.nav_blur_gradient %>"
   >
     <%- js('js/body-top.js') %>
     <a href="#main-content" id="skip-to-content"><%- __('skip_to_content') %></a>

source/css/nav.scss

@@ -17,6 +17,10 @@ nav {
   z-index: 1000;
   transition: height 0.4s $animationCurve;
 
+  [data-nav-blur-gradient='false'] & {
+    background-color: var(--color-background-secondary-translucent);
+    backdrop-filter: var(--filter-blur);
+  }
   .inner {
     max-width: 980px;
     margin: auto;
@@ -198,7 +202,7 @@ nav {
   }
 }
 
-.masked > [order] {
+.nav-mask > [order] {
   position: fixed;
   top: 0;
   left: 0;