More legible statuses on mobile

bookwyrm/static/css/format.css

@@ -62,13 +62,26 @@ input.toggle-control:checked ~ .toggle-content {
 .cover-container.is-medium {
     height: 150px;
 }
+.cover-container.is-small {
+    height: 100px;
+}
+@media only screen and (max-width: 768px) {
+    .cover-container {
+        height: 200px;
+        width: max-content;
+    }
+    .cover-container.is-medium {
+        height: 100px;
+    }
+    .cover-container.is-small {
+        height: 70px;
+    }
+}
+
 .cover-container.is-medium .no-cover div {
     font-size: 0.9em;
     padding: 0.3em;
 }
-.cover-container.is-small {
-    height: 100px;
-}
 .cover-container.is-small .no-cover div {
     font-size: 0.7em;
     padding: 0.1em;

bookwyrm/templates/snippets/book_preview.html

@@ -1,11 +1,11 @@
-<div class="media">
+<div class="columns">
-    <div class="media-left">
+    <div class="column is-narrow">
         <div>
         <a href="/book/{{ book.id }}">{% include 'snippets/book_cover.html' with book=book %}</a>
         {% include 'snippets/shelve_button.html' with book=book %}
         </div>
     </div>
-    <div class="media-content">
+    <div class="column">
         <h3 class="title is-6">{% include 'snippets/book_titleby.html' with book=book %}</h3>
         {% include 'snippets/book_description.html' with book=book %}
     </div>

bookwyrm/templates/snippets/status.html

@@ -17,7 +17,7 @@
                 {% include 'snippets/status_header.html' with status=status %}
                 {% endif %}
             </p>
-</div>
+        </div>
     </header>
 
     <div class="card-content">