Get images vertically aligned properly
authorAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:05:42 +0000 (20:05 +0000)
committerAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:05:42 +0000 (20:05 +0000)
static/style.css
templates/_book_cover.html

index da77555..b5c6051 100644 (file)
@@ -137,13 +137,8 @@ footer a:hover {
   background: rgba(128, 128, 128, 0.3);
 }
 
-.reading {
-  min-height: 161px;
-}
-
 .review_preview, .reading {
-  border: 2px solid #00a892;
-  background: rgba(0, 255, 221, 0.05);
+  border: 2px solid;
   border-radius: 6px;
   margin-bottom: 1em;
 }
@@ -160,6 +155,7 @@ footer a:hover {
   width: 100%;
   color: black;
   text-decoration: none;
+  min-height: 157px;
 }
 
 .review_preview a:hover {
@@ -169,19 +165,16 @@ footer a:hover {
 .review_preview img, .reading_inner img {
   max-width: 110px;
   max-height: 130px;
-  margin-top: 12px;
-  margin-bottom: 7px;
+/*  margin-top: 12px;
+  margin-bottom: 7px;*/
   box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
+  vertical-align: middle;
 }
 
-@media screen and (max-width: 500px) {
-  .review_preview img, .reading_inner img {
-    max-width: 70px;
-  }
-
-  .review_preview a, .reading_inner {
-    grid-template-columns: 95px auto;
-  }
+.thumbnail_helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
 }
 
 .book_thumbnail {
@@ -215,10 +208,6 @@ footer a:hover {
   margin: 0;
 }
 
-.nav {
-/*  margin-top: 0;*/
-}
-
 .nav .selected {
   font-weight: bold;
 }
@@ -254,3 +243,27 @@ footer a:hover {
   font-size: 100%;
   letter-spacing: 4px;
 }
+
+@media screen and (max-width: 500px) {
+  .review_preview img, .reading_inner img {
+    max-width: 250px;
+    max-height: 150px;
+    margin-bottom: 0;
+  }
+
+  .review_preview a, .reading_inner {
+    grid-template-columns: auto;
+  }
+
+  .book_thumbnail {
+    grid-column: 1/1;
+    grid-row: 1/2;
+  }
+
+  .book_metadata {
+    grid-column: 1/1;
+    grid-row: 2/2;
+    padding: 15px;
+    padding-top: 0;
+  }
+}
index 3841887..390b27b 100644 (file)
@@ -1,6 +1,19 @@
 {% if book.cover_image %}
+  <!--
+    This is a total fudge to make thumbnails be centred horizontally and vertically,
+    even if the book is wider than it is tall.
+
+    The two "thumbnail_helper" elements on either side have height 100% and are
+    vertically aligned, and then somehow the image picks it up.
+
+    See https://stackoverflow.com/a/7310398/1558022.  I had to add a helper on
+    both sides to stop it pushing the image towards the right edge.
+
+    -->
+  <span class="thumbnail_helper"></span>
   <img
     src="/thumbnails/{{ book.cover_image }}"
     alt="Cover of {{ book.title }}. {{ book.cover_desc }}"
   >
+  <span class="thumbnail_helper"></span>
 {% endif %}