+
'>
<% 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;