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: CSS 样式优化

This commit is contained in:
XPoet 2020-04-01 22:42:24 +08:00
parent b762f82886
commit 2f9168b270
13 changed files with 166 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
layout/_partial/header.ejs
View File

@ -2,11 +2,11 @@
<div class="header-content"> <div class="header-content">
<a class="logo-title vertical-center article-title-hover-animation" href="/"> <a class="logo-title article-title-hover-animation" href="/">
<%= config.title %> <%= config.title %>
</a> </a>
<ul class="menu-list vertical-center"> <ul class="menu-list">
<% for (let i in theme.menu) { %> <% for (let i in theme.menu) { %>
<li class="menu-item"> <li class="menu-item">
<a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>" <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
@ -24,16 +24,19 @@
<% } %> <% } %>
</ul> </ul>
<div class="menu-bar vertical-center"> <div class="menu-bar">
<i class="fa fa-bars"></i> <div class="menu-bar-middle"></div>
<!--<i class="fa fa-bars"></i>-->
<!--<i class="fa fa-remove"></i>-->
</div> </div>
</div> </div>
<div class="header-drawer"> <div class="header-drawer">
<ul class="drawer-menu-list"> <ul class="drawer-menu-list">
<% for (let i in theme.menu) { %> <% for (let i in theme.menu) { %>
<li class="drawer-menu-item <%- isInHomePaging(page.path, theme.menu[i]) ? 'drawer-menu-active' : is_current(theme.menu[i]) ? 'drawer-menu-active' : '' %>"> <li class="drawer-menu-item">
<a href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a> <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()).toUpperCase() %></a>
</li> </li>
<% } %> <% } %>
</ul> </ul>

2
source/css/layout/_partial/article-meta-info.styl
View File

@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
color: $article-meta-info-color; color: $article-meta-info-color;
&:hover { &:hover {
color: $a-hover-color; color: $primary-color;
} }
} }
} }

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

