精简风格

_config.yml

@@ -15,8 +15,6 @@ info:
 
 
 ############################### 主题风格 ###############################
-# style: material    # material: 导航栏和标题栏背景是主题色
-style: pure        # pure: 导航栏和标题栏背景是白色
 
 # 毛玻璃效果 具体效果调整在： source/less/_color.less
 blur:
@@ -44,10 +42,10 @@ backstretch:
   duration: 6000        # 持续时间（毫秒）
   fade: 2500            # 渐变（毫秒）
   images:
-    - https://i.loli.net/2020/02/08/HNuVoted2mUxILl.jpg
+    # - https://i.loli.net/2020/02/08/HNuVoted2mUxILl.jpg
-    - https://i.loli.net/2020/02/08/dNJyR4LHtarTqPu.jpg
+    # - https://i.loli.net/2020/02/08/dNJyR4LHtarTqPu.jpg
-    - https://i.loli.net/2020/02/08/yXx4GwgZYdi81Qs.jpg
+    # - https://i.loli.net/2020/02/08/yXx4GwgZYdi81Qs.jpg
-    - https://i.loli.net/2020/02/08/RP7JpGvWaCYfuB6.jpg
+    # - https://i.loli.net/2020/02/08/RP7JpGvWaCYfuB6.jpg
 
 
 # page的封面

layout/_partial/article.ejs

@@ -20,7 +20,7 @@
             <% }) %>
           <% } %>
         </div>
-        <% if(post.layout == 'post'){ %>
+        <% if(post.layout == 'post' || post.layout == 'page'){ %>
           <br>
           <%- partial('meta', {post: post, position: 'footer'}) %>
         <% } %>

layout/_partial/header.ejs

@@ -1,6 +1,6 @@
-<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%= theme.style %> <%- theme.blur.nav ? 'nav-blur' : '' %>">
+<header class="l_header<%- page.sidebar == false ? ' no_sidebar' : '' %> <%- theme.blur.nav ? 'nav-blur' : '' %>">
   <div id="loading-bar-wrapper">
-    <div id="loading-bar" class="<%= theme.style %>"></div>
+    <div id="loading-bar"></div>
   </div>
 
 	<div class='wrapper'>

layout/_widget/blogger.ejs

@@ -1,5 +1,5 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <% if(item.avatar) { %>
       <div class='avatar'>
         <img class='avatar' src='<%- item.avatar %>'/>

layout/_widget/category.ejs

@@ -1,7 +1,7 @@
 <% if (site.categories.length){ %>
   <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
-    <div class='content <%= theme.style %>'>
+    <div class='content'>
       <ul class="entry">
         <% site.categories.sort('path').each(function(category){ %>
           <li><a class="flat-box<%= category.parent ? ' child' : ''%>" title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"><div class='name'><%- category.name %></div><div class='badge'>(<%- category.posts.length %>)</div></a></li>

layout/_widget/copyright.ejs

@@ -1,5 +1,5 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <% if (item.blockquote == true) { %>
       <blockquote>
         <% (item.content||[]).forEach(function(row){ %>

layout/_widget/donate.ejs

@@ -1,6 +1,6 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <% if (item.fancybox == true) { %>
       <fancybox>
         <% (item.images||[]).forEach(function(url){ %>

layout/_widget/grid.ejs

@@ -1,6 +1,6 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <ul class="grid navgation">
       <% (item.rows||[]).forEach(function(row){ %>
         <li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"

layout/_widget/list.ejs

@@ -1,6 +1,6 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <ul class="entry">
       <% (item.rows||[]).forEach(function(row){ %>
         <li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"

layout/_widget/music.ejs

@@ -1,7 +1,7 @@
 <% if (theme.aplayer.enable == true) { %>
   <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
-    <div class='content <%= theme.style %>'>
+    <div class='content'>
       <%- partial('../_third-party/aplayer', {post: null, where: 'widget'}) %>
     </div>
   </section>

layout/_widget/related_posts.ejs

@@ -1,7 +1,7 @@
 <% if(page.layout == 'post' && page.content && page.path != undefined){ %>
   <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
-    <div class="content <%= theme.style %>">
+    <div class="content">
       <%- popular_posts( { maxCount: 10 , ulClass: 'popular-posts' , PPMixingRate: 0.2 } , page ) %>
     </div>
   </section>

layout/_widget/tagcloud.ejs

@@ -1,7 +1,7 @@
 <% if (site.tags.length){ %>
   <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
-    <div class='content <%= theme.style %>'>
+    <div class='content'>
       <%- tagcloud(site.tags, {
           min_font: item.min_font,
           max_font: item.max_font,

layout/_widget/text.ejs

@@ -1,6 +1,6 @@
 <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> <%- item.class?item.class:'text' %>'>
   <%- partial('header', {item: item}) %>
-  <div class='content <%= theme.style %>'>
+  <div class='content'>
     <% (item.content||[]).forEach(function(row){ %>
       <p>
         <%- markdown(row) %>

layout/_widget/toc.ejs

@@ -1,7 +1,7 @@
 <% if(page.content && page.toc != false && toc(page.content).length > 0){ %>
   <section class='widget <%- theme.blur.widget ? 'widget-blur' : '' %> toc-wrapper'>
     <%- partial('header', {item: item}) %>
-    <div class='content <%= theme.style %>'>
+    <div class='content'>
       <%- toc(page.content, {list_number: item.list_number, min_depth: item.min_depth, max_depth: item.max_depth}) %>
     </div>
   </section>

source/less/_base.less

@@ -467,10 +467,7 @@ ul.h-list {
   height: @loading_height;
   // height: @height_navbar;
   .enable-trans();
-  background-color: fade(white, 50%);
+  background-color: fade(@theme_main, 50%);
-  &.pure{
-    background-color: fade(@theme_main, 50%);
-  }
 }
 
 .body-wrapper {

source/less/_color.less

@@ -43,10 +43,7 @@
 
 // 导航栏毛玻璃效果
 .nav-blur {
-  background: fade(@color_bg_navbar, 75%);
+  background: fade(@theme_cardbg, 75%);
-  &.pure {
-    background: fade(@theme_cardbg, 75%);
-  }
   backdrop-filter: blur(60px);
 }
 

source/less/_header.less

@@ -13,13 +13,14 @@
   font-family: @fontfamily_base;
   padding: 0 @gap;
   margin-bottom: @gap;
+  box-shadow: @boxshadow_card_normal;
   .wrapper{
     padding: auto @gap;
     max-width: @width_container;
     margin: auto;
     .enable-trans();
     a.logo {
-      color: @color_text_in_header;
+      color: @color_text_header;
     }
   }
   &.no_sidebar{
@@ -44,7 +45,7 @@
   .nav--main,.nav-sub{
     height: @height_navbar;
   }
-  background: @color_bg_navbar;
+  background: @theme_cardbg;
   &.hide{
     transform: translateY(100px) scale(0);
   }
@@ -55,7 +56,7 @@
     .txt-ellipsis;
     height: @height_navbar;
     line-height: @height_navbar;
-    color: @color_text_in_header;
+    color: @theme_main;
   }
   &:extend(.z-depth-nav); // 适合深色导航栏背景
 
@@ -106,17 +107,19 @@
     ul > li > a{
       .enable-trans();
       display: block;
-      font-size: @fontsize_base;
-      color: fade(@color_text_in_header, 70%);
       padding: 0 8px;
+      color: fade(@color_text_main, 85%);
+      &.current{
+        border-bottom: @loading_height solid fade(@theme_main, 80%);
+      }
       &:hover{
-        color: @color_text_in_header;
+        color: @theme_main;
-        border-bottom: @loading_height solid @theme_cardbg;
+        border-bottom: @loading_height solid @theme_main;
-        background: fade(@theme_cardbg, 10%);
+        background: fade(@theme_main, 10%);
       }
       &:active,&.active{
-        color: @color_text_in_header;
+        color: @theme_main;
-        border-bottom: @loading_height solid @theme_cardbg;
+        border-bottom: @loading_height solid @theme_main;
       }
     }
     @media(max-width: @on_phone){
@@ -153,7 +156,7 @@
         border-radius: 100px;
         .enable-trans();
         &:hover {
-          background: fade(@theme_cardbg, 30%);
+          background: fade(@theme_main, 15%);
         }
         @media(max-width: @on_phone){
           width: @iconW;
@@ -196,7 +199,7 @@
       top: 0;
       left: @iconMargin+1px;
       font-size: @fontsize_base;
-      color: fade(@color_text_in_header, 60%);
+      color: fade(@color_text_main, 60%);
     }
     .input {
       display: block;
@@ -204,7 +207,8 @@
       line-height: @fontsize_base;
       height: @height_searchbar;
       width: 100%;
-      color: fade(@color_text_in_header, 60%);
+      color: @color_text_main;
+      background: @theme_background;
       box-shadow: none;
       box-sizing: border-box;
       -webkit-appearance: none;
@@ -213,91 +217,25 @@
         padding-left: @iconW + @iconMargin;
       }
       border-radius: @border_radius_searchbar;
-      background: fade(@theme_cardbg, 15%);
       border: 1px dashed transparent;
       .set-placeholder({
         padding-top: 2px;
-        color: fade(@color_text_in_header, 60%);
+        color: fade(@color_text_main, 60%);
       });
       &:hover{
         color: @color_text_in_header;
-        border: 1px solid fade(@color_text_in_header, 60%);
-      }
-      &:focus {
         ~.icon{
-          color: @color_text_in_header;
+          color: fade(@theme_main, 80%);
         }
-        color: @color_text_in_header;
+        border: 1px solid fade(@theme_main, 60%);
-        border: 1px solid @color_text_in_header;
-      }
-    }
-  }
-  &.pure{
-    background: @theme_cardbg;
-    &, a{
-      color: @theme_main;
-    }
-    box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
-    // box-shadow: none;
-    // background: transparent;
-    .wrapper{
-      a.logo {
-        color: @color_text_header;
       }
-      // background: @theme_cardbg;
+      &:focus {
-      // box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
+        ~.icon{
-    }
-    .menu{
-      ul > li > a{
-        .enable-trans();
-        color: fade(@color_text_main, 85%);
-        &.current{
-          border-bottom: @loading_height solid fade(@theme_main, 80%);
-        }
-        &:hover{
-          color: @theme_main;
-          border-bottom: @loading_height solid @theme_main;
-          background: fade(@theme_main, 10%);
-        }
-        &:active,&.active{
           color: @theme_main;
-          border-bottom: @loading_height solid @theme_main;
-        }
-      }
-    }
-    .switcher{
-      & > li{
-        a{
-          &:hover {
-            background: fade(@theme_main, 15%);
-          }
         }
-      }
-    }
-    .m_search {
-      .icon{
-        color: fade(@color_text_main, 60%);
-      }
-      .input {
         color: @color_text_main;
-        background: @theme_background;
+        background: fade(@theme_main, 15%);
-        .set-placeholder({
+        border: 1px solid @theme_main;
-          color: fade(@color_text_main, 60%);
-        });
-        &:hover{
-          ~.icon{
-            color: fade(@theme_main, 80%);
-          }
-          border: 1px solid fade(@theme_main, 60%);
-        }
-        &:focus {
-          ~.icon{
-            color: @theme_main;
-          }
-          color: @color_text_main;
-          background: fade(@theme_main, 15%);
-          border: 1px solid @theme_main;
-        }
       }
     }
   }

source/less/_side.less

@@ -43,13 +43,13 @@
     justify-content: space-between;
     border-top-left-radius: @border_radius;
     border-top-right-radius: @border_radius;
-    background-color: @color_bg_navbar;
+    color: @theme_main;
-    color: @color_text_in_header;
     font-weight: bold;
     line-height: 1.5em;
-    padding: 8px @gap;
+    padding: ~"calc(@{gap} - 2px)";
+    padding-bottom: 0;
     .rightBtn{
-      color: @color_text_in_header;
+      color: @theme_main;
       &:hover {
         color: darken(@theme_main, 25%);
         &.rotate90{
@@ -57,22 +57,10 @@
         }
       }
     }
-    &.pure{
-      background-color: transparent;
-      color: @theme_main;
-      padding-top: 14px; // 适合白色导航栏背景
-      padding-bottom: 14px; // 适合白色导航栏背景
-      .rightBtn{
-        color: @theme_main;
-        &:hover {
-          color: darken(@theme_main, 25%);
-        }
-      }
-    }
   }
   .content{
     text-align: justify;
-    padding: @gap/2;
+    padding: @gap/2 0;
     max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})";
     ul > li{
       a{
@@ -164,7 +152,7 @@
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
-        margin: 4px @gap/2;
+        margin: 4px @gap/4;
         a{
           color: fade(@color_text_main, 70%);
           padding: 0;
@@ -204,11 +192,9 @@
       font-size: @fontsize_small;
       font-weight: bold;
       word-break: break-all;
-      padding: @gap/2 @gap;
+      padding: @gap;
       line-height: @fontsize_small + 8px;
-      &.pure{
+
-        padding: 0 @gap @gap @gap; // 适合白色导航栏背景
-      }
       a{
         color: @color_text_link;
         .enable-trans();
@@ -226,9 +212,6 @@
   &.list{
     .content{
       padding: @gap/2 0;
-      &.pure{
-        padding-top: 0; // 适合白色导航栏背景
-      }
       a{
         font-size: @fontsize_small;
         font-weight: bold;
@@ -255,10 +238,6 @@
   }
   &.grid{
     .content{
-      padding: @gap/2 0;
-      &.pure{
-        padding-top: 0; // 适合白色导航栏背景
-      }
       ul.grid{
         border: none;
         display: flex;
@@ -309,12 +288,8 @@
   }
   &.category{
     .content{
-      padding: @gap/2 0;
       font-size: @fontsize_small;
       font-weight: bold;
-      &.pure{
-        padding-top: 0; // 适合白色导航栏背景
-      }
     }
   }
 
@@ -322,9 +297,6 @@
     .content{
       text-align: justify;
       padding: @gap/2 @gap;
-      &.pure{
-        padding: 0 @gap @gap @gap; // 适合白色导航栏背景
-      }
       a{
         display:inline-block;
         .enable-trans(.1s);
@@ -337,29 +309,10 @@
     }
   }
 
-  &.music{
-    header{
-      &.pure{
-        padding-bottom: @gap/4; // 适合白色导航栏背景
-      }
-    }
-    .content{
-      padding: @gap/2+4px;
-      padding-top: @gap/2;
-      &.pure{
-        padding-top: @gap/4; // 适合白色导航栏背景
-      }
-    }
-  }
-
   &.related_posts{
     .content{
-      padding: @gap/2 0;
       font-size: @fontsize_small;
       font-weight: bold;
-      &.pure{
-        padding-top: 0; // 适合白色导航栏背景
-      }
       h3{
         font-size: @fontsize_small;
         font-weight: bold;
@@ -380,9 +333,6 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-around;
-      &.pure{
-        padding-top: 0; // 适合白色导航栏背景
-      }
       img{
         margin-bottom: 4px;
       }

source/less/_toc.less

@@ -11,25 +11,19 @@
     top: 0;
   }
   .content{
-    padding: @gap/2 0 @gap 0;
     max-height: 500px;
     overflow: auto;
-    &.pure{
-      padding-top: 0; // 适合白色导航栏背景
-    }
     a {
       border-left: 4px solid transparent;
       &:hover{
-        color: fade(@color_text_main, 100%);
+        background: fade(@theme_main, 10%);
-        border-left: 4px solid @theme_main;
       }
       &:active{
         border-left: 8px solid @theme_main;
       }
       &.active{
-        color: fade(@color_text_main, 100%);
+        color: @theme_main;
         border-left: 4px solid @theme_main;
-        background: fade(@theme_main, 10%);
       }
     }
   }
@@ -71,7 +65,7 @@
 
   a {
     padding-left: 8px;
-    color: fade(@color_text_main, 60%);
+    color: fade(@color_text_main, 70%);
     font-size: @fontsize_small;
     display: inline-block;
   }