Skip to content

Commit

Permalink
resolves asciidoctor#338 rescale color palette to use darker shades o…
Browse files Browse the repository at this point in the history
…f gray

This commit also removes Kindle-specific color adjustments so minor color changes are expected on Kindle
  • Loading branch information
slonopotamus committed Jul 4, 2020
1 parent dd39e5e commit cfa8052
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 89 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ For a detailed view of what has changed, refer to the {uri-repo}/commits/master[
* store syntax highlighter CSS in a separate file (#339)
* initial landmarks support: appendix, bibliography, bodymatter, cover, frontmatter, glossary, index, preface, toc (#174)
* add support for MathML (#10)
* rescale color palette to use darker shades of gray (#338)

== 1.5.0.alpha.17 (2020-05-25) - @slonopotamus

Expand Down
17 changes: 7 additions & 10 deletions data/styles/color-palette.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
.palette-grayscale {
color: #191918; /* black :: literal, blockquote text */
color: #333332; /* off-black :: body text, heading default, chapter header background */
color: #4F4F4C; /* deep gray :: h4 */
/* what about 40403E or 4C4C4B? for h4 */
color: #666665; /* dark gray :: h5, visited link, list bullets, abstract, caption, open quote */
color: #80807F; /* medium gray :: table borders */
color: #B3B3B1; /* gray :: chapter title, footer subtitle, sidebar border */
color: #DCDCDE; /* lighter gray :: footer lines, byline text, pre border, masthead bottom line */
/* what about DEDEDC instead of DCDCDE? */
color: #F2F2F2; /* off white :: pre background, sidebar background */
color: #000000; /* black :: body text, heading default */
color: #101010; /* off-black :: code, literal, blockquote text */
color: #202020; /* deep gray :: h4 */
color: #333332; /* dark gray :: h5, visited link, list bullets, abstract, caption, open quote */
color: #707070; /* medium gray :: table borders */
color: #C8C8C8; /* gray :: footer subtitle, sidebar border */
color: #E0E0E0; /* off white :: pre background, sidebar background */
color: #FFFFFF; /* white :: chapter subtitle */
}

Expand Down
33 changes: 0 additions & 33 deletions data/styles/epub3-css3-only.css
Original file line number Diff line number Diff line change
Expand Up @@ -83,39 +83,6 @@ body code, body kbd, body pre, pre :not(code) {
}
}

/* Use darker font colors on Kindle Paperwhite and Oasis */
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px), amzn-kf8 and (device-height: 758px) and (device-width: 1024px), amzn-kf8 and (device-height: 1680px) and (device-width: 1264px), amzn-kf8 and (device-height: 1264px) and (device-width: 1680px) {
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 */
}
Expand Down
80 changes: 34 additions & 46 deletions data/styles/epub3.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ b, strong {

b.button {
font-weight: normal;
text-shadow: 1px 0 0 #666665;
color: #191918;
text-shadow: 1px 0 0 #333332;
color: #101010;
white-space: nowrap;
}

Expand Down Expand Up @@ -143,7 +143,7 @@ img {

mark {
background-color: #FFC14F;
color: #191918;
color: #101010;
}

small {
Expand Down Expand Up @@ -199,13 +199,10 @@ td, th {
}

body a:link {
color: #333332;
/* hack for font color in iBooks and Gitden (though Gitden would accept color !important too) */
-webkit-text-fill-color: #333332;
/* Kindle requires the !important on text-decoration */
/* In night mode, the only indicator of a link is the underline, so we need it or a background image */
text-decoration: none !important;
border-bottom: 1px dashed #666665;
border-bottom: 1px dashed #333332;
/* allow URLs to break anywhere if they don't fit on a line; but how do we know it's a URL? */
/*
word-break: break-all;
Expand All @@ -222,9 +219,9 @@ body:first-of-type a:link {
}

body a:visited {
color: #666665;
color: #333332;
/* hack for font color in iBooks */
-webkit-text-fill-color: #666665;
-webkit-text-fill-color: #333332;
}

code.literal {
Expand Down Expand Up @@ -270,7 +267,6 @@ body p,
ul, ol, li, dl, dt, dd, footer,
div.verse .attribution, table.table th, table.table td,
figcaption, caption {
color: #333332;
/* NOTE iBooks will forcefully override font-family of text inside div, p and span elements when font other than Original is selected */
/* NOTE iBooks honors Original font for prose text if declared in display-options.xml */
font-family: "Noto Serif", serif;
Expand All @@ -281,7 +277,7 @@ body p, li, dt, dd, footer {
}

code, kbd, pre {
color: #191918;
color: #101010;
font-family: "M+ 1mn", monospace;
-webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
}
Expand Down Expand Up @@ -462,7 +458,7 @@ ul > li::before {

ul > li::before {
content: "\25AA"; /* small black square */
color: #666665;
color: #333332;
}

ul ul > li::before {
Expand All @@ -472,7 +468,7 @@ ul ul > li::before {

ul ul ul > li::before {
content: "\2022"; /* small black circle */
color: #666665;
color: #333332;
}

ul ul ul ul > li::before {
Expand Down Expand Up @@ -534,22 +530,20 @@ ul.references > li > span.principal {

/* sized based on the major third modular scale (4:5, 16px, 24px) */
h1, h2 {
color: #333332;
font-size: 1.5em;
word-spacing: -0.075em;
margin-top: 1em; /* 1.5rem */
margin-bottom: -0.3333em; /* -0.5rem, 0.5rem to content */
}

h3 {
color: #333332;
font-size: 1.25em;
margin-top: 0.84em; /* 1.05rem */
margin-bottom: -0.5em; /* -0.625rem, 0.375rem to content */
}

h4 {
color: #4F4F4C;
color: #202020;
font-weight: 200;

font-size: 1.1em;
Expand All @@ -564,7 +558,7 @@ h4 {
}

h5 {
color: #666665;
color: #333332;
/*
font-size: 1em;
text-transform: uppercase;
Expand Down Expand Up @@ -594,7 +588,7 @@ h5 code {
/*padding: 0.75em 1.5em 0.25em 1.5em;*/
padding: 0.25em 0;
margin-bottom: 2.5em;
border-bottom: 1px solid #666665;
border-bottom: 1px solid #333332;
/* TODO maybe what we need to get articles to start in left column
-webkit-column-break-before: left;
page-break-before: left;
Expand All @@ -607,15 +601,14 @@ h1.chapter-title {
margin-top: 3.5em; /* 4.2rem - would like to use 9vh */
margin-bottom: 0;
padding-bottom: 0.8333em; /* 1.2rem */
color: #666665;
color: #333332;
text-transform: uppercase; /* not supported in Adobe Digital Editions */
word-spacing: -0.075em;
letter-spacing: -0.01em;
}

h1.chapter-title .subtitle {
font-weight: 400;
color: #333332;
display: block;
font-size: 1.5em;
margin: 0 0 0 0.75em; /* would like to use 2vw */
Expand All @@ -632,7 +625,6 @@ h1.chapter-title b {
}

.chapter-header p.byline {
color: #333332;
/* float left and height 0 takes this line out of the flow */
float: left;
height: 0;
Expand Down Expand Up @@ -663,15 +655,15 @@ div.abstract {
}

div.abstract > p {
color: #666665;
color: #333332;
font-size: 1.05em; /* or 1.1em? */
line-height: 1.75;
}

div.abstract > p a:link {
color: #666665;
color: #333332;
/* hack for font color in iBooks */
-webkit-text-fill-color: #666665;
-webkit-text-fill-color: #333332;
}

div.abstract > p:first-child::first-line {
Expand Down Expand Up @@ -748,7 +740,7 @@ figcaption,
caption {
font-size: 0.9em;
font-style: italic;
color: #666665;
color: #333332;
letter-spacing: -0.01em;
line-height: 1.4;
text-align: left;
Expand Down Expand Up @@ -780,10 +772,10 @@ figure.listing > figcaption + pre {
}

aside.sidebar {
border: 1px solid #B3B3B1;
border: 1px solid #C8C8C8;
padding: 0 1.5em;
font-size: 0.9em;
background-color: #F2F2F2;
background-color: #E0E0E0;
text-align: right; /* aligns heading to right */
/*
-webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
Expand Down Expand Up @@ -811,7 +803,7 @@ aside.sidebar > h2 {
letter-spacing: 0;
display: inline-block;
white-space: nowrap; /* for some reason it's wrapping prematurely */
border: 1px solid #B3B3B1;
border: 1px solid #C8C8C8;
padding: 1.5em .75em .5em .75em;
margin: -1em 0.5em -0.25em 0.5em;
background-color: #FFFFFF;
Expand Down Expand Up @@ -848,7 +840,7 @@ div[class~="blockquote"] {
}

blockquote > p {
color: #191918;
color: #101010;
font-style: italic;

/*
Expand All @@ -865,7 +857,7 @@ blockquote > p {

blockquote > p:first-of-type::before {
display: inline-block;
color: #666665;
color: #333332;
text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);

/* using serif quote from entypo */
Expand Down Expand Up @@ -898,7 +890,7 @@ blockquote footer {
blockquote footer .context {
font-size: 0.9em;
letter-spacing: -0.05em;
color: #666665;
color: #333332;
}

pre {
Expand All @@ -909,14 +901,10 @@ pre {
overflow-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
font-size: 0.85em;
line-height: 1.4; /* matches what Kindle uses and can't go less */
background-color: #F2F2F2;
background-color: #E0E0E0;
padding: 0.6em 0.9em; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
/*
border-top: 3px solid #DCDCDE;
*/
/* QUESTION #B3B3B1? */
border-top: 1px solid #DCDCDE;
border-right: 1px solid #DCDCDE;
border-top: 1px solid #C8C8C8;
border-right: 1px solid #C8C8C8;
}

body:first-of-type pre {
Expand Down Expand Up @@ -1120,7 +1108,7 @@ table.table th {
}

table.table thead th {
border-bottom: 1px solid #80807F;
border-bottom: 1px solid #707070;
}

table.table td > p,
Expand All @@ -1141,26 +1129,26 @@ table.table div.embed > * + * {
table.table-framed {
border-width: 1px;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-framed-topbot {
border-width: 1px 0;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-framed-sides {
border-width: 0 1px;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-grid th,
table.table-grid td {
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-grid thead tr > *:last-child {
Expand All @@ -1176,14 +1164,14 @@ table.table-grid-rows tbody th,
table.table-grid-rows tbody td {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-grid-cols th,
table.table-grid-cols td {
border-width: 0 1px 0 0;
border-style: solid;
border-color: #80807F;
border-color: #707070;
}

table.table-grid-cols thead th:last-child {
Expand Down Expand Up @@ -1214,7 +1202,7 @@ hr.pagebreak + * {

img.headshot {
float: left;
border: 1px solid #80807F;
border: 1px solid #707070;
padding: 1px;
margin: 0.35em 1em 0.15em 0;
height: 5em !important;
Expand Down

0 comments on commit cfa8052

Please sign in to comment.