style: optimize the overall style
This commit is contained in:
parent
1d6a14de69
commit
bfa9145a23
|
@ -12,6 +12,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
|
||||||
background: url($first-screen-img) center center / cover no-repeat;
|
background: url($first-screen-img) center center / cover no-repeat;
|
||||||
background-position-y: $header-height - 2px;
|
background-position-y: $header-height - 2px;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
background-position-y: $header-height * 0.9 - 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
+keep-mobile() {
|
||||||
|
background-position-y: $header-height * 0.8 - 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
@ -58,10 +58,9 @@ $menu-bar-line-height = 2.5px;
|
||||||
font-size: $logo-title-font-size * 0.8;
|
font-size: $logo-title-font-size * 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
|
|
||||||
.pc {
|
.pc {
|
||||||
|
@ -317,11 +316,13 @@ $menu-bar-line-height = 2.5px;
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
&::after {
|
&::after {
|
||||||
|
transition();
|
||||||
bottom: -($header-shrink-height / 2 - 12);
|
bottom: -($header-shrink-height / 2 - 12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active::after {
|
.active::after {
|
||||||
|
transition();
|
||||||
bottom: -($header-shrink-height / 2 - 12);
|
bottom: -($header-shrink-height / 2 - 12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,10 +6,10 @@
|
||||||
// layout
|
// layout
|
||||||
// ========================================================================
|
// ========================================================================
|
||||||
$header-height = 76px; // 头部默认高度
|
$header-height = 76px; // 头部默认高度
|
||||||
|
$header-shrink-height = $header-height * 0.8; // 头部收缩高度
|
||||||
$main-content-width = 80%; // 中间内容区域宽度(PC)
|
$main-content-width = 80%; // 中间内容区域宽度(PC)
|
||||||
$main-content-width-tablet = 85%; // 中间内容区域宽度(平板)
|
$main-content-width-tablet = 85%; // 中间内容区域宽度(平板)
|
||||||
$main-content-width-mobile = 90%; // 中间内容区域宽度(手机)
|
$main-content-width-mobile = 90%; // 中间内容区域宽度(手机)
|
||||||
$header-shrink-height = 56px; // 头部收缩高度
|
|
||||||
$circle-button-width = 40px; // tools 圆形工具按钮宽度
|
$circle-button-width = 40px; // tools 圆形工具按钮宽度
|
||||||
$tools-button-width = 32px; // tools 方形工具按钮宽度
|
$tools-button-width = 32px; // tools 方形工具按钮宽度
|
||||||
$component-interspace = 30px; // 组件/模块的间隔值(PC)
|
$component-interspace = 30px; // 组件/模块的间隔值(PC)
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
$header-progress-height = 2.8px;
|
$header-progress-height = 2.8px;
|
||||||
$temp-width = hexo-config('style.left_side_width');
|
$temp-width = hexo-config('style.left_side_width');
|
||||||
$page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
$page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -50,12 +50,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
height: $header-height - 8px;
|
height: $header-height * 0.9;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
height: $header-height - 16px;
|
height: $header-height * 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
z-index: $z-index-5;
|
z-index: $z-index-5;
|
||||||
|
@ -106,11 +106,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
||||||
|
|
||||||
|
|
||||||
.page-main-content-top-shrink {
|
.page-main-content-top-shrink {
|
||||||
transition();
|
|
||||||
padding-top: $header-shrink-height;
|
padding-top: $header-shrink-height;
|
||||||
|
transition();
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
padding-top: $header-shrink-height * 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
+keep-mobile() {
|
||||||
|
padding-top: $header-shrink-height * 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
.page-main-content-top {
|
.page-main-content-top {
|
||||||
height: $header-shrink-height;
|
height: $header-shrink-height;
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
height: $header-shrink-height * 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
+keep-mobile() {
|
||||||
|
height: $header-shrink-height * 0.8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -145,13 +161,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
||||||
right: $component-interspace;
|
right: $component-interspace;
|
||||||
transition();
|
transition();
|
||||||
|
|
||||||
|
&.shrink {
|
||||||
|
top: $header-shrink-height + $component-interspace;
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
|
top: $header-shrink-height * 0.9 + $component-interspace;
|
||||||
|
}
|
||||||
|
|
||||||
|
+keep-mobile() {
|
||||||
|
top: $header-shrink-height * 0.8 + $component-interspace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
+keep-tablet() {
|
||||||
|
top: $header-height * 0.9 + $component-interspace;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
transform: scale(0.82);
|
transform: scale(0.82);
|
||||||
transform-origin: right top;
|
transform-origin: right top;
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
|
top: $header-height * 0.8 + $component-interspace;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
transform: scale(0.72);
|
transform: scale(0.72);
|
||||||
transform-origin: right top;
|
transform-origin: right top;
|
||||||
|
|
|
@ -3,6 +3,7 @@ KEEP.initHeaderShrink = () => {
|
||||||
|
|
||||||
pageTemplateDom: document.querySelector('.page-main-content'),
|
pageTemplateDom: document.querySelector('.page-main-content'),
|
||||||
headerDom: document.querySelector('.header-wrapper'),
|
headerDom: document.querySelector('.header-wrapper'),
|
||||||
|
sidebarToolsDom: document.querySelector('.sidebar-tools'),
|
||||||
isHeaderShrink: false,
|
isHeaderShrink: false,
|
||||||
isShowHeaderDrawer: false,
|
isShowHeaderDrawer: false,
|
||||||
|
|
||||||
|
@ -18,10 +19,12 @@ KEEP.initHeaderShrink = () => {
|
||||||
this.isHeaderShrink = true;
|
this.isHeaderShrink = true;
|
||||||
this.headerDom.classList.add('header-wrapper-shrink');
|
this.headerDom.classList.add('header-wrapper-shrink');
|
||||||
this.pageTemplateDom.classList.add('page-main-content-top-shrink');
|
this.pageTemplateDom.classList.add('page-main-content-top-shrink');
|
||||||
|
this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
|
||||||
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
|
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
|
||||||
this.isHeaderShrink = false;
|
this.isHeaderShrink = false;
|
||||||
this.headerDom.classList.remove('header-wrapper-shrink');
|
this.headerDom.classList.remove('header-wrapper-shrink');
|
||||||
this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
|
this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
|
||||||
|
this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue