From b30bd9e64e0767fa3d7589157cd3e13c280cbd71 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 28 Aug 2018 23:13:43 +0800 Subject: [PATCH] update --- README.md | 26 +++++-- _config.yml | 6 +- layout/_partial/article.ejs | 2 +- layout/_partial/header.ejs | 10 +-- layout/_widget/about.ejs | 30 ++++++++ layout/_widget/avatar.ejs | 7 -- source/less/_article.less | 24 +++---- source/less/_base.less | 6 +- source/less/_defines.less | 37 ++++++---- source/less/_footer.less | 7 +- source/less/_header.less | 34 +++++---- source/less/_main.less | 12 ++-- source/less/_search.less | 2 +- source/less/_toc.less | 5 +- source/less/_tog.less | 2 +- source/less/_widget.less | 135 +++++++++++++++++++++++++++--------- 16 files changed, 235 insertions(+), 110 deletions(-) create mode 100755 layout/_widget/about.ejs delete mode 100755 layout/_widget/avatar.ejs diff --git a/README.md b/README.md index ccf0fff..0a82326 100755 --- a/README.md +++ b/README.md @@ -312,24 +312,36 @@ mathjax: true ```yaml // 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +// 定义颜色 +@theme-base-main: #EEE; +@theme-base-tint: @ax-red; + // 网页背景 @theme-bg-main: #EFEFEF; -// 导航栏背景（主题色） -@theme-bg-header: @xiaowenwen-green; +// 导航栏背景 +@theme-bg-nav-header: #FFF; +// 卡片标题背景 +@theme-bg-card-header: #E3E3E3; +// 按钮背景 +@theme-bg-button: @theme-bg-card-header; // 卡片背景 @theme-bg-card: #FFF; +// 代码的背景色 +@theme-bg-code: @theme-base-tint; // 代码块的背景色 -@theme-bg-code: #F5F5F5; +@theme-bg-code-block: #F5F5F5; // 引用的颜色 和 分类、归档的 hover 时颜色 -@theme-bg-quote: @theme-bg-header; +@theme-bg-quote: @theme-base-tint; + // 标题文字颜色（h1/h2） -@theme-text-header: darken(@theme-bg-header, 0%); +@theme-text-header: @theme-base-tint; // 链接颜色 @theme-text-link: @ax-blue; // 链接高亮颜色 -@theme-text-highlight: @material-orange; +@theme-text-highlight: @theme-base-tint; // 在主题色中显示的文本（白或深灰） -@theme-text-in-header: white; +@theme-text-in-header: @dark; +// 正文文字颜色 @theme-text-main: @dark; // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ``` diff --git a/_config.yml b/_config.yml index d6cbf05..f9764fc 100755 --- a/_config.yml +++ b/_config.yml @@ -22,13 +22,15 @@ materialx: url: /archives # 右边的小窗口 widgets: - - avatar # 显示个人头像，如果注释掉这一行就不显示 + - about # 显示个人头像、格言、社交信息等，如果注释掉这一行就不显示 - categories # 显示分类 - tagcloud # 显示tags - - contacts # 显示自己的联系信息 - music # 显示自己的网易云歌单 - links # 显示友链 - toc # 显示目录 + widgets_about: + title: + motto: 永远不要忘了自己是谁，因为这个世界就不会。 # 网易云音乐歌单id widgets_musicid: # 侧边栏的友链 diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs index dee80a2..cd260f0 100755 --- a/layout/_partial/article.ejs +++ b/layout/_partial/article.ejs @@ -23,7 +23,7 @@ <% if (post.tags && post.tags.length) { %>
<% post.tags.each(function(item){ %> -   <%=item.name %> +  <%=item.name %> <%})%>
<% } %> diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index 2451cf4..dbbd4d3 100755 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -30,9 +30,9 @@ <% } %> @@ -42,9 +42,9 @@ diff --git a/layout/_widget/about.ejs b/layout/_widget/about.ejs new file mode 100755 index 0000000..3d263e4 --- /dev/null +++ b/layout/_widget/about.ejs @@ -0,0 +1,30 @@ +
+
+ <% if(config.avatar) { %> + + <% } else { %> + + <%} %> +
+
+ <% if (config.materialx && (config.materialx.widgets_about.title)){ %> +

<%= config.materialx.widgets_about.title %>

+ <% } %> +
+ + <% if (config.materialx && (config.materialx.widgets_about.motto)){ %> + <%= config.materialx.widgets_about.motto %> + <% } %> +
+
+ +
diff --git a/layout/_widget/avatar.ejs b/layout/_widget/avatar.ejs deleted file mode 100755 index 366a1d9..0000000 --- a/layout/_widget/avatar.ejs +++ /dev/null @@ -1,7 +0,0 @@ -
- <% if(config.avatar) { %> - - <% } else { %> - - <%} %> -
diff --git a/source/less/_article.less b/source/less/_article.less index 8511880..f298cc3 100755 --- a/source/less/_article.less +++ b/source/less/_article.less @@ -173,9 +173,9 @@ border-left: 8px solid @theme-bg-quote; border-top-left-radius: 8px; border-bottom-left-radius: 8px; - border-right: 1px solid fade(@theme-bg-quote, 30%); - border-top: 1px solid fade(@theme-bg-quote, 30%); - border-bottom: 1px solid fade(@theme-bg-quote, 30%); + border-right: 1px solid fade(@theme-bg-quote, 40%); + border-top: 1px solid fade(@theme-bg-quote, 40%); + border-bottom: 1px solid fade(@theme-bg-quote, 40%); } footer { strong { @@ -197,10 +197,10 @@ margin: 0px 2px; vertical-align: center; border-radius: 2px; - border: 1px solid fade(@theme-bg-header, 30%); + border: 1px solid fade(@theme-bg-code, 30%); font-size: @base-font-size * .8; - background: fade(@theme-bg-header, 10%); + background: fade(@theme-bg-code, 10%); @media(max-width: @on-phone){ font-size: @base-font-size * .8 * .95; } @@ -216,16 +216,16 @@ display: inline-block; vertical-align: middle; line-height: 2rem; - background-color: fade(@theme-bg-header, 90%); + background-color: fade(@theme-bg-button, 90%); padding: .2em 2.4em; color: @theme-text-in-header; border-radius: @border-radius-width/2; .enable-trans(); &:hover { - background: darken(@theme-bg-header, 10%); + background: darken(@theme-bg-button, 10%); } &:active { - background: lighten(@theme-bg-header, 20%); + background: lighten(@theme-bg-button, 20%); } } @@ -330,7 +330,7 @@ display: block; // background: #2d2d2d; // background: fade(@material-blue, 8%); - background: @theme-bg-code; + background: @theme-bg-code-block; // color: #cccccc; font-size: @small-font-size * .95; font-family:@code-font-family; @@ -341,7 +341,7 @@ border: 1px solid transparent; .enable-trans(); &:hover{ - border: 1px solid fade(@theme-bg-quote, 30%); + border: 1px solid fade(@theme-bg-quote, 40%); } .gutter{ @@ -378,12 +378,12 @@ /* Handle */ &::-webkit-scrollbar-thumb { - background: darken(@theme-bg-code, 5%); + background: darken(@theme-bg-code-block, 5%); cursor: pointer; border-radius: 3px; .enable-trans(); &:hover { - background: darken(@theme-bg-code, 12%); + background: darken(@theme-bg-code-block, 12%); } } diff --git a/source/less/_base.less b/source/less/_base.less index 0ae1935..0c43119 100755 --- a/source/less/_base.less +++ b/source/less/_base.less @@ -306,9 +306,9 @@ li { &:active { border-radius: 8px; border-left: 8px solid @theme-bg-quote; - border-right: 1px solid fade(@theme-bg-quote, 30%); - border-top: 1px solid fade(@theme-bg-quote, 30%); - border-bottom: 1px solid fade(@theme-bg-quote, 30%); + border-right: 1px solid fade(@theme-bg-quote, 40%); + border-top: 1px solid fade(@theme-bg-quote, 40%); + border-bottom: 1px solid fade(@theme-bg-quote, 40%); } } diff --git a/source/less/_defines.less b/source/less/_defines.less index 4480f4e..b04e6ca 100755 --- a/source/less/_defines.less +++ b/source/less/_defines.less @@ -55,44 +55,51 @@ @mac-minimize: #FFBD2B; @mac-close: #FE5F58; + @xiaowenwen-green: #5CC281; @ax-light-pink: #E7BED0; @ax-light-red: #FF8485; -@ax-red: #F05153; +@ax-red: #F24E32; @ax-blue: #52A1F8; // 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +// 定义颜色 +@theme-base-main: #EEE; +@theme-base-tint: @ax-red; + // 网页背景 @theme-bg-main: #EFEFEF; -// 导航栏背景（主题色） -@theme-bg-header: #fff; +// 导航栏背景 +@theme-bg-nav-header: #FFF; +// 卡片标题背景 +@theme-bg-card-header: #E3E3E3; +// 按钮背景 +@theme-bg-button: @theme-bg-card-header; // 卡片背景 @theme-bg-card: #FFF; +// 代码的背景色 +@theme-bg-code: @theme-base-tint; // 代码块的背景色 -@theme-bg-code: #F5F5F5; +@theme-bg-code-block: #F5F5F5; // 引用的颜色 和 分类、归档的 hover 时颜色 -@theme-bg-quote: @theme-bg-header; -@theme-bg-quote: @ax-light-red; +@theme-bg-quote: @theme-base-tint; + // 标题文字颜色（h1/h2） -@theme-text-header: darken(@theme-bg-header, 0%); -@theme-text-header: @ax-light-red; +@theme-text-header: @theme-base-tint; // 链接颜色 @theme-text-link: @ax-blue; // 链接高亮颜色 -@theme-text-highlight: @ax-light-red; +@theme-text-highlight: @theme-base-tint; // 在主题色中显示的文本（白或深灰） -@theme-text-in-header: white; +@theme-text-in-header: @dark; +// 正文文字颜色 @theme-text-main: @dark; -// @theme-bg-main: #444; -// @theme-bg-card: lighten(@theme-bg-main, 10%); -// @theme-bg-code: #555555; -@theme-text-in-header: @dark; -// @theme-text-main: @light; + // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @box-shadow-card-raised: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12); diff --git a/source/less/_footer.less b/source/less/_footer.less index 647a507..76d09b4 100755 --- a/source/less/_footer.less +++ b/source/less/_footer.less @@ -29,11 +29,14 @@ position: relative; display: inline-block; text-align: center; - font-size: 16px; + width: 32px; + height: 32px; padding: 4px 2px; + margin: 4px; border-radius: 100px; + background: darken(@theme-bg-main, 5%); &:hover { - background: transparent; + background: darken(@theme-bg-main, 20%); color: @theme-text-highlight; } } diff --git a/source/less/_header.less b/source/less/_header.less index 00c65d6..1c6e1c7 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -19,7 +19,7 @@ .nav--main,.nav-sub{ height: @header-height; } - background: @theme-bg-header; + background: @theme-bg-nav-header; // padding: 0 @gap; &, a{ .txt-ellipsis; @@ -118,11 +118,11 @@ top:(@header-height - @search-height)/2; } &.z_search-open{ - .logo,.switcher{ - // opacity:0; + .logo{ + opacity:0; } .m_search{ - width: 100% - 1.7*@gap; + width: 100% - 1.5*@gap; } } } @@ -156,29 +156,37 @@ line-height: @search-height - 10px; margin: 0; width: 100%; - color: @theme-text-in-header; - padding: 5px 10px 5px 40px; + color: fade(@theme-text-in-header, 60%); + padding: 5px 10px 5px 38px; height: @search-height; - line-height: @search-height; + line-height: @search-height/2; font-family: @base-font-family; border: none; - border-radius: 3px; - background:fade(@theme-text-in-header,15%); + border-radius: 100px; + 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{ - background: fade(white,35%); + // background: fade(white,35%); + + border: 1px dashed @theme-text-in-header; } &:focus { color:@black; - background: white; + // background: white; + border: 1px dashed @theme-text-in-header; .set-placeholder({color: @black}); } &:focus ~ .icon{ color: @black; } - .set-placeholder({color: @theme-text-in-header}); } } @@ -187,7 +195,7 @@ .header{ border-top-left-radius: @border-radius-width; border-top-right-radius: @border-radius-width; - background-color: fade(@theme-bg-header,90%); + background-color: fade(@theme-bg-nav-header,90%); color: @theme-text-in-header; font-size: @base-font-size; line-height: 1.8em; diff --git a/source/less/_main.less b/source/less/_main.less index 47b9ae8..4f5c4ab 100755 --- a/source/less/_main.less +++ b/source/less/_main.less @@ -41,15 +41,15 @@ border: none; padding-left: 2.4em; padding-right: 2.4em; - background-color: fade(@theme-bg-header, 90%); + background-color: fade(@theme-bg-button, 90%); color: @theme-text-in-header; border-radius: @border-radius-width/2; .enable-trans(); &:hover { - background: darken(@theme-bg-header, 10%); + background: darken(@theme-bg-button, 10%); } &:active { - background: lighten(@theme-bg-header, 20%); + background: lighten(@theme-bg-button, 20%); } } blockquote{ @@ -68,9 +68,9 @@ border-left: 8px solid @theme-bg-quote; border-top-left-radius: 8px; border-bottom-left-radius: 8px; - border-right: 1px solid fade(@theme-bg-quote, 30%); - border-top: 1px solid fade(@theme-bg-quote, 30%); - border-bottom: 1px solid fade(@theme-bg-quote, 30%); + border-right: 1px solid fade(@theme-bg-quote, 40%); + border-top: 1px solid fade(@theme-bg-quote, 40%); + border-bottom: 1px solid fade(@theme-bg-quote, 40%); } } a, .vemoji-btn, .vpreview-btn{ diff --git a/source/less/_search.less b/source/less/_search.less index 11a65c7..a70ebb1 100755 --- a/source/less/_search.less +++ b/source/less/_search.less @@ -47,7 +47,7 @@ position: relative; width: 100%; height: @header-height; - background-color: @theme-bg-header; + background-color: @theme-bg-nav-header; z-index: 3; border-top-left-radius: @border-radius-width; border-top-right-radius: @border-radius-width; diff --git a/source/less/_toc.less b/source/less/_toc.less index b24aeae..12a4318 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -4,6 +4,9 @@ position: fixed; top: @header-height + @gap; display: none; + .content{ + padding: @gap/2 0; + } &.active{ display: block; } @@ -26,7 +29,7 @@ } } - + a { padding-left: 8px; color: fade(@theme-text-main, 50%); diff --git a/source/less/_tog.less b/source/less/_tog.less index ebe5fef..8d927d7 100755 --- a/source/less/_tog.less +++ b/source/less/_tog.less @@ -16,7 +16,7 @@ z-index:3; &:extend(.z-depth-2); padding: @gap; - border-left: 6px solid @theme-bg-header; + border-left: 6px solid @theme-bg-nav-header; background: @theme-text-in-header; a { display: inline-block; diff --git a/source/less/_widget.less b/source/less/_widget.less index 3fb78a7..70372ad 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -17,31 +17,29 @@ box-shadow: @box-shadow-card-normal; } .header{ - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: sticky; - top: 0; + border-top-left-radius: @border-radius-width; border-top-right-radius: @border-radius-width; @media(max-width: @on-phone) { border-radius: 0; } - background-color: @theme-bg-header; + background-color: @theme-bg-card-header; color: @theme-text-in-header; font-size: @base-font-size; line-height: 1.8em; - padding: 8px @gap; + padding: 8px @gap/2; // letter-spacing: .08em; } .content{ + text-align: justify; overflow: auto; - padding: @gap/2 0; + padding: @gap/2; max-height: ~"calc(100% - @{header-height} - 2.5 * @{gap})"; } + ul.entry > li > a{ - padding: 0 @gap; + padding: 0 @gap/2; line-height:@item-height; height: @item-height; font-size: @base-font-size; @@ -70,41 +68,100 @@ } } .m_widget.about{ - .waves-effect,img{ - width: 100%; - display: block; - border-radius: @border-radius-width; + .enable-trans(); + h2{ + text-align: center; + // color: @theme-text-header; } - @media(max-width: @on-phone){ - display:none; + .header{ + padding: 0; + margin: 0; + display: flex; + justify-content: center; + @media(max-width: @on-phone){ + padding: @gap/2; + } + } + img{ + width: @side-width; + height: @side-width; + @media(max-width: @on-phone){ + width: 80px; + height: 80px; + border-radius: 100%; + } + border-top-left-radius: 8px; + border-top-right-radius: 8px; } .content{ - padding:0; - .desc{ - position: relative; - padding: @gap; - .enable-trans(.15s); - line-height: 1.2em; - font-style: italic; - &:before{ - content:'#'; - position: absolute; - left:0; - top:0; - width:2px; - height:100%; + // margin-top: 0; + // padding: @gap/2 @gap; + font-weight: bold; + } + .social-wrapper{ + display: flex; + justify-content: center; + padding-top: 0; + padding-bottom: @gap/2; + a { + color: fade(@theme-text-main, 70%); + .enable-trans(); + &:hover { + color: @theme-text-highlight; } - &:empty{ - padding:0; - height: 0; + &.social { + position: relative; + display: inline-block; + text-align: center; + width: 32px; + height: 32px; + padding: 4px 2px; + margin: 4px; + border-radius: 100px; + background: darken(@theme-bg-card, 5%); + &:hover { + background: darken(@theme-bg-card, 20%); + color: @theme-text-highlight; + } } } } } +// .m_widget.avatar{ +// +// .content{ +// // padding:0; +// .desc{ +// position: relative; +// padding: @gap; +// .enable-trans(.15s); +// line-height: 1.2em; +// font-style: italic; +// &:before{ +// content:'#'; +// position: absolute; +// left:0; +// top:0; +// width:2px; +// height:100%; +// } +// &:empty{ +// padding:0; +// height: 0; +// } +// } +// } +// } +.m_widget.categories{ + .content{ + padding: @gap/2 0; + } +} + .m_widget.tagcloud{ .content{ text-align: justify; - padding: @gap/2 @gap; + // padding: @gap/2 @gap; a{ display:inline-block; .enable-trans(.1s); @@ -116,8 +173,18 @@ } } } +.m_widget.contacts{ + .content{ + padding: @gap/2 0; + } +} .m_widget.music{ .content{ - padding: @gap/2; + padding: @gap/2 2px; + } +} +.m_widget.links{ + .content{ + padding: @gap/2 0; } }