Skip to content

Commit

Permalink
asciidoc epub3 stock - no change with this, but sets up to tweak rend…
Browse files Browse the repository at this point in the history 
…ering
  • Loading branch information
@heckj
heckj committed Apr 2, 2020
1 parent 9178334 commit f10a8e9
Show file tree
Hide file tree
Showing 4 changed files with 1,587 additions and 0 deletions.
226 changes: 226 additions & 0 deletions docs/styles/epub3-css3-only.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
/* @page is for EPUB2 only */
@page {
margin: 0;
}

body.calibre-desktop {
padding: 20pt 0 !important;
}

body.calibre-desktop > section {
margin: 0 25pt;
}

/* Gitden & Namo default to 16px font-size; bump it to 19px (118.75%) */
body.gitden-reader,
body.namo-epub-library {
font-size: 118.75%;
}

/* Gitden doesn't give us much margin, so let's roughly match Aldiko and Kindle (narrow setting) */
body.gitden-reader {
margin: 0 5pt !important;
}

/* Namo has the same margin problem, except setting side margins doesn't work */
/*body.namo-epub-library > section.chapter {
margin: 0 5pt;
}*/

/* Use tighter margins and smaller font (18px) on phones (Nexus 4 and smaller) */
@media only screen and (max-device-width: 768px) and (max-device-height: 1280px),
only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
body.gitden-reader,
body.namo-epub-library {
font-size: 112.5%;
}

/*body.gitden-reader {
margin: 0 5pt !important;
}*/

/*body.namo-epub-library > section.chapter {
margin: 0 5pt;
}*/
}

body.gitden-reader pre {
white-space: pre-wrap !important; /* Gitden must be applying white-space: pre !important */
}

body h1, body h2, body h3:not(.list-heading), body h4, body h5, body h6,
h1 :not(code), h2 :not(code), h3:not(.list-heading) :not(code), h4 :not(code), h5 :not(code), h6 :not(code) {
/* !important required to override custom font setting in Kindle / Gitden / Namo */
/* Gitden requires the extra weight of a parent selector; it also makes headings bold when custom font is specified */
/* Kindle and Gitden require the override on heading child elements */
font-family: "M+ 1p", sans-serif !important;
}

/* QUESTION what about nested elements inside code? */
body code, body kbd, body pre, pre :not(code) {
/* !important required to override custom font setting in Kindle / Gitden / Namo */
/* Gitden requires the extra weight of a parent selector */
/* Kindle and Gitden require the override on pre child elements */
font-family: "M+ 1mn", monospace !important;
}

@media amzn-kf8 {
/* Kindle does its own margin management, so don't use an explicit margin */
/*body {
margin: 0 !important;
}*/

/* text-rendering is the only way to enable kerning in Kindle (and Calibre, though it seems to kern automatically) */
/* personally, I think Kindle overdoes kerning, but we're running with it for now */
/* text-rendering: optimizeLegibility kills certain Kindle eInk devices */
/*h1, h2, h3, h4, h5, h6,
body p, li, dd, blockquote > footer,
th, td, figcaption, caption {
text-rendering: optimizeLegibility;
}*/

/* hack line height of subtitle using floats on Kindle */
h1.chapter-title .subtitle {
margin-top: -0.2em;
margin-bottom: 0.3em; /* compensate for reduced line height */
}

/* NOTE using b instead of span since Firefox ePubReader applies immutable styles to span */
h1.chapter-title .subtitle > b {
float: left;
display: inline-block;
margin-bottom: -0.3em; /* reduce the line height */
padding-right: 0.2em; /* spacing between words */
}

h1.chapter-title .subtitle > b:last-child {
padding-right: 0;
}

h1.chapter-title .subtitle::after {
display: table;
content: ' ';
clear: both;
}
}

