Make CSS styles more ereader-friendly

Using tricks from https://friendsofepub.github.io/eBookTricks/
although they don't seem to really work; at least the small caps
aren't becoming small caps :/
This commit is contained in:
Hippo 2021-04-13 21:17:47 +05:30
parent 98ac5a8884
commit 8926493a2b

View file

@ -840,13 +840,14 @@ class Seance {
img {
width: 100%;
height: auto;
object-fit: contain;
}
h1 {
font-family: "Abhaya Libre Extrabold";
text-transform: lowercase;
text-align: center;
font-size: 3.6em;
font-size: 2em;
line-height: 1em;
margin-bottom: 0;
}
@ -857,7 +858,21 @@ class Seance {
text-align: center;
font-size: 1.2em;
line-height: 1em;
margin-bottom: 2.4em;
margin-bottom: 1.2em;
}
@supports not (font-variant-caps: small-caps) {
h1 + h2 {
font-variant: normal;
font-feature-settings: "smcp", "onum", "pnum";
}
}
@supports (font-variant-caps: small-caps) {
h1 + h2 {
font-variant: normal;
font-variant-caps: small-caps;
}
}
p {
@ -876,6 +891,14 @@ class Seance {
background-position: 50%;
margin-top: 1.5em;
margin-bottom: 1.5em;
page-break-inside: avoid;
break-inside: avoid;
}
@supports not ((page-break-inside: avoid) and (break-inside: avoid)) {
hr {
-webkit-column-break-inside: avoid;
}
}
`)