blog-source/themes/next/source/css/_common/components/post/post-collapse.styl
2022-03-15 20:46:31 +08:00

122 lines
2.1 KiB
Stylus

.posts-collapse {
margin-left: $posts-collapse-margin;
position: relative;
+mobile() {
margin-left: $posts-collapse-margin-mobile;
margin-right: $posts-collapse-margin-mobile;
}
.collection-title {
font-size: $font-size-large;
position: relative;
&::before {
background: $grey-dark;
border: 1px solid white;
border-radius: 50%;
content: ' ';
height: 10px;
left: 0;
margin-left: -6px;
margin-top: -4px;
position: absolute;
top: 50%;
width: 10px;
}
}
.collection-year {
font-size: $font-size-largest;
font-weight: bold;
margin: 60px 0;
position: relative;
&::before {
background: $grey;
border-radius: 50%;
content: ' ';
height: 8px;
left: 0;
margin-left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
width: 8px;
}
}
.collection-header {
display: block;
margin: 0 0 0 20px;
small {
color: $grey;
margin-left: 5px;
}
}
.post-header {
border-bottom: 1px dashed $grey-light;
margin: 30px 0;
padding-left: 15px;
position: relative;
transition-property: border;
the-transition();
&::before {
background: $grey;
border: 1px solid white;
border-radius: 50%;
content: ' ';
height: 6px;
left: 0;
margin-left: -4px;
position: absolute;
top: $font-size-smallest;
transition-property: background;
width: 6px;
the-transition();
}
&:hover {
border-bottom-color: $grey-dim;
&::before {
background: $black-deep;
}
}
}
.post-meta {
display: inline;
font-size: $font-size-smallest;
margin-right: 10px;
}
.post-title {
display: inline;
a, span.exturl {
border-bottom: none;
color: var(--link-color);
}
.fa-external-link-alt {
font-size: $font-size-small;
margin-left: 5px;
}
}
&::before {
background: $whitesmoke;
content: ' ';
height: 100%;
left: 0;
margin-left: -2px;
position: absolute;
top: 1.25em;
width: 4px;
}
}