Merge pull request #1710 from joachimesque/summary-images-fixes

Summary images fixes
This commit is contained in:
Mouse Reeve 2021-12-28 12:00:38 -08:00 committed by GitHub
commit 4159776771
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions

View file

@ -612,8 +612,8 @@ ol.ordered-list li::before {
.books-grid { .books-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: 1.5rem; gap: 1rem;
align-items: end; align-items: end;
justify-items: stretch; justify-items: stretch;
} }
@ -622,7 +622,6 @@ ol.ordered-list li::before {
grid-column: span 2; grid-column: span 2;
grid-row: span 2; grid-row: span 2;
justify-self: stretch; justify-self: stretch;
padding: 1.5rem 1.5rem 0;
} }
.books-grid .book-cover { .books-grid .book-cover {
@ -638,6 +637,17 @@ ol.ordered-list li::before {
min-height: calc(2 * var(--height-basis)); min-height: calc(2 * var(--height-basis));
} }
@media only screen and (min-width: 769px) {
.books-grid {
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
.books-grid > .is-big {
padding: 1.5rem 1.5rem 0;
}
}
/* Copy /* Copy
******************************************************************************/ ******************************************************************************/

View file

@ -130,7 +130,7 @@
{% if book_pages_lowest and book_pages_highest %} {% if book_pages_lowest and book_pages_highest %}
<div class="columns is-align-items-center mt-5"> <div class="columns is-align-items-center mt-5">
<div class="column is-2 is-offset-1"> <div class="column is-2 is-offset-1">
<a href="{{ book_pages_lowest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_lowest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a> <a href="{{ book_pages_lowest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_lowest cover_class='is-w-auto-tablet is-h-l-mobile' size='xxlarge' %}</a>
</div> </div>
<div class="column is-3"> <div class="column is-3">
{% trans "Their shortest read this year…" %} {% trans "Their shortest read this year…" %}
@ -151,7 +151,7 @@
</p> </p>
</div> </div>
<div class="column is-2"> <div class="column is-2">
<a href="{{ book_pages_highest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_highest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a> <a href="{{ book_pages_highest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_highest cover_class='is-w-auto-tablet is-h-l-mobile' size='xxlarge' %}</a>
</div> </div>
<div class="column is-3"> <div class="column is-3">
{% trans "…and the longest" %} {% trans "…and the longest" %}
@ -189,8 +189,8 @@
</div> </div>
</div> </div>
<div class="columns is-align-items-center"> <div class="columns is-align-items-center">
<div class="column is-3 is-offset-3"> <div class="column is-2 is-offset-4">
<a href="{{ book_rating_highest.book.local_path }}">{% include 'snippets/book_cover.html' with book=book_rating_highest.book cover_class='is-w-auto-tablet is-h-l-mobile' %}</a> <a href="{{ book_rating_highest.book.local_path }}">{% include 'snippets/book_cover.html' with book=book_rating_highest.book cover_class='is-w-xl-tablet is-h-l-mobile' size='xxlarge' %}</a>
</div> </div>
{% if book_rating_highest %} {% if book_rating_highest %}
<div class="column is-4"> <div class="column is-4">
@ -224,7 +224,7 @@
<div class="columns"> <div class="columns">
<div class="column has-text-centered"> <div class="column has-text-centered">
<h2 class="title is-3 is-serif"> <h2 class="title is-3 is-serif">
{% blocktrans %}All the books {{ display_name }} read in 2021{% endblocktrans %} {% blocktrans %}All the books {{ display_name }} read in {{ year }}{% endblocktrans %}
</h2> </h2>
</div> </div>
</div> </div>
@ -242,7 +242,7 @@
</a> </a>
{% else %} {% else %}
<a href="{{ book.local_path }}" class="has-text-centered has-text-success-dark"> <a href="{{ book.local_path }}" class="has-text-centered has-text-success-dark">
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='large' %} {% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='xlarge' %}
<span class="book-title is-serif is-size-6"> <span class="book-title is-serif is-size-6">
{{ book.title }} {{ book.title }}
</span> </span>