tweak the appearance on small screens
authorAlex Chan <alex@alexwlchan.net>
Sat, 24 Jul 2021 09:00:35 +0000 (10:00 +0100)
committerAlex Chan <alex@alexwlchan.net>
Sat, 24 Jul 2021 09:00:35 +0000 (10:00 +0100)
static/style.css

index e5453d8..2123351 100644 (file)
@@ -105,7 +105,7 @@ aside a:hover {
   background: rgba(255, 255, 255, 0.3);
 }
 
-table.book_metadata {
+.book_metadata {
   border-collapse: collapse;
   margin-bottom: 1em;
   max-width: calc(100% - 230px);
@@ -266,7 +266,31 @@ footer a:hover {
     grid-column: 1/1;
     grid-row: 2/2;
     padding: 15px;
-    padding-left: 0;
+    padding-left: 0px;
     padding-top: 0;
+    max-width: calc(100%);
+  }
+
+  .review_preview .book_metadata {
+    padding-left: 15px;
+  }
+
+  .thumbnail_helper {
+    display: none;
+  }
+
+  .book-cover {
+    text-align: center;
+  }
+
+  .book-cover img {
+    float: none;
+    max-width:  120px;
+    max-height: 240px;
+    margin-top: 10px;
+    margin-left:  auto;
+    margin-right: auto;
+    margin-bottom: 0;
+    box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
   }
 }