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
父節點 a7cc18e837
當前提交 b3f54f22ee
簽署人: kevin
GPG Key ID: 0E64ECB9EDE572A3
共有 1 個文件被更改,包括 38 次插入0 次删除

查看文件

@ -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);
}
}