This commit is contained in:
Van
File diff suppressed because one or more lines are too long
@@ -30,7 +30,7 @@
|
||||
@import "icon";
|
||||
@import "vditor/src/assets/scss/classic";
|
||||
|
||||
body {
|
||||
.body--gray {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
@@ -49,18 +49,80 @@ a:active, a:focus, a:hover {
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background-color: #eb5055
|
||||
background-color: #eb5055;
|
||||
}
|
||||
|
||||
.content-reset {
|
||||
font-size: 14px;
|
||||
.b3-solo-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ft__gray {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.ft__red {
|
||||
color: #eb5055;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
transition: all .3s;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #6fa3ef;
|
||||
border-radius: 12px;
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
color: #5f5f5f;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
&--1 {
|
||||
background: #ff9800;
|
||||
}
|
||||
&--2 {
|
||||
background: #46c47c;
|
||||
}
|
||||
&--3 {
|
||||
background: #eb5055;
|
||||
}
|
||||
&--4 {
|
||||
background: #db4437;
|
||||
}
|
||||
&--5 {
|
||||
background: #1b95e0;
|
||||
}
|
||||
&--6 {
|
||||
background: #fdc200;
|
||||
}
|
||||
&--7 {
|
||||
background: #4caf50;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1025px;
|
||||
width: 1024px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
&--min {
|
||||
animation: fade-in;
|
||||
animation-duration: .5s;
|
||||
padding-top: 115px;
|
||||
max-width: 900px;
|
||||
}
|
||||
&--miner {
|
||||
animation: fade-in;
|
||||
animation-duration: .5s;
|
||||
padding-top: 115px;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -90,6 +152,9 @@ a:active, a:focus, a:hover {
|
||||
float: right;
|
||||
a {
|
||||
margin: 0 15px;
|
||||
&.current {
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,6 +201,7 @@ a:active, a:focus, a:hover {
|
||||
.footer {
|
||||
background-color: #fff;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
&__border {
|
||||
border-bottom: 1px solid rgba(184, 197, 214, .2);
|
||||
@@ -165,16 +231,16 @@ a:active, a:focus, a:hover {
|
||||
.wrapper {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5f5f5f;
|
||||
&:hover {
|
||||
color: #313131;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-list {
|
||||
animation: fade-in;
|
||||
animation-duration: .5s;
|
||||
padding-top: 95px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 33.3333%;
|
||||
@@ -244,6 +310,8 @@ a:active, a:focus, a:hover {
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 2px;
|
||||
height: 44px;
|
||||
a {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
@@ -254,8 +322,13 @@ a:active, a:focus, a:hover {
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
margin-bottom: 2px;
|
||||
height: 44px;
|
||||
}
|
||||
sup {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
top: -33px;
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,4 +369,283 @@ a:active, a:focus, a:hover {
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
&__fix {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 48px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
background-color: #fff;
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
&--unpinned {
|
||||
animation-name: unpinned;
|
||||
}
|
||||
&--pinned {
|
||||
animation-name: pinned;
|
||||
}
|
||||
|
||||
@keyframes unpinned {
|
||||
0% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(48px)
|
||||
}
|
||||
}
|
||||
@keyframes pinned {
|
||||
0% {
|
||||
transform: translateY(48px)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__share {
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
&__code {
|
||||
position: relative;
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
float: right;
|
||||
a {
|
||||
margin-left: 20px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&__title {
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
color: #222;
|
||||
}
|
||||
sup {
|
||||
font-weight: normal;
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
&__meta {
|
||||
font-size: 12px;
|
||||
margin: 5px 0 15px;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
.tag--0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding: 20px 0 40px;
|
||||
|
||||
&-mid {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
padding-bottom: 10px;
|
||||
color: #5f5f5f;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&__toc {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
max-width: 200px;
|
||||
border-left: 1px solid #ddd;
|
||||
|
||||
.b3-solo-list {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
a {
|
||||
display: block;
|
||||
margin-top: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-solo-list-h2,
|
||||
.b3-solo-list-h4,
|
||||
.b3-solo-list-h5,
|
||||
.b3-solo-list-h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.b3-solo-list-h2 a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.b3-solo-list-h3 a {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.b3-solo-list-h4 a {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.b3-solo-list-h5 a {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
&:before {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -4px;
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
background-color: #eb5055;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__gray {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 700px;
|
||||
box-sizing: border-box;
|
||||
&-body-ref {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
width: 76%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 30px 20px;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 20px 0;
|
||||
border: 1px solid rgba(184, 197, 214, .2);
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
|
||||
list-style: none;
|
||||
padding: 20px;
|
||||
|
||||
&__meta {
|
||||
color: #5f5f5f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #eaeaea;
|
||||
margin: 0 20px 20px 0;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: #5f5f5f;
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.item__reply {
|
||||
display: block;
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#comments {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#comment {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border: 0;
|
||||
resize: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
&__title {
|
||||
margin: 10px 0;
|
||||
padding: 0 15px;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 15px 0 40px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
float: left;
|
||||
list-style: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
min-width: 115px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
.tag {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user