lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: optimize global style

This commit is contained in:
XPoet 2020-11-18 11:15:03 +08:00
parent beebe44404
commit a2d80bdd38
4 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/css/layout/_partial/empty-page.styl
View File

@ -24,11 +24,11 @@
margin-bottom: $component-interspace; margin-bottom: $component-interspace;
+ils-tablet() { +ils-tablet() {
margin-bottom: $component-interspace-tablet; margin-bottom: $component-interspace * 0.9;
} }
+ils-mobile() { +ils-mobile() {
margin-bottom: $component-interspace-mobile; margin-bottom: $component-interspace * 0.8;
} }
} }
} }

11
source/css/layout/common/basic.styl
View File

@ -13,12 +13,11 @@
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
//background: rgba(0, 0, 0, 0.32);
background: var(--scroll-bar-color); background: var(--scroll-bar-color);
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: transparent; background: var(--scroll-bar-bg-color);
} }
} }
@ -37,16 +36,12 @@ html, body {
line-height: $default-font-line-height; line-height: $default-font-line-height;
+ils-tablet() { +ils-tablet() {
//font-size: 0.99em; font-size: $default-font-size * 0.96;
//line-height: $default-font-line-height - 2px; line-height: $default-font-line-height * 0.96;
font-size: $default-font-size * 0.95;
line-height: $default-font-line-height * 0.95;
} }
+ils-mobile() { +ils-mobile() {
//font-size: 0.98em;
//line-height: $default-font-line-height - 4px;
font-size: $default-font-size * 0.9; font-size: $default-font-size * 0.9;
line-height: $default-font-line-height * 0.9; line-height: $default-font-line-height * 0.9;
} }

66
source/css/layout/common/variables.styl
View File

@ -5,22 +5,20 @@
// ======================================================================== // ========================================================================
// layout // layout
// ======================================================================== // ========================================================================
$header-height = 72px; // 头部默认高度 $header-height = 72px; // 头部默认高度
$main-content-width = 62%; // 中间内容区域宽度（PC） $main-content-width = 62%; // 中间内容区域宽度（PC）
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板） $main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机） $main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
$header-shrink-height = 56px; // 头部收缩高度 $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 = 40px; // 组件/模块的间隔值（PC） $component-interspace = 30px; // 组件/模块的间隔值（PC）
$component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）
// ======================================================================== // ========================================================================
// 媒体查询 // 媒体查询
// ======================================================================== // ========================================================================
$media-max-width = 760px; // 媒体查询最大宽度 (平板) $media-max-width = 780px; // 媒体查询最大宽度 (平板)
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机） $media-max-width-mobile = 500px; // 媒体查询最大宽度（手机）
ils-tablet() ils-tablet()
@media (max-width: $media-max-width) @media (max-width: $media-max-width)
@ -50,34 +48,39 @@ $z-index-9 = 1009;
// ======================================================================== // ========================================================================
// primary color // primary color
$temp-color = hexo-config('style.primary_color'); $temp-color = hexo-config('style.primary_color');
$primary-color = $temp-color ? convert($temp-color):#0066CC; $primary-color = $temp-color ? convert($temp-color) : #0066CC;
$background-color = #fff; // light background color
$second-background-color = darken($background-color, 2%); // second light background color
$normal-text-color = #3f3f3f; // 通用文本颜色（默认字体颜色） // ====================== light mode color ======================
$first-text-color = darken($normal-text-color, 10%); // 第一文本颜色 $background-color = #fff;
$second-text-color = darken($normal-text-color, 5%); // 第二文本颜色 $second-background-color = darken($background-color, 2%);
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色 $default-text-color = #3f3f3f;
$fourth-text-color = lighten($normal-text-color, 90%); // 第三文本颜色 $first-text-color = darken($default-text-color, 10%);
$border-color = darken($background-color, 30%); // 边框颜色 $second-text-color = darken($default-text-color, 5%);
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色 $third-text-color = lighten($default-text-color, 40%);
$fourth-text-color = lighten($default-text-color, 90%);
$border-color = darken($background-color, 30%);
$selection-color = lighten($primary-color, 10%);
$shadow-color = rgba(0, 0, 0, 0.2); $shadow-color = rgba(0, 0, 0, 0.2);
$shadow-hover-color = rgba(0, 0, 0, 0.28); $shadow-hover-color = rgba(0, 0, 0, 0.28);
$scroll-bar-color = #585858; $scroll-bar-color = lighten($default-text-color, 20%);
$scroll-bar-bg-color = darken($background-color, 10%);
// dark mode color // ====================== dark mode color ======================
$dark-primary-color = $primary-color; $dark-primary-color = $primary-color;
$dark-background-color = #2f2e31; $dark-background-color = #2f2e31;
$dark-second-background-color = darken($dark-background-color, 2%); $dark-second-background-color = darken($dark-background-color, 2%);
$dark-normal-text-color = #b9b5c2; $dark-default-text-color = #b9b5c2;
$dark-first-text-color = lighten($dark-normal-text-color, 30%); $dark-first-text-color = lighten($dark-default-text-color, 30%);
$dark-second-text-color = lighten($dark-normal-text-color, 20%); $dark-second-text-color = lighten($dark-default-text-color, 20%);
$dark-third-text-color = darken($dark-normal-text-color, 20%); $dark-third-text-color = darken($dark-default-text-color, 20%);
$dark-fourth-text-color = darken($dark-normal-text-color, 80%); $dark-fourth-text-color = darken($dark-default-text-color, 80%);
$dark-border-color = lighten($dark-background-color, 20%); $dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color; $dark-selection-color = $selection-color;
$dark-shadow-color = rgba(128, 128, 128, 0.2); $dark-shadow-color = rgba(128, 128, 128, 0.2);
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28); $dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
$dark-scroll-bar-color = #686868; $dark-scroll-bar-color = darken($dark-default-text-color, 30%);
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
// ======================================================================== // ========================================================================
@ -100,12 +103,13 @@ root-color(mode) {
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color; --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color; --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color; --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
--normal-text-color: mode == 'light' ? $normal-text-color : $dark-normal-text-color; --normal-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
--border-color: mode == 'light' ? $border-color : $dark-border-color; --border-color: mode == 'light' ? $border-color : $dark-border-color;
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color; --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color; --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color; --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
--scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color; --scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
} }

4
source/css/layout/page.styl
View File

@ -74,11 +74,11 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
padding: $component-interspace 0; padding: $component-interspace 0;
+ils-tablet() { +ils-tablet() {
padding: $component-interspace-tablet 0; padding: $component-interspace * 0.8 0;
} }
+ils-mobile() { +ils-mobile() {
padding: $component-interspace-mobile 0; padding: $component-interspace * 0.6 0;
} }
.main-content { .main-content {