From 34e0db3d758c6cc653c4b07e3725fecd113e318b Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 16 Nov 2018 14:13:37 +0800 Subject: [PATCH] update --- layout/_partial/header.ejs | 2 +- layout/_partial/loading.ejs | 3 +- layout/_widget/categories.ejs | 4 +- layout/_widget/links.ejs | 4 +- layout/_widget/music.ejs | 4 +- layout/_widget/tagcloud.ejs | 4 +- layout/_widget/toc.ejs | 4 +- source/less/_base.less | 43 ++------- source/less/_defines.less | 14 ++- source/less/_header.less | 171 ++++++++++++++++++++-------------- source/less/_toc.less | 4 +- source/less/_widget.less | 38 ++++++-- 12 files changed, 166 insertions(+), 129 deletions(-) diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index fb96a21..020e0c4 100755 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -1,4 +1,4 @@ -
+
diff --git a/layout/_partial/loading.ejs b/layout/_partial/loading.ejs index 4ac8aca..34b5bec 100755 --- a/layout/_partial/loading.ejs +++ b/layout/_partial/loading.ejs @@ -1,4 +1,3 @@
-
+
- diff --git a/layout/_widget/categories.ejs b/layout/_widget/categories.ejs index 1b11fe0..348c8f5 100755 --- a/layout/_widget/categories.ejs +++ b/layout/_widget/categories.ejs @@ -1,8 +1,8 @@
-
+
  分类
