feat: show link_card on home; apply balance text wrap
This commit is contained in:
parent
be359915d7
commit
bbe2f41c5e
1 changed files with 68 additions and 43 deletions
|
@ -80,6 +80,10 @@
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& a:has(.link_card) {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
& .media, & .link_card {
|
& .media, & .link_card {
|
||||||
border: 1px solid rgba(34, 34, 34, 0.15);
|
border: 1px solid rgba(34, 34, 34, 0.15);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -87,6 +91,8 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 15px 0 1em;
|
margin: 15px 0 1em;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
text-decoration: none;
|
||||||
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .media:hover, & .link_card:hover {
|
& .media:hover, & .link_card:hover {
|
||||||
|
@ -113,11 +119,12 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: #888;
|
color: #888;
|
||||||
|
|
||||||
& a:hover{
|
|
||||||
color: blue
|
|
||||||
}
|
|
||||||
& a{
|
& a{
|
||||||
color: #888;
|
color: #888;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -182,7 +189,6 @@
|
||||||
}
|
}
|
||||||
main a {
|
main a {
|
||||||
color: orange;
|
color: orange;
|
||||||
|
|
||||||
}
|
}
|
||||||
.card_content {
|
.card_content {
|
||||||
& .action {
|
& .action {
|
||||||
|
@ -191,6 +197,9 @@
|
||||||
& .heading .author a {
|
& .heading .author a {
|
||||||
color: #f8f9fa;
|
color: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
& .heading .right_menu a:hover {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
& .body {
|
& .body {
|
||||||
code {
|
code {
|
||||||
background: rgb(45, 51, 59);
|
background: rgb(45, 51, 59);
|
||||||
|
@ -250,9 +259,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="body">
|
<div class="body">
|
||||||
{{thread.content | safe}} {% if thread.descendants is defined %}
|
{{thread.content | safe}}
|
||||||
{% for media in thread.media_attachments %} {% if media.type ==
|
{% if thread.descendants is defined %}
|
||||||
'image'%}
|
{% for media in thread.media_attachments %}
|
||||||
|
{% if media.type == 'image'%}
|
||||||
<a href="{{ media.url }}">
|
<a href="{{ media.url }}">
|
||||||
<img
|
<img
|
||||||
class="media"
|
class="media"
|
||||||
|
@ -274,7 +284,22 @@
|
||||||
<source src="{{media.url}}" type="video/mp4" />
|
<source src="{{media.url}}" type="video/mp4" />
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
{% endif %} {% endfor %} {% endif %}
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% if thread.media_attachments|length <= 0 and thread.card %}
|
||||||
|
<a href="{{ thread.card.url }}">
|
||||||
|
<div class="link_card">
|
||||||
|
<small>
|
||||||
|
{{ thread.card.provider_name or
|
||||||
|
thread.card.provider_url }}
|
||||||
|
</small>
|
||||||
|
<strong>{{ thread.card.title }}</strong>
|
||||||
|
<small>{{thread.card.description}}</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if thread.descendants is defined %}
|
{% if thread.descendants is defined %}
|
||||||
|
@ -332,7 +357,7 @@
|
||||||
</video>
|
</video>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if descendant.card %}
|
{% if descendant.media_attachments|length <= 0 and descendant.card %}
|
||||||
<a href="{{ descendant.card.url }}">
|
<a href="{{ descendant.card.url }}">
|
||||||
<div class="link_card">
|
<div class="link_card">
|
||||||
<small>
|
<small>
|
||||||
|
|
Loading…
Reference in a new issue