👄 list

This commit is contained in:
Van
2018-09-01 23:51:36 +08:00
parent 8865ba8c87
commit 8cc787a718
12 changed files with 523 additions and 402 deletions

View File

@@ -604,6 +604,11 @@ a {
margin-bottom: 30px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
transition: all .3s; }
.module.item {
transform: translateY(30px);
transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.module.item--active {
transform: translate(0); }
.module:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
.module__content {
@@ -723,6 +728,10 @@ a {
margin: auto;
display: flex; }
.content {
flex: 1;
min-width: 1px; }
.side {
width: 280px;
min-width: 280px;
@@ -766,13 +775,18 @@ a {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: none; }
.breadcrumb {
color: #7266BA !important; }
.breadcrumb:hover {
color: #3d4450 !important; }
.footer {
text-align: center;
color: #fff;
padding: 15px;
margin-bottom: 30px; }
.footer a {
color: #3d4450; }
color: #7266BA; }
.article-list .item {
border-radius: 5px;
@@ -781,7 +795,10 @@ a {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
position: relative;
transition: all .3s; }
transition: all 0.3s, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: perspective(2500px) rotateX(-100deg); }
.article-list .item--active {
transform: perspective(2500px) rotateX(0); }
.article-list .item:hover {
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
@@ -828,7 +845,7 @@ a {
padding: 0 10px;
line-height: 24px;
display: inline-block;
margin-left: 10px;
margin: 0 0 10px 10px;
background-color: rgba(114, 102, 186, 0.58); }
.pagination__item--text {
background-color: rgba(255, 255, 255, 0.8);
@@ -870,7 +887,8 @@ a {
.article-list .item__date--m {
text-align: center;
margin-bottom: 10px;
color: #3d4450; }
color: #3d4450;
display: block; }
.tag {
margin: 0 5px 10px 0;
font-size: 12px; }
@@ -892,4 +910,6 @@ a {
.header__m .module__list {
display: none; }
.header__m .module__list li {
background-color: #fff; } }
background-color: #fff; }
.module__content.ft__center {
text-align: left; } }

View File

@@ -50,8 +50,16 @@ a {
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
transition: all .3s;
&.item {
transform: translateY(30px);
transition: transform 2s cubic-bezier(.175, .885, .32, 1.275);
&--active {
transform: translate(0);
}
}
&:hover {
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
}
&__content {
@@ -225,6 +233,11 @@ a {
display: flex;
}
.content {
flex: 1;
min-width: 1px;
}
// side
.side {
width: 280px;
@@ -282,6 +295,13 @@ a {
}
}
.breadcrumb {
color: $purple !important;
&:hover {
color: $black !important;
}
}
// footer
.footer {
text-align: center;
@@ -289,7 +309,7 @@ a {
padding: 15px;
margin-bottom: 30px;
a {
color: $black;
color: $purple;
}
}
@@ -302,11 +322,16 @@ a {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
position: relative;
transition: all .3s;
transition: all .3s, transform 1s cubic-bezier(.175, .885, .32, 1.275);
transform: perspective(2500px) rotateX(-100deg);
&--active {
transform: perspective(2500px) rotateX(0);
}
&:hover {
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
}
.tag {
@@ -368,7 +393,7 @@ a {
padding: 0 10px;
line-height: 24px;
display: inline-block;
margin-left: 10px;
margin: 0 0 10px 10px;
background-color: rgba($purple, 0.58);
&--text {
@@ -436,6 +461,7 @@ a {
text-align: center;
margin-bottom: 10px;
color: $black;
display: block;
}
.tag {
@@ -473,4 +499,8 @@ a {
}
}
}
.module__content.ft__center {
text-align: left;
}
}