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:
McBrayer 2019-01-28 09:36:54 -05:00
parent c5b2ca46fd
commit b17c56fec3
3 changed files with 30 additions and 18 deletions

View File

@ -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;

View File

@ -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
{ {

View File

@ -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 %}