cover: tweak styles:

- `optimizeQuality` > `smooth` (CSS language evolution)
- Use `auto` instead of a fixed width.
- Add exceptions for heights and apply them to some previously modified templates.
- Remove `is-large` exception.
- Widen the content column on list curation.

bookwyrm/static/css/bookwyrm.css

@@ -98,7 +98,7 @@ body {
  *
  * \e9d9: filled star
  * \e9d7: empty star;
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 .form-rate-stars {
     width: max-content;
@@ -125,76 +125,45 @@ body {
 
 /** Book covers
  *
- * The book cover takes the full width of its ancestor’s layout.
+ * - take the full width of their ancestor’s layout.
+ * - take whatever height they need.
+ *
+ * When assigning a height, add the `has-height` class.
  ******************************************************************************/
 .cover-container {
     position: relative;
+    overflow: hidden;
 }
 
-.cover-container.is-small {
+/* Book cover
-    height: 100px;
+   -------------------------------------------------------------------------- */
-}
-
-.cover-container.is-medium {
-    height: 150px;
-}
-
-/*
-.cover-container.is-large {
-    height: max-content;
-    max-width: 330px;
-}
-
-.cover-container.is-large img {
-    max-height: 500px;
-    height: auto;
-}
-
-@media only screen and (max-width: 768px) {
-    .cover-container {
-        height: 200px;
-        width: max-content;
-    }
-
-    .cover-container.is-medium {
-        height: 100px;
-    }
-}
-*/
-
 .book-cover {
     display: block;
-    width: 100%;
+    width: auto;
 
     /* Useful when stretching under-sized images. */
     image-rendering: optimizeQuality;
+    image-rendering: smooth;
 }
 
+/* `height: inherit` makes sure the height computed is not approximative,
+    without specifying a fixed height. */
 [class~="has-height"] .book-cover {
-    width: auto;
+    height: inherit;
-    height: 100%;
+    max-height: 100%;
 }
 
+/* Cover caption
+   -------------------------------------------------------------------------- */
 .no-cover .cover_caption {
     position: absolute;
-    padding: 1em;
+    padding: .25em;
     color: white;
     top: 0;
     left: 0;
+    font-size: 0.75em;
 }
 
-/*
-.cover-container.is-medium .no-cover div {
-    font-size: 0.9em;
-    padding: 0.3em;
-}
-
-.cover-container.is-small .no-cover div {
-    font-size: 0.7em;
-    padding: 0.1em;
-}
-*/
-
 /** Avatars
  ******************************************************************************/
 
@@ -267,3 +236,24 @@ body {
     opacity: 0.5;
     cursor: not-allowed;
 }
+
+/* Dimensions
+ ******************************************************************************/
+
+.is-h-small {
+    height: 100px !important;
+}
+
+.is-h-medium {
+    height: 150px !important;
+}
+
+@media only screen and (max-width: 768px) {
+    .is-h-small-mobile {
+        height: 100px !important;
+    }
+
+    .is-h-medium-mobile {
+        height: 150px;
+    }
+}

bookwyrm/templates/book/book.html

@@ -48,10 +48,9 @@
 
     <div class="columns">
         <div class="column is-one-fifth">
-            <div class="is-clipped">
+            {% include 'snippets/book_cover.html' with book=book cover_class='has-height is-h-medium-mobile' %}
-                {% include 'snippets/book_cover.html' with book=book cover_class='is-large' %}
             {% include 'snippets/rate_action.html' with user=request.user book=book %}
-            </div>
+
             <div class="mb-3">
                 {% include 'snippets/shelve_button/shelve_button.html' %}
             </div>

bookwyrm/templates/book/edit_book.html

@@ -170,7 +170,7 @@
             <h2 class="title is-4">{% trans "Cover" %}</h2>
             <div class="columns">
                 <div class="column is-narrow">
-                    {% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}
+                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}
                 </div>
                 <div class="column is-narrow">
                     <div class="block">

bookwyrm/templates/book/editions.html

@@ -16,7 +16,7 @@
     <div class="columns">
         <div class="column is-2">
             <a href="/book/{{ book.id }}">
-                {% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
+                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
             </a>
         </div>
         <div class="column is-7">

bookwyrm/templates/discover/large-book.html

@@ -8,7 +8,7 @@
             <div class="column">
                 <a
                     href="{{ book.local_path }}"
-                >{% include 'snippets/book_cover.html' with cover_class='is-large' %}</a>
+                >{% include 'snippets/book_cover.html' %}</a>
 
                 {% include 'snippets/stars.html' with rating=book|rating:request.user %}
             </div>

bookwyrm/templates/discover/small-book.html

@@ -6,7 +6,7 @@
     {% with book=book %}
         <a
             href="{{ book.local_path }}"
-        >{% include 'snippets/book_cover.html' with cover_class='is-small' %}</a>
+        >{% include 'snippets/book_cover.html' with cover_class='is-h-small' %}</a>
 
         {% include 'snippets/stars.html' with rating=book|rating:request.user %}
 

bookwyrm/templates/feed/feed_layout.html

@@ -37,7 +37,7 @@
                                         aria-label="{{ book.title }}"
                                         aria-selected="{% if active_book == book.id|stringformat:'d' %}true{% elif shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}"
                                         aria-controls="book-{{ book.id }}">
-                                        {% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
+                                        {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
                                     </a>
                                 </li>
                                 {% endfor %}

bookwyrm/templates/import_status.html

@@ -125,7 +125,7 @@
             <td>
                 {% if item.book %}
                 <a href="/book/{{ item.book.id }}">
-                {% include 'snippets/book_cover.html' with book=item.book cover_class='is-small' %}
+                {% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-small' %}
                 </a>
                 {% endif %}
             </td>

bookwyrm/templates/lists/curate.html

@@ -32,10 +32,10 @@
                                 href="{{ book.local_path }}"
                                 aria-hidden="true"
                             >
-                                {% include 'snippets/book_cover.html' with cover_class='is-small' %}
+                                {% include 'snippets/book_cover.html' %}
                             </a>
 
-                            <div class="column is-9-mobile is-10-tablet ml-3">
+                            <div class="column is-10-mobile is-10-tablet ml-3">
                                 {% include 'snippets/book_titleby.html' %}
                             </div>
                         </div>

bookwyrm/templates/lists/list_items.html

@@ -11,10 +11,10 @@
 
             {% with list_books=list.listitem_set.all|slice:5 %}
                 {% if list_books %}
-                    <div class="card-image columns is-mobile is-gapless is-clipped has-height">
+                    <div class="card-image columns is-mobile is-gapless is-clipped">
                         {% for book in list_books %}
                             <a class="column is-narrow" href="{{ book.book.local_path }}">
-                                {% include 'snippets/book_cover.html' with book=book.book cover_class='is-small' aria='show' %}
+                                {% include 'snippets/book_cover.html' with book=book.book cover_class='has-height is-h-small' aria='show' %}
                             </a>
                         {% endfor %}
                     </div>

bookwyrm/templates/snippets/book_cover.html

@@ -6,9 +6,6 @@
 <figure
     class="
         cover-container
-        is-clipped
-        is-flex
-        is-align-items-center
         {{ cover_class }}
 
         {% if not book.cover %}

bookwyrm/templates/snippets/status/generated_status.html

@@ -8,7 +8,7 @@
 <div class="columns is-mobile">
     <div class="column is-narrow">
         <div>
-            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}</a>
+            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}</a>
         </div>
     </div>
     <div class="column">

bookwyrm/templates/user/shelf.html

@@ -86,7 +86,7 @@
         {% for book in books %}
         <tr class="book-preview">
             <td>
-                <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-small' %}</a>
+                <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-h-small' %}</a>
             </td>
             <td>
                 <a href="{{ book.local_path }}">{{ book.title }}</a>

bookwyrm/templates/user/user.html

@@ -36,7 +36,7 @@
             {% for book in shelf.books %}
             <div class="control">
                 <a href="{{ book.local_path }}">
-                {% include 'snippets/book_cover.html' with book=book cover_class='is-medium' %}
+                {% include 'snippets/book_cover.html' with book=book cover_class='is-h-medium' %}
                 </a>
             </div>
             {% endfor %}