fix: paragraph spacing and floated photo sizes in bio and posts
All checks were successful
Deploy to OVH VPS / deploy (push) Successful in 1m5s
All checks were successful
Deploy to OVH VPS / deploy (push) Successful in 1m5s
This commit is contained in:
parent
0e4d4617ab
commit
d69d38e708
1 changed files with 76 additions and 0 deletions
|
|
@ -479,3 +479,79 @@
|
|||
margin-bottom: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Paragraph rhythm: the typography plugin is not installed, so paragraphs
|
||||
had no spacing at all */
|
||||
.prose p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.1em;
|
||||
}
|
||||
|
||||
/* Headings never squeeze next to a floated photo */
|
||||
.prose h2,
|
||||
.prose h3 {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Floated figures: the wrapper div carries float and size, the image fills it.
|
||||
Sizes are a share of the text column, so the text beside keeps a readable
|
||||
width. */
|
||||
@media (min-width: 768px) {
|
||||
.prose div.float-left,
|
||||
.prose div.float-right {
|
||||
margin-top: 0.35rem !important;
|
||||
margin-bottom: 1.75rem !important;
|
||||
}
|
||||
|
||||
.prose div.float-right {
|
||||
margin-left: 2.5rem !important;
|
||||
}
|
||||
|
||||
.prose div.float-left {
|
||||
margin-right: 2.5rem !important;
|
||||
}
|
||||
|
||||
.prose div.float-left[class*="img-"],
|
||||
.prose div.float-right[class*="img-"] {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.prose div.float-left.img-small,
|
||||
.prose div.float-right.img-small {
|
||||
width: 32% !important;
|
||||
}
|
||||
|
||||
.prose div.float-left.img-medium,
|
||||
.prose div.float-right.img-medium {
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
.prose div.float-left.img-large,
|
||||
.prose div.float-right.img-large {
|
||||
width: 46% !important;
|
||||
}
|
||||
|
||||
.prose div.float-left img,
|
||||
.prose div.float-right img {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.prose div.float-left em,
|
||||
.prose div.float-right em {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: floated figures become full width blocks */
|
||||
@media (max-width: 767px) {
|
||||
.prose div.float-left,
|
||||
.prose div.float-right {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 1.5rem 0 2rem !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue