I just modified an ePub that was published several years ago and was working perfectly well in order to try out a replacement icon font that I'm commissioning for it.
While I was working on that, I also added some media queries, that I'm just learning how to use: one to make the body use lining figures and one so that the font colors would only show up if the screen supports color.
After I was done, I ran a check in Calibre, which it passed. I then ran it through the IDPF ePubCheck validator, which it also passed.
I then transferred it over to my Kobo reader. On the Kobo, it appears as though it had no stylesheet at all. I'm mystified as to why since nothing is showing me any errors in it. Is this a known problem with media queries? Is there some other reason why it might be happening?
Code:
/*
This are the basic body text and small-caps fonts.
*/
@font-face {
src: url(../Vollkorn-Regular.ttf);
font-family: "Vollkorn";
font-weight: normal;
font-style: normal;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-Italic.ttf);
font-family: "Vollkorn";
font-weight: normal;
font-style: italic;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-Bold.ttf);
font-family: "Vollkorn";
font-weight: bold;
font-style: normal;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-BoldItalic.ttf);
font-family: "Vollkorn";
font-weight: bold;
font-style: italic;
font-stretch: normal;
}
@font-face {
src: url(../VollkornSC-Bold.ttf);
font-family: "Vollkorn SC";
font-weight: bold;
font-style: normal;
font-stretch: normal;
}
@font-face {
src: url(../VollkornSC-Regular.ttf);
font-family: "Vollkorn SC";
font-weight: normal;
font-style: normal;
font-stretch: normal;
}
/*
This is the special font that contains the nine icons derived from the Chuubo's Marvelous Wish-Granting Engine system. I advise installing it on your system so that you can actually see what you're working with.
Remembering where the glyphs for these symbols go is a pain in the neck; just copy and paste them from an ePub that already includes them.
*/
@font-face {
font-family: CG-RB-test;
font-weight: normal;
font-style: normal;
src: url(../CG-RB-test-Regular.otf);
}
.chuubo {
font-family: CG-RB-test;
font-style: normal;
font-weight: normal;
}
/*
These are the basic styles governing the body text.
*/
blockquote {
margin-left: 5%;
margin-right: 5%;
}
body {
font-family: "Vollkorn";
display: block;
text-align: justify;
widows: 1;
orphans: 1;
}
.bold {
font-weight: bold;
}
.break1 {
margin-top: 0.5em;
}
.center {
text-align: center;
text-indent: 0;
}
.clean {
text-indent: 0;
}
div.box {
background-color: LightGray;
border: 4px solid black;
padding: 0.25em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
em {
font-style: italic;
}
.hidden {
display: none;
}
hr {
margin-top: 0.5em;
margin-bottom: 0.5em;
visibility: hidden;
}
.italic {
font-style: italic;
}
.left {
text-align: left;
}
.not-italic {
font-style: normal;
}
p {
text-indent: 10%;
margin-top: 0;
margin-bottom: 0;
}
.right {
text-align: right;
text-indent: 0;
}
.small-caps {
font-variant: small-caps;
font-style: normal;
font-family: "Vollkorn SC";
}
strong {
font-weight: bold;
}
.subtitle {
margin-top: 0;
margin-bottom: 0.5em;
text-align: right;
font-style: italic;
font-weight: normal;
border-bottom: none;
}
.subtitle-over-subtitle {
margin-top: 0;
margin-bottom: 0;
text-align: right;
font-style: italic;
font-weight: normal;
border-bottom: none;
}
ul ul {
list-style-type: circle;
margin-top: 0;
margin-bottom: 0;
}
ul ul ul {
list-style-type: square;
margin-top: 0;
margin-bottom: 0;
}
ul p, ol p {
display: list-item;
list-style-type: none;
}
.underline {
text-decoration: underline;
}
/*
These are the four main styles for headers and "headers." Using these styles means that a heading's appearance is unconnected to its heading level.
"header-a" is for the beginning of chapters only. It takes up an entire page. It corresponds with the h1 heading.
*/
.header-a {
font-family: "Vollkorn SC";
font-size: 2em;
font-weight: bold;
text-align: center;
text-indent: 0;
padding-top: 40%;
font-variant: small-caps;
}
.header-a1 {
font-family: "Vollkorn SC";
text-align: center;
text-indent: 0;
margin-top: 25%;
font-size: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
.header-a2 {
font-family: "Vollkorn SC";
text-align: center;
margin-top: 10%;
text-indent: 0;
font-variant: small-caps;
}
/*
"header-b" mimics the large headings from the book that use large font and small-caps. It roughly corresponds with h2, h3, and h4.
*/
.header-b {
font-family: "Vollkorn SC";
font-size: 1.3em;
margin-top: 0.5em;
margin-bottom: 0.2em;
border-bottom: 3px solid black;
text-align: left;
text-indent: 0;
font-weight: bold;
font-variant: small-caps;
page-break-after: avoid;
}
/*
"header-c" mimics the regular-sized, bold-italic headings from the book. It roughly corresponds to the h5 heading.
*/
.header-c {
font-size: 1em;
font-style: italic;
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.2em;
border-bottom: 3px solid black;
text-align: left;
text-indent: 0;
page-break-after: avoid;
}
/*
"header-d" mimics the regular-sized, small-caps headings from the book. It roughly corresponds to the h6 heading.
*/
.header-d {
font-family: "Vollkorn SC";
font-size: 1em;
font-weight: bold;
font-style: normal;
margin-top: 0.5em;
margin-bottom: 0.2em;
border-bottom: 3px solid black;
text-align: left;
text-indent: 0;
font-variant: small-caps;
page-break-after: avoid;
}
/*
Headings break before, or after, or not, based on the following styles:
*/
.break-before {
page-break-before: always;
}
.break-after {
page-break-after: always;
}
/*
These are the eight Chuubo icon colors.
*/
@media (color) {
.black {
color: #000;
}
.blue {
color: #0715cd;
}
.golden {
color: #FC0;
}
.green {
color: #006400;
}
.orange {
color: #F93;
}
.purple {
color: #660198;
}
.red {
color: #e00707;
}
.silver {
color: #5C5C5C;
}
}
/*
These are the primary CSS selector traits, that mostly involve not indenting after a heading or a table or something.
*/
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, ul + p, div + p, p.subtitle + p, p.right + p, hr + p, blockquote + p, p.border2 + p, ol + p, table + p, p.header-b + p, p.header-c + p, p.header-d + p {
text-indent: 0;
}
div > .header-c, div > .header-d, div > .header-b {
margin-top: 0;
}
div > p + .header-d {
margin-top: 0.5em;
}
h3 + p.subtitle, h4 + p.subtitle, h5 + p.subtitle, h6 + p.subtitle, h3 + p.right, h4 + p.right, h5 + p.right, h6 + p.right {
margin-top: 0;
}
p.right + p {
margin-top: 1em;
}
blockquote, blockquote > p {
text-indent: 0;
}
blockquote > p + p {
text-indent: 10%;
margin-top: 0;
}
p.header-b + p.subtitle {
font-size: 1.2em;
}
/*
The styles below are for tables.
*/
table {
border: 4px solid LightGray;
border-collapse: separate;
border-spacing: 0;
display: table;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-indent: 0;
width: 100%;
}
tr.top {
font-weight: bold;
text-align: center;
vertical-align: middle;
}
td.center, td.left {
vertical-align: middle;
}
td {
padding: 2px;
}
tr.top td {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid LightGray;
}
tr:nth-child(even) {
background-color: LightGray;
}
div.box table {
background-color: white;
border: 2px solid black;
}
/*
These elements modify the example of play scripts.
*/
div.example > p {
text-indent: 0;
margin-top: 0.5em;
}
div.example > blockquote > p {
font-style: italic;
}
div.example > blockquote > p.header-d {
font-style: normal;
}
/*
These styles govern footnotes and their links.
*/
a {
text-decoration: none;
}
.footnote {
page-break-before: always;
padding-top: 10%;
font-size: small;
text-indent: 0;
}
p.footnote + p.footnote {
page-break-before: auto;
}
.footnotelink {
vertical-align: super;
font-size: small;
}
p.footnote + p.footnote {
padding-top: 0;
text-indent: 10%;
}
/*
These styles govern the spacing for flores and luthes.
*/
.indent0 {
text-indent: 0;
}
.indent1 {
text-indent: 10%;
}
.indent2 {
text-indent: 15%;
}
.indent3 {
text-indent: 20%;
}
/*
These styles govern the divs that contain flores.
*/
div.flore {
page-break-before: always;
page-break-after: always;
}
div.flore blockquote {
font-style: italic;
padding-top: 30%;
margin-left: 0;
margin-right: 0;
}
/*
These rules govern the boxes around signs and quest cards.
*/
p.border {
padding: 0.25em;
text-align: center;
text-indent: 0;
font-size: 3em;
display: inline;
}
div.center {
margin: 1em;
}
p.border1 {
border-top: 4px;
border-right: 4px;
border-bottom: 2px;
border-left: 4px;
border-style: solid;
margin-top: 1em;
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 0;
text-align: center;
text-indent: 0;
}
p.border2 {
border-top: 2px;
border-right: 4px;
border-bottom: 4px;
border-left: 4px;
border-style: solid;
margin-top: 0;
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
text-indent: 0;
}
/*
These styles modify the lining and spacing of numbers on those readers that support it.
*/
@supports (font-variant-numeric: lining-nums) {
body {
font-variant-numeric: lining-nums;
}
}
@supports (font-variant-numeric: tabular-nums) {
table, .subtitle, .right {
font-variant-numeric: lining-nums tabular-nums;
}
}