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;
|
margin-bottom: 0 !important;
|
||||||
display: block !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