@ -1,5 +1,4 @@
@require "../common/variables.styl" @require "../common/variables.styl"
@import "../common/root.styl"
.header-wrapper { .header-wrapper {
width: 100%; width: 100%;
@ -12,28 +11,27 @@
transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1); transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
.header-content { .header-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: $main-content-width; width: $main-content-width;
height: 100%; height: 100%;
position: relative; position: relative;
transition: transform 0.5s ease; transition: transform 0.5s ease;
z-index: 999; z-index: $z-index-5;
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.logo-title { .logo-title {
left: 0;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #555; letter-spacing: 1px;
color: $first-text-color;
transform-origin: left center;
transition: all 0.5s ease;
} }
.menu-list { .menu-list {
right: 0;
.menu-item { .menu-item {
float: left; float: left;
@ -44,10 +42,13 @@
margin-left: 0; margin-left: 0;
} }
a { a {
&:hover { &:hover {
color: $normal-text-color;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -56,7 +57,7 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: $a-hover-color; background: $primary-color;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
} }
@ -65,8 +66,8 @@
.active { .active {
color: #555; color: $second-text-color;
font-weight: 700; font-weight: bold;
transition: all 0.5s ease; transition: all 0.5s ease;
&::after { &::after {
@ -77,7 +78,7 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: $a-hover-color; background: $primary-color;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
} }
@ -87,12 +88,41 @@
.menu-bar { .menu-bar {
right: 0;
font-size: 20px;
display: none; display: none;
position: relative;
cursor: pointer; cursor: pointer;
}
.menu-bar-middle {
width: 18px;
height: 2px;
margin: 6px 0;
position: relative;
background: $normal-text-color;
transition: all 0.3s ease;
&::before {
content: '';
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 2px;
background: $normal-text-color;
transition: all 0.3s ease;
}
&::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: $normal-text-color;
transition: all 0.3s ease;
}
}
}
} }
@ -104,9 +134,9 @@
left: 0; left: 0;
transform: scaleY(0); transform: scaleY(0);
transform-origin: top; transform-origin: top;
background: white; background: $background-color;
transition: all 0.5s ease; transition: all 0.5s ease;
z-index: 998; z-index: $z-index-2;
.drawer-menu-list { .drawer-menu-list {
display: flex; display: flex;
@ -116,23 +146,32 @@
list-style-type: none; list-style-type: none;
.drawer-menu-item { .drawer-menu-item {
display: block;
margin: 8px auto; a {
padding: 0 30px; display: block;
border-radius: 22px; margin: 8px auto;
text-align: center; padding: 0 20px;
line-height: 42px; border-radius: 20px;
font-size: 14px; text-align: center;
color: #9ca3ad; line-height: 34px;
transition: all 0.5s ease; color: $normal-text-color;
transition: all 0.5s ease;
&:hover {
color: $second-text-color;
font-weight: bold;
}
}
.active {
border: 1px solid $primary-color;
color: $second-text-color;
font-weight: bold;
}
} }
.drawer-menu-active {
background: $a-hover-color;
color: white;
}
} }
} }
@ -143,10 +182,10 @@
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
z-index: 1; z-index: $z-index-1;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: all 0.2s ease; transition: all 0.3s ease;
} }
@ -154,26 +193,28 @@
.header-drawer-show { .header-drawer-show {
.menu-bar { .header-content {
background: rgba(0, 0, 0, 0); .menu-bar {
.menu-bar-middle {
&::before { background: transparent;
background: #2c3e50;
transform: translateY(6px) rotate(45deg);
}
&::after { &::before {
background: #2c3e50; transform: translateY(6px) rotate(45deg);
transform: translateY(-6px) rotate(-45deg); }
&::after {
transform: translateY(-6px) rotate(-45deg);
}
}
} }
} }
.header-drawer { .header-drawer {
transform: scaleY(1); transform: scaleY(1);
} }
.window-mask { .window-mask {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
@ -183,22 +224,26 @@
.header-wrapper-shrink { .header-wrapper-shrink {
background: #fff; background: $background-color;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px $border-color;
.header-content { .header-content {
.logo-title {
transform: scale(0.86);
}
.menu-list { .menu-list {
.menu-item { .menu-item {
a:hover { a:hover {
&::after { &::after {
bottom: -22px; bottom: -20px;
} }
} }
.active::after { .active::after {
bottom: -22px; bottom: -20px;
} }
} }

2
source/css/layout/_partial/local-search.styl
View File

@ -27,7 +27,7 @@ $keyword-red = #ff2a2a;
z-index: 1001; z-index: 1001;
.search-icon, .popup-btn-close { .search-icon, .popup-btn-close {
color: $default-font-color; color: $normal-text-color;
font-size: $icon-size; font-size: $icon-size;
padding: 0 10px; padding: 0 10px;
} }

14
source/css/layout/_partial/valine.styl
View File

@ -8,7 +8,7 @@
.vinput { .vinput {
&:focus { &:focus {
border-bottom: 1px solid $a-hover-color !important; border-bottom: 1px solid $primary-color !important;
} }
} }
} }
@ -22,13 +22,13 @@
.col-80 { .col-80 {
button.vsubmit { button.vsubmit {
background: transparent !important; background: transparent !important;
color: $default-font-color !important; color: $normal-text-color !important;
border: 1px solid $default-font-color !important; border: 1px solid $normal-text-color !important;
&:hover { &:hover {
color: $a-hover-color !important; color: $primary-color !important;
border: 1px solid $a-hover-color !important; border: 1px solid $primary-color !important;
} }
} }
@ -44,9 +44,9 @@
.vnick { .vnick {
&::before { &::before {
background: $a-hover-color !important; background: $primary-color !important;
} }
color: $a-hover-color; color: $primary-color;
} }
} }
} }

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

@ -12,7 +12,7 @@ $archive-article-date-font-size = 14px;
.archive-item-header { .archive-item-header {
.archive-year { .archive-year {
font-size: $archive-year-font-size; font-size: $archive-year-font-size;
color: $article-title-color; color: $second-text-color;
font-weight: 600; font-weight: 600;
margin-right: 20px; margin-right: 20px;
} }
@ -28,10 +28,10 @@ $archive-article-date-font-size = 14px;
font-size: $archive-article-item-title-font-size; font-size: $archive-article-item-title-font-size;
a.article-title { a.article-title {
color: $archive-article-title-color; color: $normal-text-color;
&:hover { &:hover {
color: $a-hover-color; color: $primary-color;
} }
} }

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

@ -7,13 +7,13 @@
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
color: $article-title-color; color: $second-text-color;
font-size: 22px; font-size: 22px;
margin: 0; margin: 0;
} }
a { a {
color: $article-title-color; color: $second-text-color;
} }
} }

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

@ -2,7 +2,7 @@
.category-container { .category-container {
.category-name { .category-name {
color: $article-title-color color: $second-text-color
font-size 20px font-size 20px
font-weight 600 font-weight 600
margin-bottom 10px margin-bottom 10px

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

@ -4,11 +4,13 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $default-font-color; color: $normal-text-color;
background: $background-color; background: $background-color;
font-size: $default-font-size; font-size: $default-font-size;
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
line-height: $default-font-line-height;
-webkit-font-smoothing antialiased;
} }
ul, li, ol { ul, li, ol {
@ -31,11 +33,11 @@ p {
a { a {
text-decoration: none; text-decoration: none;
color: $a-color; color: $normal-text-color;
} }
a:hover, a:active { a:hover, a:active {
color: $a-hover-color; color: $primary-color;
} }
@ -46,14 +48,14 @@ a:hover, a:active {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: $button-color; color: $button-color;
border: 1px solid $button-border-color; border: 1px solid $border-color;
white-space: nowrap; white-space: nowrap;
border-radius: 10em; border-radius: 10em;
padding: 0.5em 1em; padding: 0.5em 1em;
&:hover { &:hover {
color: $a-hover-color; color: $primary-color;
border: 1px solid $a-hover-color; border: 1px solid $primary-color;
} }
} }
@ -62,7 +64,7 @@ a:hover, a:active {
.article-title-hover-animation { .article-title-hover-animation {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: $article-title-color; color: $second-text-color;
border-bottom: none; border-bottom: none;
line-height: 1.3; line-height: 1.3;
vertical-align: top; vertical-align: top;
@ -74,7 +76,7 @@ a:hover, a:active {
height: 2px; height: 2px;
bottom: -4px; bottom: -4px;
left: 0; left: 0;
background-color: $article-title-color; background-color: $second-text-color;
visibility: hidden; visibility: hidden;
transform: scaleX(0); transform: scaleX(0);
the-transition(); the-transition();
@ -100,6 +102,6 @@ clearfix() {
} }
::selection { ::selection {
background: $a-hover-color; background: $primary-color;
color: #fff; color: #fff;
} }

16
source/css/layout/common/markdown.styl
View File

@ -3,7 +3,7 @@
.markdown { .markdown {
blockquote { blockquote {
border-left: 5px solid $default-font-color; border-left: 5px solid $normal-text-color;
margin: 0; margin: 0;
padding: 0 0 0 10px; padding: 0 0 0 10px;
background: $border-color; background: $border-color;
@ -11,7 +11,7 @@
a { a {
color: $a-hover-color; color: $primary-color;
} }
@ -21,39 +21,39 @@
h1 { h1 {
color: $article-title-color; color: $second-text-color;
font-size: 2.2em; font-size: 2.2em;
font-weight: 700; font-weight: 700;
} }
h2 { h2 {
color: $article-title-color; color: $second-text-color;
font-size: 2em; font-size: 2em;
font-weight: 650; font-weight: 650;
} }
h3 { h3 {
color: $article-title-color; color: $second-text-color;
font-size: 1.8em; font-size: 1.8em;
font-weight: 600; font-weight: 600;
} }
h4 { h4 {
color: $article-title-color; color: $second-text-color;
font-size: 1.6em; font-size: 1.6em;
font-weight: 550; font-weight: 550;
} }
h5 { h5 {
color: $article-title-color; color: $second-text-color;
font-size: 1.4em; font-size: 1.4em;
font-weight: 500; font-weight: 500;
} }
h6 { h6 {
color: $article-title-color; color: $second-text-color;
font-size: 1.2em; font-size: 1.2em;
font-weight: 500; font-weight: 500;
} }

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

@ -1,17 +1,23 @@
// 主题颜色
$primary-color = #5ace11
// 第一文本颜色
$first-text-color = #2c3e50
// 第二文本颜色
$second-text-color = #525e6b
// 第三文本颜色
$third-text-color = #9ca3ad
// 通用文本颜色（默认字体颜色）
$normal-text-color = #616161
// 背景颜色 // 背景颜色
$background-color = #fff $background-color = #fff
// 边框颜色 // 边框颜色
$border-color = #f0f0f0 $border-color = #ccc
// 网站LOGO标题颜色
$logo-title-color = #565656
// 网站LOGO描述颜色
$logo-description-color = #666
// 网站LOGO描述字体大小
$logo-description-font-size = #666
// 默认字体样式 // 默认字体样式
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei' //$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
@ -26,29 +32,10 @@ $default-font-line-height = 20px
// 默认字体加粗程度 // 默认字体加粗程度
$default-font-weight = 400 $default-font-weight = 400
// 默认字体颜色
$default-font-color = #787878
// 文章标题颜色
$article-title-color = #666
// 归档文章标题颜色
$archive-article-title-color = #8f8f8f
// 导航项选中的颜色
$nav-selected-color = #4a4a4a
// 超链接a标签颜色 // 超链接a标签颜色
$a-color = #666 $a-color = #666
// 超链接a标签悬浮颜色
$a-hover-color = #5ace11
// 按钮颜色
$button-color = $default-font-color
// 按钮边框颜色
$button-border-color = $default-font-color
// ================================== // ==================================
// ils-x variables // ils-x variables
@ -61,4 +48,10 @@ $header-height = 100px
$header-shrink-height = 60px $header-shrink-height = 60px
// 中间内容区域宽度 // 中间内容区域宽度
$main-content-width = 70% $main-content-width = 70%
$z-index-1 = 1001
$z-index-2 = 1002
$z-index-3 = 1003
$z-index-4 = 1004
$z-index-5 = 1005

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

@ -20,7 +20,7 @@
left: -16px; left: -16px;
width: 2px; width: 2px;
height: 20px; height: 20px;
background: $a-hover-color; background: $primary-color;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@ -33,12 +33,12 @@
font-weight: 600; font-weight: 600;
color: $article-title-color; color: $second-text-color;
font-size: 22px; font-size: 22px;
margin: 0; margin: 0;
a { a {
color: $article-title-color; color: $second-text-color;
} }
} }

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

@ -2,7 +2,7 @@
.tag-container { .tag-container {
.tag-name { .tag-name {
color: $article-title-color color: $second-text-color
font-size 20px font-size 20px
font-weight 600 font-weight 600
margin-bottom 10px margin-bottom 10px