From dfe3e05243d231994a4f666e32bd1997e1f5b2b4 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Thu, 4 Apr 2019 21:05:10 +0800 Subject: [PATCH] update --- _config.yml | 12 +++-- layout/_cover/search.ejs | 2 +- layout/_partial/header.ejs | 4 +- layout/archive.ejs | 2 +- layout/category.ejs | 2 +- layout/index.ejs | 2 +- layout/links.ejs | 2 +- layout/list.ejs | 2 +- layout/page.ejs | 3 +- layout/post.ejs | 3 +- source/less/_article.less | 1 + source/less/_base.less | 56 +++++++++++----------- source/less/_header.less | 96 +++++++++++++++++++++----------------- source/less/_layout.less | 11 +++-- source/less/_main.less | 11 ++++- source/less/_side.less | 7 +-- source/less/_toc.less | 6 +-- 17 files changed, 122 insertions(+), 100 deletions(-) diff --git a/_config.yml b/_config.yml index 6d650fd..4527242 100755 --- a/_config.yml +++ b/_config.yml @@ -104,6 +104,10 @@ menu_mobile: icon: fas fa-link url: friends/ rel: nofollow + - name: 主题文档 + icon: fas fa-book + url: wiki/material-x/ + rel: nofollow - name: 关于小站 icon: fas fa-info-circle url: about/ @@ -137,10 +141,6 @@ sidebar: - name: 开源项目 icon: fas fa-code-branch url: projects/ - - name: Wiki文档 - icon: fas fa-book - url: wiki/ - rel: nofollow - name: 歌单分享 icon: fas fa-compact-disc url: music/ @@ -149,6 +149,10 @@ sidebar: icon: fas fa-link url: friends/ rel: nofollow + - name: 主题文档 + icon: fas fa-book + url: wiki/material-x/ + rel: nofollow - name: 关于小站 icon: fas fa-info-circle url: about/ diff --git a/layout/_cover/search.ejs b/layout/_cover/search.ejs index a89176a..75251d1 100755 --- a/layout/_cover/search.ejs +++ b/layout/_cover/search.ejs @@ -8,7 +8,7 @@
- +
<% } %> diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index f415803..4d46172 100755 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -1,4 +1,4 @@ -
+
@@ -37,7 +37,7 @@
- +
<% } %> diff --git a/layout/archive.ejs b/layout/archive.ejs index f8f394b..8feec64 100755 --- a/layout/archive.ejs +++ b/layout/archive.ejs @@ -1,4 +1,4 @@ -
+
'> <% if (page.year || page.month) { %> <%- partial('_partial/archive') %> <% } else { %> diff --git a/layout/category.ejs b/layout/category.ejs index c5192b8..44364a2 100755 --- a/layout/category.ejs +++ b/layout/category.ejs @@ -1,4 +1,4 @@ -
+
'> <% if (site.posts && site.posts.length > 0) { %> <% if (page.index) { %>
diff --git a/layout/index.ejs b/layout/index.ejs index dd5a1ec..11ef3c8 100755 --- a/layout/index.ejs +++ b/layout/index.ejs @@ -1,4 +1,4 @@ -
+
'> <%- partial('_partial/archive') %>
<%- partial('_partial/side') %> diff --git a/layout/links.ejs b/layout/links.ejs index 8b126fd..3632823 100755 --- a/layout/links.ejs +++ b/layout/links.ejs @@ -1,4 +1,4 @@ -
+
'>
<%- partial('_partial/meta',{post:page, position:'header'}) %>
diff --git a/layout/list.ejs b/layout/list.ejs index c79690f..6556b4a 100755 --- a/layout/list.ejs +++ b/layout/list.ejs @@ -1,4 +1,4 @@ -
+
'> <% if (site.posts && site.posts.length > 0) { %>
<% site.posts.sort(page.sort ? page.sort : "-date").each(function(p){ %> diff --git a/layout/page.ejs b/layout/page.ejs index 12fc54c..3db1a63 100755 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -1,5 +1,4 @@ - -
+
'> <%- partial('_partial/article', {post: page, index: false}) %>
<%- partial('_partial/side') %> diff --git a/layout/post.ejs b/layout/post.ejs index 12fc54c..3db1a63 100755 --- a/layout/post.ejs +++ b/layout/post.ejs @@ -1,5 +1,4 @@ - -
+
'> <%- partial('_partial/article', {post: page, index: false}) %>
<%- partial('_partial/side') %> diff --git a/source/less/_article.less b/source/less/_article.less index d318f68..59d4552 100755 --- a/source/less/_article.less +++ b/source/less/_article.less @@ -67,6 +67,7 @@ justify-content: center; } &.pure{ + margin: 0; padding: 0; display: flex; flex-wrap: wrap; diff --git a/source/less/_base.less b/source/less/_base.less index 791190b..f1e85f5 100755 --- a/source/less/_base.less +++ b/source/less/_base.less @@ -79,6 +79,8 @@ fancybox{ } } .m_search{ + @iconW: 32px; + @iconMargin: 4px; margin-top: 2vh; position: relative; height: @height_navbar - @gap; @@ -95,55 +97,49 @@ fancybox{ width: 100%; } .icon,.input{ - .enable-trans(.1s); + .enable-trans(.3s); } .icon { position: absolute; display:block; - height: @height_navbar - @gap; - width: @height_navbar - @gap; - line-height: @height_navbar - @gap; + line-height: @searchbar_height_cover; + height: @searchbar_height_cover; + width: @iconW; top: 0; - left: @gap/2; + left: @iconMargin+1px; font-size: @fontsize_base; + color: fade(@color_text_main, 60%); } .input { - display:block; - color: @color_text_main; - background: lighten(@theme_cardbg, 10%); + display: block; font-size: @fontsize_base; - line-height: @fontsize_base*2.2; - margin: 0; + line-height: @fontsize_base; + height: @searchbar_height_cover; width: 100%; - padding-left: @fontsize_base + @gap; - padding-right: @gap; - padding-top: 2px; - @media(max-width: @on_phone){ - padding-left: @fontsize_base + @gap; - } - font-family: @fontfamily_base; - border: none; + color: @color_text_main; + box-shadow: none; box-sizing: border-box; -webkit-appearance: none; - box-shadow: none; - border: 1px dashed transparent; - .enable-trans(); + padding-left: @iconW + @iconMargin; + @media(max-width: @on_phone){ + padding-left: @iconW + @iconMargin; + } border-radius: @height_navbar; - ~ .icon{ - line-height: @fontsize_base*2.2+4px; - padding-left: 2px; + background: lighten(@theme_cardbg, 10%); + border: 1px dashed transparent; + .set-placeholder({ padding-top: 2px; - color: fade(@color_text_main, 80%); - } - .set-placeholder({color: fade(@color_text_main, 60%)}); + color: fade(@color_text_main, 60%); + }); &:hover{ - border: 1px dashed @theme_main; + ~.icon{ + color: @theme_main; + } } &:focus { - ~ .icon{ + ~.icon{ color: @theme_main; } - color: @color_text_main; border: 1px solid @theme_main; } } diff --git a/source/less/_header.less b/source/less/_header.less index 6a1d744..68f3e16 100755 --- a/source/less/_header.less +++ b/source/less/_header.less @@ -1,8 +1,9 @@ .l_header { + @iconW: 32px; + @iconMargin: 4px; position: fixed; z-index: 9999; top: 0; - left: 0; overflow: hidden; width: 100%; font-size: @fontsize_base; @@ -18,7 +19,12 @@ margin: auto; .enable-trans(); } - + &.no_sidebar{ + .wrapper{ + max-width: @on_pad; + margin: auto; + } + } .wrapper.sub{ .enable-trans(); transform: translateY(-@height_navbar); @@ -123,7 +129,7 @@ margin: 2px; @height: @height_navbar - @gap; @media(max-width: @on_phone){ - width: @height; + margin: 0; height: @height; } a{ @@ -138,7 +144,7 @@ background: fade(@theme_cardbg, 30%); } @media(max-width: @on_phone){ - width: @height; + width: @iconW; height: @height; } } @@ -154,69 +160,62 @@ } .m_search { position: relative; - height: @height_navbar - @gap; + display: flex; width: @width_sidebar; - @media(max-width: @on_laptop){ + @media(max-width: @on_desktop){ width: @width_sidebar_m; } - line-height: @height_navbar - @gap; - margin-top: @gap/2; - margin-bottom: @gap/2; - vertical-align: middle; .form { position: relative; display: block; width: 100%; + height: 100%; } .icon,.input{ - .enable-trans(.1s); + .enable-trans(.3s); } .icon { position: absolute; - display:block; - height: @height_navbar - @gap; - width: @height_navbar - @gap; - line-height: @height_navbar - @gap; + display: block; + line-height: @height_searchbar; + height: @height_searchbar; + width: @iconW; top: 0; - left: @gap/2; + left: @iconMargin+1px; font-size: @fontsize_base; + color: fade(@color_text_in_header, 60%); } .input { - display:block; + display: block; font-size: @fontsize_base; - line-height: @height_navbar - @gap; - margin: 0; + line-height: @fontsize_base; + height: @height_searchbar; width: 100%; color: fade(@color_text_in_header, 60%); - padding-left: @fontsize_base + @gap - 2px; + box-shadow: none; + box-sizing: border-box; + -webkit-appearance: none; + padding-left: @iconW + @iconMargin; @media(max-width: @on_phone){ - padding-left: @fontsize_base + @gap - 2px; + padding-left: @iconW + @iconMargin; } - height: @height_navbar - @gap; - line-height: @height_navbar - @gap; - font-family: @fontfamily_base; - border: none; border-radius: @border_radius_searchbar; background: fade(@theme_cardbg, 15%); - box-sizing: border-box; - -webkit-appearance: none; - box-shadow: none; border: 1px dashed transparent; - .enable-trans(); - ~ .icon{ + .set-placeholder({ + padding-top: 2px; color: fade(@color_text_in_header, 60%); - } - .set-placeholder({color: fade(@color_text_in_header, 60%)}); + }); &:hover{ - border: 1px dashed fade(@color_text_in_header, 60%); + color: @color_text_in_header; + border: 1px solid fade(@color_text_in_header, 60%); } &:focus { - ~ .icon{ + ~.icon{ color: @color_text_in_header; } color: @color_text_in_header; - border: 1px solid fade(@color_text_in_header, 60%); - // .set-placeholder({color: @black}); + border: 1px solid @color_text_in_header; } } } @@ -226,6 +225,12 @@ color: @theme_main; } box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景 + // box-shadow: none; + // background: transparent; + // .wrapper{ + // background: @theme_cardbg; + // box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景 + // } .menu{ ul > li > a{ .enable-trans(); @@ -254,23 +259,28 @@ } } .m_search { + .icon{ + color: fade(@color_text_main, 60%); + } .input { color: @color_text_main; background: @theme_background; - ~ .icon{ + .set-placeholder({ color: fade(@color_text_main, 60%); - } - .set-placeholder({color: fade(@color_text_main, 60%)}); + }); &:hover{ - border: 1px dashed fade(@theme_main, 60%); + ~.icon{ + color: fade(@theme_main, 80%); + } + border: 1px solid fade(@theme_main, 60%); } &:focus { - ~ .icon{ + ~.icon{ color: @theme_main; } color: @color_text_main; background: fade(@theme_main, 15%); - border: 1px solid fade(@theme_main, 60%); + border: 1px solid @theme_main; } } } @@ -289,7 +299,7 @@ opacity:0; } .m_search{ - width: 100% - 1.5*@gap; + width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})"; } } } diff --git a/source/less/_layout.less b/source/less/_layout.less index 8d323fd..75cb069 100755 --- a/source/less/_layout.less +++ b/source/less/_layout.less @@ -1,5 +1,5 @@ // start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@gap: 20px; +@gap: 16px; // end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @@ -9,7 +9,7 @@ @on_laptop: 1024px; // 1024 + 285 @on_desktop: 1200px; // container -@width_container: 1200px; +@width_container: 1080px; @on_modal_threshold: 680px; // 侧边栏宽度 @width_sidebar: 285px; @@ -17,6 +17,9 @@ // 搜索框的宽度，建议和侧边栏宽度保持一致 @width_searchbar: @width_sidebar; @width_searchbar_m: @width_sidebar_m; +// 搜索框的高度，建议不要超出导航栏的高度 +@height_searchbar: 40px; +@searchbar_height_cover: 44px; // 一个cell的高度 @height_cell: 36px; // end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @@ -24,7 +27,7 @@ // start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // 导航栏高度 -@height_navbar: 54px; +@height_navbar: 64px; @fontsize_logo: @fontsize_base * 1.2; @fontsize_header_switcher: 1.3em; @fontsize_header: 1em; @@ -38,7 +41,7 @@ @border_radius_line: 4px; // 线的宽度和滚动条的宽度 @border_radius_code_block: 4px; // 引用、代码块的圆角 -@border_radius_searchbar: 4px; // 搜索框的圆角半径，可以根据心情随时调整风格 +@border_radius_searchbar: 8px; // 搜索框的圆角半径，可以根据心情随时调整风格 // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< diff --git a/source/less/_main.less b/source/less/_main.less index 97cb78b..6c43ce4 100755 --- a/source/less/_main.less +++ b/source/less/_main.less @@ -1,12 +1,21 @@ .l_main { width: ~"calc(100% - 1 * @{width_sidebar})"; - @media(max-width: @on_laptop) { + @media(max-width: @on_desktop) { width: ~"calc(100% - 1 * @{width_sidebar_m})"; } @media(max-width: @on_pad) { width: 100%; } padding-right: @gap; + &.no_sidebar{ + width: 100%; + padding-right: 0; + max-width: @on_pad; + margin: auto; + ~.l_side{ + display: none; + } + } float: left; .post-list { position: relative; diff --git a/source/less/_side.less b/source/less/_side.less index d605f60..a0f3a98 100755 --- a/source/less/_side.less +++ b/source/less/_side.less @@ -4,7 +4,7 @@ position: relative; display: flex; flex-direction: column; - @media(max-width: @on_laptop) { + @media(max-width: @on_desktop) { width: @width_sidebar_m; } @media(max-width: @on_pad) { @@ -34,7 +34,7 @@ } width: @width_sidebar; - @media(max-width: @on_laptop) { + @media(max-width: @on_desktop) { width: @width_sidebar_m; } @media(max-width: @on_pad) { @@ -138,7 +138,7 @@ height: @width_sidebar; border-top-left-radius: @border_radius; border-top-right-radius: @border_radius; - @media(max-width: @on_laptop) { + @media(max-width: @on_desktop) { width: @width_sidebar_m; height: @width_sidebar_m; } @@ -194,6 +194,7 @@ } @media(max-width: @on_pad){ justify-content: center; + display: none; } } } diff --git a/source/less/_toc.less b/source/less/_toc.less index 0bf49ae..06f3c13 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -3,7 +3,7 @@ overflow: hidden; border-radius: @border_radius; position: sticky; - top: @height_navbar + 1*@gap; + top: @height_navbar; .enable-trans(); header{ position: sticky; @@ -43,10 +43,10 @@ } } .enable-trans(); - @media(max-width: @on_phone){ + @media(max-width: @on_pad){ position: fixed; max-height: 1000px; - // width: ~"calc(100% - 2 * @{gap})"; + width: ~"calc(100% - 2 * @{gap})"; top: @height_navbar; box-shadow: @boxshadow_card_raised; visibility: hidden;