Reformat preview cards to make better use of space.
Also widen the default themes view again. I don't like the long lines, but I like the way it gives more space for preview cards.
This commit is contained in:
parent
c5b2ca46fd
commit
b17c56fec3
|
@ -3,7 +3,7 @@ body.has-navbar-fixed-top {
|
||||||
}
|
}
|
||||||
|
|
||||||
body > section > div.container {
|
body > section > div.container {
|
||||||
max-width: 100ex;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -20,10 +20,10 @@ img.fav-avatar {
|
||||||
|
|
||||||
|
|
||||||
.media-content {
|
.media-content {
|
||||||
padding: 1.5ex;
|
padding: 1.25ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-max-128 img, .is-max-256 img
|
.is-max-128 img, .is-max-192 img, .is-max-256 img
|
||||||
{
|
{
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -42,6 +42,11 @@ img.fav-avatar {
|
||||||
max-width: 256px;
|
max-width: 256px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.is-max-192 {
|
||||||
|
max-height: 192px;
|
||||||
|
max-width: 192px;
|
||||||
|
}
|
||||||
|
|
||||||
figure.media-left p.image a img
|
figure.media-left p.image a img
|
||||||
{
|
{
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
body > section > div.container {
|
body > section > div.container {
|
||||||
max-width: 100ex;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -16,10 +16,10 @@ img.fav-avatar {
|
||||||
|
|
||||||
|
|
||||||
.media-content {
|
.media-content {
|
||||||
padding: 1.5ex;
|
padding: 1.25ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-max-128 img, .is-max-256 img
|
.is-max-128 img, .is-max-192 img, .is-max-256 img
|
||||||
{
|
{
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -38,6 +38,11 @@ img.fav-avatar {
|
||||||
max-width: 256px;
|
max-width: 256px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.is-max-192 {
|
||||||
|
max-height: 192px;
|
||||||
|
max-width: 192px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
figure.media-left p.image a img
|
figure.media-left p.image a img
|
||||||
{
|
{
|
||||||
|
|
|
@ -59,20 +59,22 @@
|
||||||
<a href="{{ toot.card.url }}"> {{ toot.card.title }} </a>
|
<a href="{{ toot.card.url }}"> {{ toot.card.title }} </a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% if toot.card.description %}
|
||||||
|
<div class="card-content columns">
|
||||||
{% if toot.card.image and not toot.media_attachments %}
|
{% if toot.card.image and not toot.media_attachments %}
|
||||||
<div class="card-image">
|
<div class="column is-one-third">
|
||||||
<figure>
|
<figure>
|
||||||
<a href="{{ toot.card.url }}">
|
<a href="{{ toot.card.url }}">
|
||||||
<img class="image is-max-256" alt="{{ toot.card.title }}"
|
<img class="image" alt="{{ toot.card.title }}"
|
||||||
src="{{ toot.card.image }}">
|
src="{{ toot.card.image }}">
|
||||||
</a>
|
</a>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if toot.card.description %}
|
<div class="column is-two-thirds">
|
||||||
<div class="card-content">
|
|
||||||
<p>{{ toot.card.description }}</p>
|
<p>{{ toot.card.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Loading…
Reference in New Issue