-
+
<% if (site.categories.length){ %>
    <% site.categories.sort('name').each(function(item){ %> diff --git a/layout/_widget/links.ejs b/layout/_widget/links.ejs index bc94ba6..b5c21d5 100755 --- a/layout/_widget/links.ejs +++ b/layout/_widget/links.ejs @@ -1,11 +1,11 @@
    -
    +
      友链
    <% if(config.email) { %> <%} %>
    -
    +
      <% (config.widgets.links||[]).forEach(function(item){ %>
    • diff --git a/layout/_widget/music.ejs b/layout/_widget/music.ejs index 730dd34..83ff296 100755 --- a/layout/_widget/music.ejs +++ b/layout/_widget/music.ejs @@ -1,9 +1,9 @@
      -
      +
        音乐
      -
      +
      diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs index b941c33..42a8945 100755 --- a/layout/_widget/tagcloud.ejs +++ b/layout/_widget/tagcloud.ejs @@ -1,9 +1,9 @@ <% if (site.tags.length){ %>
      -
      +
        标签
      -
      +
      <%- tagcloud(site.tags, { min_font: 14, max_font: 24, diff --git a/layout/_widget/toc.ejs b/layout/_widget/toc.ejs index f8d4b2e..fdb8aba 100755 --- a/layout/_widget/toc.ejs +++ b/layout/_widget/toc.ejs @@ -1,10 +1,10 @@ <% if(page.content && page.toc!==false && toc(page.content).length > 0){ %>
      -
      +
        目录
      -
      +
      <%- toc(page.content, {list_number: false}) %>
      diff --git a/source/less/_base.less b/source/less/_base.less index 715df97..63fbca1 100755 --- a/source/less/_base.less +++ b/source/less/_base.less @@ -11,17 +11,17 @@ /* My Base */ html { + color: @theme_text_main; width: 100%; height: 100%; padding-top: @height_navbar; font-family: @fontfamily_base; font-size: @fontsize_base; line-height: 1.5rem; - color: @theme_text_main; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizelegibility; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { @@ -102,12 +102,10 @@ body { ::-moz-selection { background: fade(lighten(@theme_text_link, 5%), 25%); - // color: @black; } ::selection { background: fade(lighten(@theme_text_link, 5%), 25%); - // color: @black; } // transition .enable-trans(@time: 0.25s){ @@ -234,35 +232,9 @@ img { .disable-trans { -moz-transition: none !important; -webkit-transition: none !important; - -o-transition: color 0 ease-in !important; transition: none !important; } -.dark-btn { - display: inline-block; - background: rgba(0, 0, 0, 0.3); - border: 1px solid black; - padding: 0px 15px; - font-size: 13px; - font-family: @fontfamily_base; - text-align: center; - color: lighten(#8f8f8f, 20%); - &:hover { - color: lighten(#8f8f8f, 40%); - // background-color: @brand-color; - } - .icon { - margin-right: 5px; - font-size: 16px; - vertical-align: middle; - line-height: 44px; - } - .text { - vertical-align: middle; - line-height: 44px; - } -} - .txt-ellipsis { white-space: nowrap; overflow: hidden; @@ -281,20 +253,20 @@ li { .mark { position: relative; a { + color: @black; + background: transparent; display: inline-block; padding: 0 8px; - color: @black; border-left: @border_radius_line solid transparent; background: transparent; border-radius: @border_radius_code_block; .enable-trans(); &:hover { + background: fade(@theme_bg_quote, 10%); border-left: @border_radius_line solid @theme_bg_quote; padding: 8px; - background: fade(@theme_bg_quote, 10%); } &:active { - // border-radius: @border_radius; border-left: max(@border_radius, @border_radius_line) solid @theme_bg_quote; } @@ -332,8 +304,11 @@ ul.h-list { width: 0; height: 8px; height: @height_navbar; - background-color: fade(@theme_text_in_header, 20%); .enable-trans(); + background-color: fade(white, 30%); + &.pure{ + background-color: fade(@theme_base_tint, 30%); + } } .container { diff --git a/source/less/_defines.less b/source/less/_defines.less index 09dcc50..2829a82 100755 --- a/source/less/_defines.less +++ b/source/less/_defines.less @@ -39,9 +39,6 @@ @color_ax_light_red: #FF6868; @color_ax_red: #F24E32; @color_ax_blue: #52A1F8; -// 主题色 -@theme_base_main: #EFEFEF; -@theme_base_tint: @color_mac_maximize; // 阴影 @boxshadow_base_1: 0 1px 2px 0px rgba(0, 0, 0, 0.1); @boxshadow_base_2: 0 2px 4px 0px rgba(0, 0, 0, 0.1); @@ -136,11 +133,18 @@ // start: 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +// 如果你只想简单地换个风格，可以只改这里的几项： +// 主题色 +@theme_base_main: #EFEFEF; +@theme_base_tint: @color_mac_maximize; +@theme_base_bg: #efefef; +@theme_base_card_bg: white; + // 背景色 ---------------- // 网页背景 @theme_bg_main: @theme_base_main; // 导航栏背景 -@theme_bg_navbar: white; +@theme_bg_navbar: @color_mac_maximize; // 卡片背景 @theme_bg_card: white; // 卡片标题栏背景 @@ -159,7 +163,7 @@ // 链接高亮颜色 @theme_text_highlight: @theme_base_tint; // 在主题色中显示的文本（一般为白或深灰） -@theme_text_in_header: @theme_base_tint; +@theme_text_in_header: white; // 正文文字颜色 @theme_text_main: @dark; // end: 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< diff --git a/source/less/_header.less b/source/less/_header.less index 166e8f8..2362721 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -31,14 +31,15 @@ height: @height_navbar; } background: @theme_bg_navbar; + &, a{ .txt-ellipsis; height: @height_navbar; line-height: @height_navbar; color: @theme_text_in_header; } - // &:extend(.z-depth-nav); // 适合深色导航栏背景 - box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景 + &:extend(.z-depth-nav); // 适合深色导航栏背景 + .enable-trans(); &:hover { // &:extend(.z-depth-nav-raised); @@ -129,7 +130,105 @@ .nav-sub .switcher{ display: flex; } - + .m_search { + position: relative; + height: @height_navbar - @gap; + width: @width_sidebar; + line-height: @height_navbar - @gap; + margin-top: @gap/2; + margin-bottom: @gap/2; + vertical-align: middle; + .form { + position: relative; + display: block; + width: 100%; + } + .icon,.input{ + .enable-trans(.1s); + } + .icon { + position: absolute; + display:block; + height: @height_navbar - @gap; + width: @height_navbar - @gap; + line-height: @height_navbar - @gap; + top: 0; + left: @gap/2; + font-size: @fontsize_small; + } + .input { + display:block; + font-size: @fontsize_small; + line-height: @height_navbar - @gap; + margin: 0; + width: 100%; + color: fade(@theme_text_in_header, 60%); + padding-left: @fontsize_base + @gap - 2px; + @media(max-width: @on_phone){ + padding-left: @fontsize_base + @gap - 2px; + } + height: @height_navbar - @gap; + line-height: @height_navbar - @gap; + font-family: @fontfamily_base; + border: none; + border-radius: @border_radius; + background: fade(@theme_text_in_header,15%); + box-sizing: border-box; + -webkit-appearance: none; + box-shadow: none; + border: 1px dashed transparent; + .enable-trans(); + ~ .icon{ + color: fade(@theme_text_in_header, 60%); + } + .set-placeholder({color: fade(@theme_text_in_header, 60%)}); + &:hover{ + border: 1px dashed fade(@theme_text_in_header, 60%); + } + &:focus { + // color:@black; + border: 1px solid fade(@theme_text_in_header, 60%); + // .set-placeholder({color: @black}); + } + &:focus ~ .icon{ + // color: @black; + } + } + } + &.pure{ + background: @theme_base_card_bg; + &, a{ + color: @theme_base_tint; + } + box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景 + .menu{ + ul > li > a{ + color: fade(@theme_base_tint,60%); + &:hover,&.active{ + color: @theme_base_tint; + } + } + .underline{ + background: @theme_base_tint; + } + } + .m_search { + .input { + color: fade(@theme_base_tint, 60%); + background: fade(@theme_base_tint,15%); + ~ .icon{ + color: fade(@theme_base_tint, 60%); + } + .set-placeholder({color: fade(@theme_base_tint, 60%)}); + &:hover{ + border: 1px dashed fade(@theme_base_tint, 60%); + } + &:focus { + border: 1px solid fade(@theme_base_tint, 60%); + } + } + } + } @media (max-width: @on_phone) { .m_search{ width:0; @@ -149,71 +248,7 @@ } } -.m_search { - position: relative; - height: @height_navbar - @gap; - width: @width_sidebar; - line-height: @height_navbar - @gap; - margin-top: @gap/2; - margin-bottom: @gap/2; - vertical-align: middle; - .form { - position: relative; - display: block; - width: 100%; - } - .icon,.input{ - .enable-trans(.1s); - } - .icon { - position: absolute; - display:block; - height: @height_navbar - @gap; - width: @height_navbar - @gap; - line-height: @height_navbar - @gap; - top: 0; - left: @gap/2; - font-size: @fontsize_small; - } - .input { - display:block; - font-size: @fontsize_small; - line-height: @height_navbar - @gap; - margin: 0; - width: 100%; - color: fade(@theme_text_in_header, 60%); - padding-left: @fontsize_base + @gap - 2px; - @media(max-width: @on_phone){ - padding-left: @fontsize_base + @gap - 2px; - } - height: @height_navbar - @gap; - line-height: @height_navbar - @gap; - font-family: @fontfamily_base; - border: none; - border-radius: @border_radius; - background: fade(@theme_text_in_header,15%); - box-sizing: border-box; - -webkit-appearance: none; - box-shadow: none; - border: 1px dashed transparent; - .enable-trans(); - ~ .icon{ - color: fade(@theme_text_in_header, 60%); - } - .set-placeholder({color: fade(@theme_text_in_header, 60%)}); - &:hover{ - border: 1px dashed fade(@theme_text_in_header, 60%); - } - &:focus { - // color:@black; - border: 1px solid fade(@theme_text_in_header, 60%); - // .set-placeholder({color: @black}); - } - &:focus ~ .icon{ - // color: @black; - } - } -} + .menu-phone{ .header{ diff --git a/source/less/_toc.less b/source/less/_toc.less index d8090c9..be04c52 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -15,7 +15,9 @@ } .content{ padding: @gap/2 0; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } a { border-left: 4px solid transparent; &:hover{ diff --git a/source/less/_widget.less b/source/less/_widget.less index 01bf816..13c07c0 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -40,19 +40,28 @@ font-weight: bold; line-height: 1.5em; padding: 8px @gap; - padding-top: 14px; // 适合白色导航栏背景 - padding-bottom: 14px; // 适合白色导航栏背景 .rightBtn{ color: @theme_text_in_header; &:hover { color: darken(@theme_text_highlight, 25%); } } + &.pure{ + background-color: @theme_bg_card; + color: @theme_base_tint; + padding-top: 14px; // 适合白色导航栏背景 + padding-bottom: 14px; // 适合白色导航栏背景 + .rightBtn{ + color: @theme_base_tint; + &:hover { + color: darken(@theme_text_highlight, 25%); + } + } + } } .content{ text-align: justify; padding: @gap/2; - // padding-top: 0; // 适合白色导航栏背景 max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})"; ul.entry > li > a{ padding: 0 @gap; @@ -157,7 +166,9 @@ .m_widget.categories{ .content{ padding: @gap/2 0; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } } } @@ -165,7 +176,9 @@ .content{ text-align: justify; padding: @gap/2 @gap; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } a{ display:inline-block; .enable-trans(.1s); @@ -180,22 +193,31 @@ .m_widget.contacts{ .content{ padding: @gap/2 0; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } + } } .m_widget.music{ .header{ + &.pure{ padding-bottom: @gap/4; // 适合白色导航栏背景 + } } .content{ padding: @gap/2; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: @gap/4; // 适合白色导航栏背景 + } } } .m_widget.links{ .content{ padding: @gap/2 0; - padding-top: 0; // 适合白色导航栏背景 + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } .name{ img{ display: inline;