Browse Source

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
tags/v0.1.2^0
Kevin C. Coram 1 year ago
parent
commit
b3f54f22ee
Signed by: kevin GPG Key ID: 0E64ECB9EDE572A3
1 changed files with 38 additions and 0 deletions
  1. +38
    -0
      static/css/style.css

+ 38
- 0
static/css/style.css 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);
}
}

Loading…
Cancel
Save