Merge branch 'main' into list-style-fixes

bookwyrm/static/css/bookwyrm.css

@@ -140,7 +140,7 @@ body {
  *
  * \e9d9: filled star
  * \e9d7: empty star;
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 .form-rate-stars {
     width: max-content;
@@ -166,70 +166,67 @@ body {
 }
 
 /** Book covers
+ *
+ * - .is-cover gives the behaviour of the cover and its surrounding. (optional)
+ * - .cover-container gives the dimensions and position (for borders, image and other elements).
+ * - .book-cover is positioned and sized based on its container.
+ *
+ * To have the cover within specific dimensions, specify a width or height for
+ * standard bulma’s named breapoints:
+ *
+ * `is-(w|h)-(auto|xs|s|m|l|xl|xxl)[-(mobile|tablet|desktop)]`
+ *
+ * The cover will be centered horizontally and vertically within those dimensions.
+ *
+ * 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 {
+    flex-grow: 0 !important;
+}
+
+.column.is-cover,
+.column.is-cover + .column {
+    flex-basis: auto !important;
+}
+
 .cover-container {
-    height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
     width: max-content;
-    max-width: 250px;
+    max-width: 100%;
+    overflow: hidden;
 }
 
-.cover-container.is-large {
-    height: max-content;
-    max-width: 330px;
-}
-
-.cover-container.is-large img {
-    max-height: 500px;
-    height: auto;
-}
-
-.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;
-    }
-}
+/* Book cover
+ * -------------------------------------------------------------------------- */
 
 .book-cover {
-    height: 100%;
-    object-fit: scale-down;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+
+    /* Useful when stretching under-sized images. */
+    image-rendering: optimizeQuality;
+    image-rendering: smooth;
 }
 
-.no-cover {
-    position: relative;
-    white-space: normal;
-}
+/* Cover caption
+ * -------------------------------------------------------------------------- */
 
-.no-cover div {
+.no-cover .cover_caption {
     position: absolute;
-    padding: 1em;
-    color: white;
     top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
-    text-align: center;
-}
-
-.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;
+    padding: 0.25em;
+    font-size: 0.75em;
+    color: white;
+    background-color: #002549;
 }
 
 /** Avatars
@@ -240,16 +237,6 @@ body {
     display: inline;
 }
 
-.is-32x32 {
-    min-width: 32px;
-    min-height: 32px;
-}
-
-.is-96x96 {
-    min-width: 96px;
-    min-height: 96px;
-}
-
 /** Statuses: Quotes
  *
  * \e906: icon-quote-open
@@ -397,3 +384,386 @@ ol.ordered-list li::before {
         border-bottom-right-radius: 2px;
     }
 }
+     
+/* Dimensions
+ * @todo These could be in rem.
+ ******************************************************************************/
+
+.is-32x32 {
+    min-width: 32px !important;
+    min-height: 32px !important;
+}
+
+.is-96x96 {
+    min-width: 96px !important;
+    min-height: 96px !important;
+}
+
+.is-w-auto {
+    width: auto !important;
+}
+
+.is-w-xs {
+    width: 80px !important;
+}
+
+.is-w-s {
+    width: 100px !important;
+}
+
+.is-w-m {
+    width: 150px !important;
+}
+
+.is-w-l {
+    width: 200px !important;
+}
+
+.is-w-xl {
+    width: 250px !important;
+}
+
+.is-w-xxl {
+    width: 500px !important;
+}
+
+.is-h-xs {
+    height: 80px !important;
+}
+
+.is-h-s {
+    height: 100px !important;
+}
+
+.is-h-m {
+    height: 150px !important;
+}
+
+.is-h-l {
+    height: 200px !important;
+}
+
+.is-h-xl {
+    height: 250px !important;
+}
+
+.is-h-xxl {
+    height: 500px !important;
+}
+
+@media only screen and (max-width: 768px) {
+    .is-w-auto-mobile {
+        width: auto !important;
+    }
+
+    .is-w-xs-mobile {
+        width: 80px !important;
+    }
+
+    .is-w-s-mobile {
+        width: 100px !important;
+    }
+
+    .is-w-m-mobile {
+        width: 150px !important;
+    }
+
+    .is-w-l-mobile {
+        width: 200px !important;
+    }
+
+    .is-w-xl-mobile {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-mobile {
+        width: 500px !important;
+    }
+
+    .is-h-xs-mobile {
+        height: 80px !important;
+    }
+
+    .is-h-s-mobile {
+        height: 100px !important;
+    }
+
+    .is-h-m-mobile {
+        height: 150px !important;
+    }
+
+    .is-h-l-mobile {
+        height: 200px !important;
+    }
+
+    .is-h-xl-mobile {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-mobile {
+        height: 500px !important;
+    }
+}
+
+@media only screen and (min-width: 769px) {
+    .is-w-auto-tablet {
+        width: auto !important;
+    }
+
+    .is-w-xs-tablet {
+        width: 80px !important;
+    }
+
+    .is-w-s-tablet {
+        width: 100px !important;
+    }
+
+    .is-w-m-tablet {
+        width: 150px !important;
+    }
+
+    .is-w-l-tablet {
+        width: 200px !important;
+    }
+
+    .is-w-xl-tablet {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-tablet {
+        width: 500px !important;
+    }
+
+    .is-h-xs-tablet {
+        height: 80px !important;
+    }
+
+    .is-h-s-tablet {
+        height: 100px !important;
+    }
+
+    .is-h-m-tablet {
+        height: 150px !important;
+    }
+
+    .is-h-l-tablet {
+        height: 200px !important;
+    }
+
+    .is-h-xl-tablet {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-tablet {
+        height: 500px !important;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .is-w-auto-desktop {
+        width: auto !important;
+    }
+
+    .is-w-xs-desktop {
+        width: 80px !important;
+    }
+
+    .is-w-s-desktop {
+        width: 100px !important;
+    }
+
+    .is-w-m-desktop {
+        width: 150px !important;
+    }
+
+    .is-w-l-desktop {
+        width: 200px !important;
+    }
+
+    .is-w-xl-desktop {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-desktop {
+        width: 500px !important;
+    }
+
+    .is-h-xs-desktop {
+        height: 80px !important;
+    }
+
+    .is-h-s-desktop {
+        height: 100px !important;
+    }
+
+    .is-h-m-desktop {
+        height: 150px !important;
+    }
+
+    .is-h-l-desktop {
+        height: 200px !important;
+    }
+
+    .is-h-xl-desktop {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-desktop {
+        height: 500px !important;
+    }
+}
+
+/* Alignments
+ *
+ * Use them with `.align.to-(c|t|r|b|l)[-(mobile|tablet)]`
+ ******************************************************************************/
+
+/* Flex item position
+ * -------------------------------------------------------------------------- */
+
+.align {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.align.to-c {
+    justify-content: center !important;
+}
+
+.align.to-t {
+    align-items: flex-start !important;
+}
+
+.align.to-r {
+    justify-content: flex-end !important;
+}
+
+.align.to-b {
+    align-items: flex-end !important;
+}
+
+.align.to-l {
+    justify-content: flex-start !important;
+}
+
+@media screen and (max-width: 768px) {
+    .align.to-c-mobile {
+        justify-content: center !important;
+    }
+
+    .align.to-t-mobile {
+        align-items: flex-start !important;
+    }
+
+    .align.to-r-mobile {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-b-mobile {
+        align-items: flex-end !important;
+    }
+
+    .align.to-l-mobile {
+        justify-content: flex-start !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .align.to-c-tablet {
+        justify-content: center !important;
+    }
+
+    .align.to-t-tablet {
+        align-items: flex-start !important;
+    }
+
+    .align.to-r-tablet {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-b-tablet {
+        align-items: flex-end !important;
+    }
+
+    .align.to-l-tablet {
+        justify-content: flex-start !important;
+    }
+}
+
+/* Spacings
+ *
+ * Those are supplementary rules to Bulma’s. They follow the same conventions.
+ * Add those you’ll need.
+ ******************************************************************************/
+
+.mr-auto {
+    margin-right: auto !important;
+}
+
+.ml-auto {
+    margin-left: auto !important;
+}
+
+@media screen and (max-width: 768px) {
+    .m-0-mobile {
+        margin: 0 !important;
+    }
+
+    .mr-auto-mobile {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-mobile {
+        margin-left: auto !important;
+    }
+
+    .mt-3-mobile {
+        margin-top: 0.75rem !important;
+    }
+
+    .ml-3-mobile {
+        margin-left: 0.75rem !important;
+    }
+
+    .mx-3-mobile {
+        margin-right: 0.75rem !important;
+        margin-left: 0.75rem !important;
+    }
+
+    .my-3-mobile {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .m-0-tablet {
+        margin: 0 !important;
+    }
+
+    .mr-auto-tablet {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-tablet {
+        margin-left: auto !important;
+    }
+
+    .mt-3-tablet {
+        margin-top: 0.75rem !important;
+    }
+
+    .ml-3-tablet {
+        margin-left: 0.75rem !important;
+    }
+
+    .mx-3-tablet {
+        margin-right: 0.75rem !important;
+        margin-left: 0.75rem !important;
+    }
+
+    .my-3-tablet {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+}