81 lines
1.1 KiB
SCSS
81 lines
1.1 KiB
SCSS
.related-post-item {
|
|
& {
|
|
display: flex;
|
|
text-align: left;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
// Layout
|
|
& > a {
|
|
flex: 1 1 100%;
|
|
display: block;
|
|
border-radius: 2px;
|
|
box-shadow: $shadow2;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Color
|
|
& > a,
|
|
& > a:visited {
|
|
background: white;
|
|
color: $base-mute;
|
|
|
|
& > strong {
|
|
color: $base-a;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $base-a;
|
|
}
|
|
|
|
&:hover > strong,
|
|
&:focus > strong {
|
|
color: darken($base-a, 16%);
|
|
}
|
|
}
|
|
|
|
&:first-of-type > a,
|
|
&:first-of-type > a:visited {
|
|
background: $base-a;
|
|
color: rgba(white, 0.5);
|
|
|
|
& > strong {
|
|
color: white;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: white;
|
|
}
|
|
|
|
&:hover > strong,
|
|
&:focus > strong {
|
|
color: white;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: darken($base-a, 8%);
|
|
}
|
|
}
|
|
|
|
// Two lines when bigger
|
|
@media (min-width: 481px) {
|
|
& > a > strong,
|
|
& > a > span {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
& > a > strong {
|
|
@include font-size(1);
|
|
font-weight: normal;
|
|
}
|
|
|
|
& > a > span {
|
|
@include font-size(-1);
|
|
}
|
|
}
|