Add styles to better render images and code blocks

* Add max width to `figure` so it won't exceed the viewport width for either break-point
* Add max width to `img` within `figure` to account for the default 40px margin on the left/right
* Set width for `pre` blocks so they won't exceed the viewport width for either break-point; add a horizontal scroll-bar if the text is too wide
* Set `pre code` block to use `display:block` so long text won't cause the block to render too wide; otherwise, the width of the containing `pre` block won't be sufficient to contain the text
master v0.1.2
Kevin C. Coram 2020-08-03 15:42:45 -04:00
parent a7cc18e837
commit b3f54f22ee
Signed by: kevin
GPG Key ID: 0E64ECB9EDE572A3
1 changed files with 38 additions and 0 deletions

View File

@ -56,4 +56,42 @@ img.profile.photo.like {
max-width: 30px;
border-radius: 50%;
padding: 0.5em;
}
/* Styles for images and code fence blocks in content area */
pre {
overflow-x: auto;
width: 100vw;
}
pre code {
display: block;
}
figure {
max-width: 100vw;
}
figure img {
max-width: calc(100vw - 160px);
}
@media only screen and (min-width: 922px) {
pre {
overflow-x: auto;
max-width: calc(100vw - 350px);
}
pre code {
display: block;
}
figure {
max-width: calc(100vw - 350px);
}
figure img {
max-width: calc(100vw - 510px);
}
}