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

View File

@ -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>

View File

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

View File

@ -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,23 +146,32 @@
list-style-type: none;
.drawer-menu-item {
display: block;
margin: 8px auto;
padding: 0 30px;
border-radius: 22px;
text-align: center;
line-height: 42px;
font-size: 14px;
color: #9ca3ad;
transition: all 0.5s ease;
a {
display: block;
margin: 8px auto;
padding: 0 20px;
border-radius: 20px;
text-align: center;
line-height: 34px;
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%;
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 {
.menu-bar {
background: rgba(0, 0, 0, 0);
.header-content {
.menu-bar {
.menu-bar-middle {
&::before {
background: #2c3e50;
transform: translateY(6px) rotate(45deg);
}
background: transparent;
&::after {
background: #2c3e50;
transform: translateY(-6px) rotate(-45deg);
&::before {
transform: translateY(6px) rotate(45deg);
}
&::after {
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;
}
}

View File

@ -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;
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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

View File

@ -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;
}

View File

@ -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;
}

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
//
$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

View File

@ -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;
}
}

View File

@ -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