Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

resolves #338 rescale color palette to use darker shades of gray #347

Merged
merged 1 commit into from
Jul 18, 2020
Merged

resolves #338 rescale color palette to use darker shades of gray #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.adoc
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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