69 lines
1.4 KiB
CSS
69 lines
1.4 KiB
CSS
|
/* 相关推荐 */
|
||
|
|
|
||
|
|
.relatedPosts-list {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.relatedPosts>.relatedPosts-list>div {
|
||
|
|
background: #363636;
|
||
|
|
transition: 0.3s;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list>div {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 3px;
|
||
|
|
width: calc(33.333% - 6px);
|
||
|
|
height: 200px;
|
||
|
|
/* background: var(--heo-main); */
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .cover {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0.4;
|
||
|
|
transition: all 0.6s ease 0s;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .content {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
padding: 0px 1rem;
|
||
|
|
width: 100%;
|
||
|
|
transform: translate(0px, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .content .date {
|
||
|
|
color: var(--heo-fontcolor);
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .content .date {
|
||
|
|
color: var(--light-grey);
|
||
|
|
font-size: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .content .title {
|
||
|
|
color: var(--white);
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.relatedPosts>.relatedPosts-list .content .title {
|
||
|
|
color: var(--heo-fontcolor);
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 1.5;
|
||
|
|
-webkit-line-clamp: 4;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.relatedPosts > .relatedPosts-list > div:hover .cover {
|
||
|
|
opacity: 0.8;
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|