style: CSS 样式优化
This commit is contained in:
parent
2f9168b270
commit
cc94bbba9f
|
@ -1,15 +1,18 @@
|
||||||
@require '../common/variables.styl'
|
@require '../common/variables.styl'
|
||||||
|
|
||||||
$article-meta-info-color = #aaa;
|
|
||||||
$article-meta-info-font-size = 12px;
|
$article-meta-info-font-size = 12px;
|
||||||
|
|
||||||
.article-meta-info {
|
.article-meta-info {
|
||||||
|
|
||||||
color: $article-meta-info-color;
|
color: $third-text-color;
|
||||||
font-size: $article-meta-info-font-size;
|
font-size: $article-meta-info-font-size;
|
||||||
|
|
||||||
.article-meta-item {
|
.article-meta-item {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-tags, .article-categories {
|
.article-tags, .article-categories {
|
||||||
|
@ -20,7 +23,7 @@ $article-meta-info-font-size = 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $article-meta-info-color;
|
color: $third-text-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
|
|
@ -1,12 +1,23 @@
|
||||||
|
@require '../common/variables.styl'
|
||||||
.footer {
|
.footer {
|
||||||
|
|
||||||
|
color: $third-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $third-text-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.info-container {
|
.info-container {
|
||||||
padding-bottom 10px
|
padding-bottom: 10px;
|
||||||
text-align center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
margin 5px 0
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -1,8 +1,8 @@
|
||||||
@require 'common/variables.styl'
|
@require 'common/variables.styl'
|
||||||
|
|
||||||
$archive-year-font-size = 24px;
|
$archive-year-font-size = 24px;
|
||||||
$archive-article-item-title-font-size = 16px;
|
$article-title-font-size = 16px;
|
||||||
$archive-article-date-font-size = 14px;
|
$article-date-font-size = 14px;
|
||||||
|
|
||||||
.archive-container {
|
.archive-container {
|
||||||
|
|
||||||
|
@ -25,7 +25,7 @@ $archive-article-date-font-size = 14px;
|
||||||
|
|
||||||
.article-item {
|
.article-item {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
font-size: $archive-article-item-title-font-size;
|
font-size: $article-title-font-size;
|
||||||
|
|
||||||
a.article-title {
|
a.article-title {
|
||||||
color: $normal-text-color;
|
color: $normal-text-color;
|
||||||
|
@ -36,7 +36,7 @@ $archive-article-date-font-size = 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-date {
|
.article-date {
|
||||||
font-size: $archive-article-date-font-size;
|
font-size: $article-date-font-size;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,9 +5,7 @@
|
||||||
.article-title {
|
.article-title {
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $second-text-color;
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -23,17 +21,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-content {
|
.article-content {
|
||||||
|
padding-bottom: 20px;
|
||||||
padding-bottom: 10px;
|
border-bottom: 1px solid $border-color;
|
||||||
border-bottom: 1px solid #f2f2f2;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-nav {
|
.article-nav {
|
||||||
|
|
||||||
height 40px
|
height 40px
|
||||||
margin 30px 0
|
margin 40px 0
|
||||||
|
|
||||||
.article-prev {
|
.article-prev {
|
||||||
float left
|
float left
|
||||||
|
|
|
@ -1,5 +1,25 @@
|
||||||
|
// ==================================
|
||||||
|
// ils-x variables
|
||||||
|
// ==================================
|
||||||
|
|
||||||
|
// 头部默认高度
|
||||||
|
$header-height = 100px
|
||||||
|
|
||||||
|
// 头部收缩高度
|
||||||
|
$header-shrink-height = 60px
|
||||||
|
|
||||||
|
// 中间内容区域宽度
|
||||||
|
$main-content-width = 70%
|
||||||
|
|
||||||
|
// z-index
|
||||||
|
$z-index-1 = 1001
|
||||||
|
$z-index-2 = 1002
|
||||||
|
$z-index-3 = 1003
|
||||||
|
$z-index-4 = 1004
|
||||||
|
$z-index-5 = 1005
|
||||||
|
|
||||||
// 主题颜色
|
// 主题颜色
|
||||||
$primary-color = #5ace11
|
$primary-color = #ce3e29
|
||||||
|
|
||||||
// 第一文本颜色
|
// 第一文本颜色
|
||||||
$first-text-color = #2c3e50
|
$first-text-color = #2c3e50
|
||||||
|
@ -30,28 +50,4 @@ $default-font-size = 14px
|
||||||
$default-font-line-height = 20px
|
$default-font-line-height = 20px
|
||||||
|
|
||||||
// 默认字体加粗程度
|
// 默认字体加粗程度
|
||||||
$default-font-weight = 400
|
$default-font-weight = 400
|
||||||
|
|
||||||
// 超链接a标签颜色
|
|
||||||
$a-color = #666
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ==================================
|
|
||||||
// ils-x variables
|
|
||||||
// ==================================
|
|
||||||
|
|
||||||
// 头部默认高度
|
|
||||||
$header-height = 100px
|
|
||||||
|
|
||||||
// 头部收缩高度
|
|
||||||
$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
|
|
|
@ -24,14 +24,6 @@
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
&::before {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $second-text-color;
|
color: $second-text-color;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
z-index: 999;
|
z-index: $z-index-5;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -24,8 +24,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-bottom {
|
.page-bottom {
|
||||||
|
|
Loading…
Reference in New Issue