balki/no-js-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved the display/formatting of images

Browse Source
This commit is contained in:
Steven Engler
2019-09-18 18:19:56 -04:00
parent c469a64a65
commit 9870a7c6da
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/styles.css
View File

@ -331,6 +331,7 @@ body {
background-size: 100%;
background-position: bottom;
display: inline-block;
z-index: 1; /* this prevents images with css filters from appearing above the header when in portrait mode */
width: 100%;
}
@ -352,11 +353,9 @@ body {
/* Image/Figure formatting */
.body-content :not(figure) img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 70%;
max-height: 40vw; /* if the image is really tall, we don't want the width to be 70% */
/* regular image elements should be inline elements */
max-width: 100%;
max-height: 60vw; /* if the image is really tall, we don't want the width to be 100% */
}
.body-content figure {
@ -374,6 +373,11 @@ body {
max-height: 40vw; /* if the image is really tall, we don't want the width to be 70% */
}
.body-content figure:not(.color-adapting-image) img {
/* if the image is designed to adapt to the theme, then don't use a background */
background-color: rgb(255, 255, 255); /* images with transparent backgrounds typically assume a light background */
}
.body-content figure figcaption {
font-size: 90%;
line-height: 1.5em;
@ -386,20 +390,14 @@ body {
}
@media only screen and (orientation: portrait) {
.body-content :not(figure) img {
max-height: 100vw;
}
.body-content :not(figure) img,
.body-content figure img {
/* need to target both so that they're more specific */
max-height: 100vw;
}
}
@media only screen and (max-width: 400pt) {
.body-content :not(figure) img {
max-width: 100%;
}
.body-content figure {
max-width: 100%;
}

6
static/css/themes/dark.css
View File

@ -27,8 +27,10 @@ blockquote {
border-left: 0.25em solid #444;
}
.color-adapting-image {
filter: invert(80%);
img.color-adapting-image,
figure.color-adapting-image img {
filter: invert(85%) hue-rotate(180deg);
/* hue rotate trick from: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a */
}
.header {