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: refactor keep-container

This commit is contained in:
XPoet 2021-01-21 18:23:22 +08:00
parent 89aba08e34
commit ae780fb0a8
13 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/css/common/basic.styl
View File

@ -89,7 +89,7 @@ a {
text-decoration: none; text-decoration: none;
color: var(--default-text-color); color: var(--default-text-color);
i { i, span {
color: var(--default-text-color); color: var(--default-text-color);
} }
@ -97,7 +97,7 @@ a {
text-decoration: none !important; text-decoration: none !important;
color: var(--primary-color); color: var(--primary-color);
i { i, span {
color: var(--primary-color); color: var(--primary-color);
} }
} }
@ -140,7 +140,7 @@ button {
padding: 8px 16px; padding: 8px 16px;
background: var(--background-color); background: var(--background-color);
hover-style(1.08, 1.08); hover-style(true, 1.06, 1.06);
&:hover { &:hover {
color: var(--background-color); color: var(--background-color);

11
source/css/common/keep-theme.styl
View File

@ -1,12 +1,12 @@
$keep-container-border-radius = 5px; $keep-container-border-radius = 5px;
hover-style(scaleX, scaleY) { hover-style(isTransform, scaleX, scaleY) {
box-shadow: 2px 2px 6px var(--shadow-color); box-shadow: 2px 2px 6px var(--shadow-color);
transition-t("transform", "0", "0.2", "linear"); transition-t("transform", "0", "0.2", "linear");
&:hover { &:hover {
if (hexo-config('style.hover.scale')) { if (hexo-config('style.hover.scale') && isTransform) {
transform: scaleX(scaleX) scaleY(scaleY); transform: scaleX(scaleX) scaleY(scaleX);
} }
if (hexo-config('style.hover.shadow')) { 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; padding: padding;
border-radius: $keep-container-border-radius; border-radius: $keep-container-border-radius;
box-sizing: border-box; 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() { +keep-tablet() {
padding: padding * 0.8; padding: padding * 0.8;
border-radius: $keep-container-border-radius * 0.8; border-radius: $keep-container-border-radius * 0.8;
} }
+keep-mobile() { +keep-mobile() {
padding: padding * 0.6; padding: padding * 0.6;
border-radius: $keep-container-border-radius * 0.6; border-radius: $keep-container-border-radius * 0.6;

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

@ -5,7 +5,7 @@ $friend-link-item-border-radius = 6px;
.empty-page-container { .empty-page-container {
keep-container(1.005, 1.01, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.empty-page-content { .empty-page-content {
color: var(--default-text-color); color: var(--default-text-color);
@ -63,7 +63,6 @@ $friend-link-item-border-radius = 6px;
&:hover { &:hover {
box-shadow: 1px 1px 6px var(--shadow-color); box-shadow: 1px 1px 6px var(--shadow-color);
} }
.radius { .radius {

3
source/css/layout/_partial/header.styl
View File

@ -12,8 +12,7 @@ $menu-bar-line-height = 2.5px;
background: var(--background-color); background: var(--background-color);
padding-top: $scroll-progress-bar-height; padding-top: $scroll-progress-bar-height;
hover-style(false, 0, 0);
hover-style(1.02, 1.02);
.header-content { .header-content {
position: relative; position: relative;

3
source/css/layout/_partial/post-tools.styl
View File

@ -31,13 +31,14 @@ $li-margin-bottom = 12px;
} }
} }
hover-style(1.1, 1.1);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
hover-style(true, 1.06, 1.06);
&.page-aside-toggle { &.page-aside-toggle {
display: none; display: none;

2
source/css/layout/_partial/tagcloud.styl
View File

@ -1,6 +1,6 @@
.tagcloud-container { .tagcloud-container {
keep-container(1.005, 1.01, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.tagcloud-content { .tagcloud-content {

2
source/css/layout/archive-content.styl
View File

@ -1,5 +1,5 @@
.archive-container { .archive-container {
keep-container(1.005, 1.01, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
} }

5
source/css/layout/article-content.styl
View File

@ -5,7 +5,7 @@ $article-title-font-size = 1.6rem;
.article-content-container { .article-content-container {
keep-container(1.008, 1.002, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.article-title { .article-title {
color: var(--second-text-color); color: var(--second-text-color);
@ -116,7 +116,7 @@ $article-title-font-size = 1.6rem;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
keep-container(1.08, 1.08, 10px, 0); keep-container(true, 1.05, 1.05, 10px, 0);
a { a {
position: relative; position: relative;
@ -175,7 +175,6 @@ $article-title-font-size = 1.6rem;
.post-nav-title-item { .post-nav-title-item {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

2
source/css/layout/category-content.styl
View File

@ -2,7 +2,7 @@ $category-name-font-size = 1.6rem;
.category-container { .category-container {
keep-container(1.02, 1.02, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.category-name { .category-name {
color: var(--second-text-color); color: var(--second-text-color);

4
source/css/layout/category-list.styl
View File

@ -1,13 +1,13 @@
.category-list-container { .category-list-container {
keep-container(1.005, 1.01, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.category-list-content { .category-list-content {
.all-category-list { .all-category-list {
li.all-category-list-item { li.all-category-list-item {
font-size: 1rem;
margin-bottom: 15px; margin-bottom: 15px;
&:last-child { &:last-child {

2
source/css/layout/home-content.styl
View File

@ -7,7 +7,7 @@
.home-article-item { .home-article-item {
position: relative; position: relative;
keep-container(1.02, 1.02, 28px, 38px); keep-container(true, 1.02, 1.02, 28px, 38px);
.top-icon { .top-icon {
position: absolute; position: absolute;

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

@ -132,7 +132,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
box-sizing: border-box; box-sizing: border-box;
background: var(--background-color); 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"); transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear");

2
source/css/layout/tag-content.styl
View File

@ -2,7 +2,7 @@ $tag-name-font-size = 1.6rem;
.tag-container { .tag-container {
keep-container(1.02, 1.02, 30px, 30px); keep-container(false, 0, 0, 30px, 30px);
.tag-name { .tag-name {
color: var(--second-text-color); color: var(--second-text-color);