From ae780fb0a855fbdd04c4f4e24f26127e28177a4f Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 21 Jan 2021 18:23:22 +0800 Subject: [PATCH] style: refactor keep-container --- source/css/common/basic.styl | 6 +++--- source/css/common/keep-theme.styl | 11 ++++++----- source/css/layout/_partial/empty-page.styl | 3 +-- source/css/layout/_partial/header.styl | 3 +-- source/css/layout/_partial/post-tools.styl | 3 ++- source/css/layout/_partial/tagcloud.styl | 2 +- source/css/layout/archive-content.styl | 2 +- source/css/layout/article-content.styl | 5 ++--- source/css/layout/category-content.styl | 2 +- source/css/layout/category-list.styl | 4 ++-- source/css/layout/home-content.styl | 2 +- source/css/layout/page.styl | 2 +- source/css/layout/tag-content.styl | 2 +- 13 files changed, 23 insertions(+), 24 deletions(-) diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 19d705c..9163430 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -89,7 +89,7 @@ a { text-decoration: none; color: var(--default-text-color); - i { + i, span { color: var(--default-text-color); } @@ -97,7 +97,7 @@ a { text-decoration: none !important; color: var(--primary-color); - i { + i, span { color: var(--primary-color); } } @@ -140,7 +140,7 @@ button { padding: 8px 16px; background: var(--background-color); - hover-style(1.08, 1.08); + hover-style(true, 1.06, 1.06); &:hover { color: var(--background-color); diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl index 109131e..d20dc0d 100644 --- a/source/css/common/keep-theme.styl +++ b/source/css/common/keep-theme.styl @@ -1,12 +1,12 @@ $keep-container-border-radius = 5px; -hover-style(scaleX, scaleY) { +hover-style(isTransform, scaleX, scaleY) { box-shadow: 2px 2px 6px var(--shadow-color); transition-t("transform", "0", "0.2", "linear"); &:hover { - if (hexo-config('style.hover.scale')) { - transform: scaleX(scaleX) scaleY(scaleY); + if (hexo-config('style.hover.scale') && isTransform) { + transform: scaleX(scaleX) scaleY(scaleX); } if (hexo-config('style.hover.shadow')) { @@ -16,7 +16,7 @@ hover-style(scaleX, scaleY) { } -keep-container(scaleX, scaleY, padding, marginBottomValue) { +keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) { padding: padding; border-radius: $keep-container-border-radius; box-sizing: border-box; @@ -35,13 +35,14 @@ keep-container(scaleX, scaleY, padding, marginBottomValue) { } - hover-style(scaleX, scaleY); + hover-style(isTransform, scaleX, scaleY); +keep-tablet() { padding: padding * 0.8; border-radius: $keep-container-border-radius * 0.8; } + +keep-mobile() { padding: padding * 0.6; border-radius: $keep-container-border-radius * 0.6; diff --git a/source/css/layout/_partial/empty-page.styl b/source/css/layout/_partial/empty-page.styl index d1d43eb..5d45e0e 100644 --- a/source/css/layout/_partial/empty-page.styl +++ b/source/css/layout/_partial/empty-page.styl @@ -5,7 +5,7 @@ $friend-link-item-border-radius = 6px; .empty-page-container { - keep-container(1.005, 1.01, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .empty-page-content { color: var(--default-text-color); @@ -63,7 +63,6 @@ $friend-link-item-border-radius = 6px; &:hover { box-shadow: 1px 1px 6px var(--shadow-color); - } .radius { diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index 6ce5e06..e8c376a 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -12,8 +12,7 @@ $menu-bar-line-height = 2.5px; background: var(--background-color); padding-top: $scroll-progress-bar-height; - - hover-style(1.02, 1.02); + hover-style(false, 0, 0); .header-content { position: relative; diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl index 0fb8a34..45bccd4 100644 --- a/source/css/layout/_partial/post-tools.styl +++ b/source/css/layout/_partial/post-tools.styl @@ -31,13 +31,14 @@ $li-margin-bottom = 12px; } } - hover-style(1.1, 1.1); &:last-child { margin-bottom: 0; } + hover-style(true, 1.06, 1.06); + &.page-aside-toggle { display: none; diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl index 17f0e61..3358153 100644 --- a/source/css/layout/_partial/tagcloud.styl +++ b/source/css/layout/_partial/tagcloud.styl @@ -1,6 +1,6 @@ .tagcloud-container { - keep-container(1.005, 1.01, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .tagcloud-content { diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 22a5586..ecdde4e 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -1,5 +1,5 @@ .archive-container { - keep-container(1.005, 1.01, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index 5e63870..245dc12 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -5,7 +5,7 @@ $article-title-font-size = 1.6rem; .article-content-container { - keep-container(1.008, 1.002, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .article-title { color: var(--second-text-color); @@ -116,7 +116,7 @@ $article-title-font-size = 1.6rem; height: 100%; box-sizing: border-box; - keep-container(1.08, 1.08, 10px, 0); + keep-container(true, 1.05, 1.05, 10px, 0); a { position: relative; @@ -175,7 +175,6 @@ $article-title-font-size = 1.6rem; .post-nav-title-item { - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index 2556b6d..5c4f309 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -2,7 +2,7 @@ $category-name-font-size = 1.6rem; .category-container { - keep-container(1.02, 1.02, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .category-name { color: var(--second-text-color); diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl index d87acd8..7503b98 100644 --- a/source/css/layout/category-list.styl +++ b/source/css/layout/category-list.styl @@ -1,13 +1,13 @@ .category-list-container { - keep-container(1.005, 1.01, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .category-list-content { .all-category-list { li.all-category-list-item { - + font-size: 1rem; margin-bottom: 15px; &:last-child { diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 6b0feb3..5624df8 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -7,7 +7,7 @@ .home-article-item { position: relative; - keep-container(1.02, 1.02, 28px, 38px); + keep-container(true, 1.02, 1.02, 28px, 38px); .top-icon { position: absolute; diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 2c6cf8d..468ea18 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -132,7 +132,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px; box-sizing: border-box; background: var(--background-color); - hover-style(1.02, 1.02); + hover-style(false, 0, 0); transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear"); diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index 9c608e6..23a33d4 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -2,7 +2,7 @@ $tag-name-font-size = 1.6rem; .tag-container { - keep-container(1.02, 1.02, 30px, 30px); + keep-container(false, 0, 0, 30px, 30px); .tag-name { color: var(--second-text-color);