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:
parent
98ac5a8884
commit
8926493a2b
1 changed files with 25 additions and 2 deletions
27
seance.js
27
seance.js
|
@ -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;
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
|
|
Loading…
Reference in a new issue