From d8b6676976f48b24dcc2873aebb8eb3143112a9e Mon Sep 17 00:00:00 2001
From: Fabien Basmaison <contact@arkhi.org>
Date: Tue, 27 Apr 2021 16:27:39 +0200
Subject: [PATCH] cover: Udpate logged out home and discover.

---
 bookwyrm/static/css/bookwyrm.css            | 44 +++++++++++++++++++++
 bookwyrm/templates/discover/large-book.html | 10 +++--
 bookwyrm/templates/discover/small-book.html |  6 +--
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 4d27c2a4..98801fa1 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -167,6 +167,9 @@ body {
  * standard bulma’s named breapoints:
  *
  * is-[w|h]-[xs|s|m|l|xl]-[mobile|tablet|desktop]
+ *
+ * When using `.column.is-N`, add `.is-w-auto` to the container so that the flex
+ * calculations are not biased by the default `max-content`.
  ******************************************************************************/
 
 .column.is-cover {
@@ -280,6 +283,7 @@ body {
 }
 
 /* Dimensions
+ * @todo These could be in rem.
  ******************************************************************************/
 
 .is-32x32 {
@@ -312,6 +316,10 @@ body {
     width: 200px !important;
 }
 
+.is-w-xxl {
+    width: 500px !important;
+}
+
 .is-h-xs {
     height: 80px !important;
 }
@@ -328,6 +336,10 @@ body {
     height: 200px !important;
 }
 
+.is-h-xxl {
+    height: 500px !important;
+}
+
 @media only screen and (max-width: 768px) {
     .is-w-auto-mobile {
         width: auto !important;
@@ -349,6 +361,10 @@ body {
         width: 200px !important;
     }
 
+    .is-w-xxl-mobile {
+        width: 500px !important;
+    }
+
     .is-h-xs-mobile {
         height: 80px !important;
     }
@@ -364,6 +380,10 @@ body {
     .is-h-l-mobile {
         height: 200px !important;
     }
+
+    .is-h-xxl-mobile {
+        height: 500px !important;
+    }
 }
 
 @media only screen and (min-width: 769px) {
@@ -387,6 +407,10 @@ body {
         width: 200px !important;
     }
 
+    .is-w-xxl-tablet {
+        width: 500px !important;
+    }
+
     .is-h-xs-tablet {
         height: 80px !important;
     }
@@ -402,6 +426,10 @@ body {
     .is-h-l-tablet {
         height: 200px !important;
     }
+
+    .is-h-xxl-tablet {
+        height: 500px !important;
+    }
 }
 
 @media only screen and (min-width: 1024px) {
@@ -425,6 +453,10 @@ body {
         width: 200px !important;
     }
 
+    .is-w-xxl-desktop {
+        width: 500px !important;
+    }
+
     .is-h-xs-desktop {
         height: 80px !important;
     }
@@ -440,6 +472,10 @@ body {
     .is-h-l-desktop {
         height: 200px !important;
     }
+
+    .is-h-xxl-desktop {
+        height: 500px !important;
+    }
 }
 
 /* Alignments
@@ -461,6 +497,10 @@ body {
     justify-content: flex-end !important;
 }
 
+.align.to-b {
+    align-items: flex-end !important;
+}
+
 .align.to-l {
     justify-content: flex-start !important;
 }
@@ -513,6 +553,10 @@ body {
         margin-left: auto !important;
     }
 
+    .mt-3-mobile {
+        margin-top: 0.75rem !important;
+    }
+
     .ml-3-mobile {
         margin-left: 0.75rem !important;
     }
diff --git a/bookwyrm/templates/discover/large-book.html b/bookwyrm/templates/discover/large-book.html
index c7b39ebb..1808a0f9 100644
--- a/bookwyrm/templates/discover/large-book.html
+++ b/bookwyrm/templates/discover/large-book.html
@@ -4,16 +4,18 @@
 
 {% if book %}
     {% with book=book %}
-        <div class="columns">
-            <div class="column">
+        <div class="columns is-gapless">
+            <div class="column is-5-tablet is-cover">
                 <a
+                    class="align to-b to-l"
                     href="{{ book.local_path }}"
-                >{% include 'snippets/book_cover.html' %}</a>
+                >{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto-tablet' %}</a>
 
                 {% include 'snippets/stars.html' with rating=book|rating:request.user %}
             </div>
 
-            <div class="column">
+
+            <div class="column mt-3-mobile ml-3-tablet">
                 <h3 class="title is-5">
                     <a href="/book/{{ book.id }}">{{ book.title }}</a>
                 </h3>
diff --git a/bookwyrm/templates/discover/small-book.html b/bookwyrm/templates/discover/small-book.html
index f0e1626c..ad7e00fb 100644
--- a/bookwyrm/templates/discover/small-book.html
+++ b/bookwyrm/templates/discover/small-book.html
@@ -4,9 +4,9 @@
 
 {% if book %}
     {% with book=book %}
-        <a
-            href="{{ book.local_path }}"
-        >{% include 'snippets/book_cover.html' with cover_class='is-h-s' %}</a>
+        <a href="{{ book.local_path }}">
+            {% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-h-l-tablet is-w-auto align to-b to-l' %}
+        </a>
 
         {% include 'snippets/stars.html' with rating=book|rating:request.user %}