style: CSS 样式优化
This commit is contained in:
XPoet
parent
b762f82886
commit
2f9168b270
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
<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 %>
|
||||
</a>
|
||||
|
||||
<ul class="menu-list vertical-center">
|
||||
<ul class="menu-list">
|
||||
<% for (let i in theme.menu) { %>
|
||||
<li class="menu-item">
|
||||
<a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
|
||||
|
|
@ -24,16 +24,19 @@
|
|||
<% } %>
|
||||
</ul>
|
||||
|
||||
<div class="menu-bar vertical-center">
|
||||
<i class="fa fa-bars"></i>
|
||||
<div class="menu-bar">
|
||||
<div class="menu-bar-middle"></div>
|
||||
<!--<i class="fa fa-bars"></i>-->
|
||||
<!--<i class="fa fa-remove"></i>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-drawer">
|
||||
<ul class="drawer-menu-list">
|
||||
<% 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' : '' %>">
|
||||
<a href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
|
||||
<li class="drawer-menu-item">
|
||||
<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>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
|
|||
color: $article-meta-info-color;
|
||||
|
||||
&:hover {
|
||||
color: $a-hover-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@require "../common/variables.styl"
|
||||
@import "../common/root.styl"
|
||||
|
||||
.header-wrapper {
|
||||
width: 100%;
|
||||
|
|
@ -12,28 +11,27 @@
|
|||
transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: $main-content-width;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.5s ease;
|
||||
z-index: 999;
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
z-index: $z-index-5;
|
||||
|
||||
.logo-title {
|
||||
left: 0;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
letter-spacing: 1px;
|
||||
color: $first-text-color;
|
||||
transform-origin: left center;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
|
||||
.menu-list {
|
||||
right: 0;
|
||||
|
||||
.menu-item {
|
||||
float: left;
|
||||
|
|
@ -44,10 +42,13 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
|
||||
&:hover {
|
||||
|
||||
color: $normal-text-color;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: $a-hover-color;
|
||||
background: $primary-color;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,8 +66,8 @@
|
|||
|
||||
|
||||
.active {
|
||||
color: #555;
|
||||
font-weight: 700;
|
||||
color: $second-text-color;
|
||||
font-weight: bold;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&::after {
|
||||
|
|
@ -77,7 +78,7 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: $a-hover-color;
|
||||
background: $primary-color;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
|
@ -87,12 +88,41 @@
|
|||
|
||||
|
||||
.menu-bar {
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
display: none;
|
||||
position: relative;
|
||||
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;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
background: white;
|
||||
background: $background-color;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 998;
|
||||
z-index: $z-index-2;
|
||||
|
||||
.drawer-menu-list {
|
||||
display: flex;
|
||||
|
|
@ -116,24 +146,33 @@
|
|||
list-style-type: none;
|
||||
|
||||
.drawer-menu-item {
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
padding: 0 30px;
|
||||
border-radius: 22px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
font-size: 14px;
|
||||
color: #9ca3ad;
|
||||
line-height: 34px;
|
||||
color: $normal-text-color;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $second-text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.drawer-menu-active {
|
||||
background: $a-hover-color;
|
||||
color: white;
|
||||
.active {
|
||||
border: 1px solid $primary-color;
|
||||
color: $second-text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -143,10 +182,10 @@
|
|||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
z-index: $z-index-1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -154,26 +193,28 @@
|
|||
|
||||
.header-drawer-show {
|
||||
|
||||
.header-content {
|
||||
.menu-bar {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
.menu-bar-middle {
|
||||
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
background: #2c3e50;
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
background: #2c3e50;
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-drawer {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
|
||||
.window-mask {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
|
@ -183,22 +224,26 @@
|
|||
|
||||
|
||||
.header-wrapper-shrink {
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
background: $background-color;
|
||||
box-shadow: 0 1px 2px $border-color;
|
||||
|
||||
.header-content {
|
||||
|
||||
.logo-title {
|
||||
transform: scale(0.86);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
|
||||
.menu-item {
|
||||
a:hover {
|
||||
&::after {
|
||||
bottom: -22px;
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.active::after {
|
||||
bottom: -22px;
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ $keyword-red = #ff2a2a;
|
|||
z-index: 1001;
|
||||
|
||||
.search-icon, .popup-btn-close {
|
||||
color: $default-font-color;
|
||||
color: $normal-text-color;
|
||||
font-size: $icon-size;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.vinput {
|
||||
|
||||
&:focus {
|
||||
border-bottom: 1px solid $a-hover-color !important;
|
||||
border-bottom: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
.col-80 {
|
||||
button.vsubmit {
|
||||
background: transparent !important;
|
||||
color: $default-font-color !important;
|
||||
border: 1px solid $default-font-color !important;
|
||||
color: $normal-text-color !important;
|
||||
border: 1px solid $normal-text-color !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $a-hover-color !important;
|
||||
border: 1px solid $a-hover-color !important;
|
||||
color: $primary-color !important;
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
.vnick {
|
||||
|
||||
&::before {
|
||||
background: $a-hover-color !important;
|
||||
background: $primary-color !important;
|
||||
}
|
||||
color: $a-hover-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $archive-article-date-font-size = 14px;
|
|||
.archive-item-header {
|
||||
.archive-year {
|
||||
font-size: $archive-year-font-size;
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-weight: 600;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
|
@ -28,10 +28,10 @@ $archive-article-date-font-size = 14px;
|
|||
font-size: $archive-article-item-title-font-size;
|
||||
|
||||
a.article-title {
|
||||
color: $archive-article-title-color;
|
||||
color: $normal-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $a-hover-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.category-container {
|
||||
.category-name {
|
||||
color: $article-title-color
|
||||
color: $second-text-color
|
||||
font-size 20px
|
||||
font-weight 600
|
||||
margin-bottom 10px
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $default-font-color;
|
||||
color: $normal-text-color;
|
||||
background: $background-color;
|
||||
font-size: $default-font-size;
|
||||
font-family: $default-font-family;
|
||||
font-weight: $default-font-weight;
|
||||
line-height: $default-font-line-height;
|
||||
-webkit-font-smoothing antialiased;
|
||||
}
|
||||
|
||||
ul, li, ol {
|
||||
|
|
@ -31,11 +33,11 @@ p {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $a-color;
|
||||
color: $normal-text-color;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: $a-hover-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -46,14 +48,14 @@ a:hover, a:active {
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: $button-color;
|
||||
border: 1px solid $button-border-color;
|
||||
border: 1px solid $border-color;
|
||||
white-space: nowrap;
|
||||
border-radius: 10em;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
&:hover {
|
||||
color: $a-hover-color;
|
||||
border: 1px solid $a-hover-color;
|
||||
color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +64,7 @@ a:hover, a:active {
|
|||
.article-title-hover-animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
border-bottom: none;
|
||||
line-height: 1.3;
|
||||
vertical-align: top;
|
||||
|
|
@ -74,7 +76,7 @@ a:hover, a:active {
|
|||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: $article-title-color;
|
||||
background-color: $second-text-color;
|
||||
visibility: hidden;
|
||||
transform: scaleX(0);
|
||||
the-transition();
|
||||
|
|
@ -100,6 +102,6 @@ clearfix() {
|
|||
}
|
||||
|
||||
::selection {
|
||||
background: $a-hover-color;
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
.markdown {
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid $default-font-color;
|
||||
border-left: 5px solid $normal-text-color;
|
||||
margin: 0;
|
||||
padding: 0 0 0 10px;
|
||||
background: $border-color;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
|
||||
a {
|
||||
color: $a-hover-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -21,39 +21,39 @@
|
|||
|
||||
|
||||
h1 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 2.2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 2em;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 1.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
h4 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 1.6em;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
// 边框颜色
|
||||
$border-color = #f0f0f0
|
||||
|
||||
// 网站LOGO标题颜色
|
||||
$logo-title-color = #565656
|
||||
|
||||
// 网站LOGO描述颜色
|
||||
$logo-description-color = #666
|
||||
|
||||
// 网站LOGO描述字体大小
|
||||
$logo-description-font-size = #666
|
||||
$border-color = #ccc
|
||||
|
||||
// 默认字体样式
|
||||
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
|
||||
|
|
@ -26,29 +32,10 @@ $default-font-line-height = 20px
|
|||
// 默认字体加粗程度
|
||||
$default-font-weight = 400
|
||||
|
||||
// 默认字体颜色
|
||||
$default-font-color = #787878
|
||||
|
||||
// 文章标题颜色
|
||||
$article-title-color = #666
|
||||
|
||||
// 归档文章标题颜色
|
||||
$archive-article-title-color = #8f8f8f
|
||||
|
||||
// 导航项选中的颜色
|
||||
$nav-selected-color = #4a4a4a
|
||||
|
||||
// 超链接a标签颜色
|
||||
$a-color = #666
|
||||
|
||||
// 超链接a标签悬浮颜色
|
||||
$a-hover-color = #5ace11
|
||||
|
||||
// 按钮颜色
|
||||
$button-color = $default-font-color
|
||||
|
||||
// 按钮边框颜色
|
||||
$button-border-color = $default-font-color
|
||||
|
||||
// ==================================
|
||||
// ils-x variables
|
||||
|
|
@ -62,3 +49,9 @@ $header-shrink-height = 60px
|
|||
|
||||
// 中间内容区域宽度
|
||||
$main-content-width = 70%
|
||||
|
||||
$z-index-1 = 1001
|
||||
$z-index-2 = 1002
|
||||
$z-index-3 = 1003
|
||||
$z-index-4 = 1004
|
||||
$z-index-5 = 1005
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
left: -16px;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: $a-hover-color;
|
||||
background: $primary-color;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
|
||||
|
||||
font-weight: 600;
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $article-title-color;
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.tag-container {
|
||||
.tag-name {
|
||||
color: $article-title-color
|
||||
color: $second-text-color
|
||||
font-size 20px
|
||||
font-weight 600
|
||||
margin-bottom 10px
|
||||
|
|
|
|||
Loading…
Reference in New Issue