/* Use darker font colors on Kindle Paperwhite */
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px),
amzn-kf8 and (device-height: 758px) and (device-width: 1024px) {
body p,
div.abstract > p,
ul, ol, li, dl, dt, dd, footer,
div.verse .attribution, table.table th, table.table td,
figcaption, caption,
h1, h2, h3, h4, h5 {
color: #000000;
}

body a:link,
div.abstract > p a:link {
color: #000000;
-webkit-text-fill-color: #000000;
}

body a:visited {
color: #333332;
-webkit-text-fill-color: #333332;
}

.chapter-header {
color: #191918;
border-bottom-color: #191918;
}

h1.chapter-title .subtitle,
.chapter-header p.byline {
color: #000000;
}
}

.chapter-header p.byline {
height: auto; /* Aldiko requires this value to be 0; reset it for all others */
}

/* Font-based icons */
.icon {
display: inline-block;
/* !important required to override custom font setting in Kindle (since .icon can appear inside a span) */
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1;
}

.icon-1_5x {
padding: 0 0.25em;
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}

.icon-2x {
padding: 0 0.5em;
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}

.icon-small {
font-size: 0.85em;
vertical-align: 0.075em;
}

.icon-1_5em {
font-size: 1.5em;
}

.icon-2em {
font-size: 2em;
}

.icon-3em {
font-size: 3em;
}

.icon-4em {
font-size: 4em;
}

.icon-rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.icon-rotate-90i {
-webkit-transform: scale(-1, 1) rotate(90deg);
transform: scale(-1, 1) rotate(90deg);
}

.icon-rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.icon-rotate-180i {
-webkit-transform: scale(-1, 1) rotate(180deg);
transform: scale(-1, 1) rotate(180deg);
}

.icon-rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}

.icon-rotate-270i {
-webkit-transform: scale(-1, 1) rotate(270deg);
transform: scale(-1, 1) rotate(270deg);
}

.icon-flip-h {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}

.icon-flip-v {
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
94 changes: 94 additions & 0 deletions docs/styles/epub3-fonts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: normal;
src: url(../fonts/notoserif-regular-latin.ttf);
}

@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: normal;
src: url(../fonts/notoserif-italic-latin.ttf);
}

@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: bold;
src: url(../fonts/notoserif-bold-latin.ttf);
}

@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: bold;
src: url(../fonts/notoserif-bolditalic-latin.ttf);
}

/* NOTE: use numeric font weights for M+ 1p since we're using weight variations */
@font-face {
font-family: "M+ 1p";
font-style: normal;
font-weight: 400;
src: url(../fonts/mplus1p-regular-latin.ttf);
}

@font-face {
font-family: "M+ 1p";
font-style: normal;
font-weight: 200;
src: url(../fonts/mplus1p-light-latin.ttf);
}

@font-face {
font-family: "M+ 1p";
font-style: normal;
font-weight: 700;
src: url(../fonts/mplus1p-bold-latin.ttf);
}

@font-face {
font-family: "M+ 1mn";
font-style: normal;
font-weight: normal;
src: url(../fonts/mplus1mn-regular-ascii-conums.ttf);
}

@font-face {
font-family: "M+ 1mn";
font-style: italic;
font-weight: normal;
/* actually the M+ 1mn light font repurposed using FontForge to stand-in for Italic */
src: url(../fonts/mplus1mn-italic-ascii.ttf);
}

@font-face {
font-family: "M+ 1mn";
font-style: normal;
font-weight: bold;
/* actually the M+ 1mn medium font repurposed using FontForge to stand-in for Bold */
src: url(../fonts/mplus1mn-bold-ascii.ttf);
}

@font-face {
font-family: "M+ 1mn";
font-style: italic;
font-weight: bold;
/* actually the M+ 1mn bold font repurposed using FontForge to stand-in for Bold Italic */
src: url(../fonts/mplus1mn-bolditalic-ascii.ttf);
}

@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url(../fonts/fontawesome-icons.ttf);
}

@font-face {
font-family: "FontIcons";
font-style: normal;
font-weight: normal;
src: url(../fonts/assorted-icons.ttf);
}
Loading

0 comments on commit f10a8e9

Please sign in to comment.