mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-11-27 03:51:08 +00:00
Code Issues Projects Releases Wiki Activity

cover: Comment CSS rules a bit more and add rules for consistency.

Browse source
This commit is contained in:
Fabien Basmaison 2021-04-28 15:02:47 +02:00
parent bba60c99e9
commit e37cbcd88d
1 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
bookwyrm/static/css/bookwyrm.css
View file

@ -155,14 +155,16 @@ body {
/** Book covers /** Book covers
* *
* - .is-cover gives the behaviour of the cover and its surrounding. * - .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). * - .cover-container gives the dimensions and position (for borders, image and other elements).
* - .book-cover is positioned and sized based on its container. * - .book-cover is positioned and sized based on its container.
* *
* To have the cover with specific dimensions, specify a width or height for * To have the cover within specific dimensions, specify a width or height for
* standard bulma’s named breapoints: * standard bulma’s named breapoints:
* *
* is-[w|h]-[xs|s|m|l|xl]-[mobile|tablet|desktop] * `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 * 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`. * calculations are not biased by the default `max-content`.
@ -557,6 +559,8 @@ body {
} }
/* Alignments /* Alignments
*
* Use them with `.align.to-(c|t|r|b|l)[-(mobile|tablet)]`
******************************************************************************/ ******************************************************************************/
/* Flex item position /* Flex item position
@ -632,6 +636,9 @@ body {
} }
/* Spacings /* Spacings
*
* Those are supplementary rules to Bulma’s. They follow the same conventions.
* Add those you’ll need.
******************************************************************************/ ******************************************************************************/
.mr-auto { .mr-auto {
@ -663,6 +670,11 @@ body {
margin-left: 0.75rem !important; margin-left: 0.75rem !important;
} }
.mx-3-mobile {
margin-right: 0.75rem !important;
margin-left: 0.75rem !important;
}
.my-3-mobile { .my-3-mobile {
margin-top: 0.75rem !important; margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important; margin-bottom: 0.75rem !important;
@ -670,6 +682,10 @@ body {
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.m-0-tablet {
margin: 0 !important;
}
.mr-auto-tablet { .mr-auto-tablet {
margin-right: auto !important; margin-right: auto !important;
} }
@ -678,6 +694,10 @@ body {
margin-left: auto !important; margin-left: auto !important;
} }
.mt-3-tablet {
margin-top: 0.75rem !important;
}
.ml-3-tablet { .ml-3-tablet {
margin-left: 0.75rem !important; margin-left: 0.75rem !important;
} }
@ -686,4 +706,9 @@ body {
margin-right: 0.75rem !important; margin-right: 0.75rem !important;
margin-left: 0.75rem !important; margin-left: 0.75rem !important;
} }
.my-3-tablet {
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
} }