feat(article/related contents): style change
This commit is contained in:
parent
2d68b9e8ce
commit
99eb6cdfd0
@ -152,14 +152,10 @@
|
|||||||
|
|
||||||
.related-contents--wrapper {
|
.related-contents--wrapper {
|
||||||
margin-bottom: var(--section-separation);
|
margin-bottom: var(--section-separation);
|
||||||
.widget-title {
|
|
||||||
//padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-contents {
|
.related-contents {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
//padding: 0 15px;
|
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
|
|
||||||
& > .flex {
|
& > .flex {
|
||||||
@ -170,23 +166,19 @@
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: 250px;
|
||||||
@media (max-width: $on-phone) {
|
height: 150px;
|
||||||
height: 250px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $on-phone) {
|
|
||||||
height: 200px;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.has-image {
|
||||||
.article-details {
|
.article-details {
|
||||||
transition: background-color 0.5s ease;
|
padding: 20px;
|
||||||
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<div class="related-contents">
|
<div class="related-contents">
|
||||||
<div class="flex article-list--tile">
|
<div class="flex article-list--tile">
|
||||||
{{ range . }}
|
{{ range . }}
|
||||||
{{ partial "article-list/tile" (dict "context" . "size" "250x350") }}
|
{{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user