mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-06 09:38:33 -05:00
fix(epub): Replace CSS variables with literal values to prevent XML parsing errors
Addresses #1052 ## Problem The EPUB version was failing to open in ClearView with XML parsing errors: "Comment must not contain '--' (double-hyphen)" at multiple lines. ## Root Cause CSS custom properties (--crimson, --text-primary, etc.) contain double hyphens which violate XML comment specifications when processed by strict XML parsers in some EPUB readers like ClearView. ## Solution - Removed :root CSS variable definitions - Replaced all 66 instances of var() references with literal hex values - Added documentation explaining why variables were removed - Maintained color reference guide for future maintenance ## Changes - Removed :root { --crimson: #A51C30; ... } block - Replaced all var(--crimson) → #A51C30 - Replaced all var(--text-primary) → #1a202c - Replaced all var(--text-secondary) → #4a5568 - Replaced all var(--text-muted) → #6c757d - Replaced all var(--background-light) → #f8f9fa - Replaced all var(--background-code) → #f1f3f4 - Replaced all var(--border-light) → #e9ecef - Replaced all var(--border-medium) → #dee2e6 - Replaced all var(--crimson-dark) → #8B1729 ## Testing - Verified no remaining var() references in epub.css - Verified no remaining CSS variable definitions - Visual appearance remains identical (same hex values)
This commit is contained in:
Vijay Janapa Reddi
@@ -8,21 +8,28 @@
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Color Variables - Harvard Crimson Theme
|
||||
Color Values - Harvard Crimson Theme
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
--crimson: #A51C30;
|
||||
--crimson-dark: #8B1729;
|
||||
--crimson-light: #C5344A;
|
||||
--text-primary: #1a202c;
|
||||
--text-secondary: #4a5568;
|
||||
--text-muted: #6c757d;
|
||||
--background-light: #f8f9fa;
|
||||
--background-code: #f1f3f4;
|
||||
--border-light: #e9ecef;
|
||||
--border-medium: #dee2e6;
|
||||
}
|
||||
/*
|
||||
* NOTE: CSS custom properties (variables like --crimson, --text-primary, etc.)
|
||||
* have been replaced with literal hex values throughout this stylesheet.
|
||||
*
|
||||
* REASON: Some EPUB readers (e.g., ClearView) have strict XML parsers that flag
|
||||
* double-hyphens in CSS as XML comment violations, causing parsing errors.
|
||||
*
|
||||
* Color reference for maintenance:
|
||||
* - Crimson: #A51C30
|
||||
* - Crimson Dark: #8B1729
|
||||
* - Crimson Light: #C5344A
|
||||
* - Text Primary: #1a202c
|
||||
* - Text Secondary: #4a5568
|
||||
* - Text Muted: #6c757d
|
||||
* - Background Light: #f8f9fa
|
||||
* - Background Code: #f1f3f4
|
||||
* - Border Light: #e9ecef
|
||||
* - Border Medium: #dee2e6
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base & Typography
|
||||
@@ -37,7 +44,7 @@ body {
|
||||
text-align: justify;
|
||||
widows: 3;
|
||||
orphans: 3;
|
||||
color: var(--text-primary);
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -55,21 +62,21 @@ h1, h2, h3, h4, h5, h6 {
|
||||
text-align: left;
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid;
|
||||
color: var(--text-primary);
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
page-break-before: always;
|
||||
border-bottom: 2px solid var(--crimson);
|
||||
border-bottom: 2px solid #A51C30;
|
||||
padding-bottom: 0.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
border-left: 5px solid var(--crimson);
|
||||
border-left: 5px solid #A51C30;
|
||||
border-bottom: 1px solid rgba(165, 28, 48, 0.3);
|
||||
padding-left: 16px;
|
||||
padding-bottom: 8px;
|
||||
@@ -79,7 +86,7 @@ h2 {
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
border-left: 4px solid var(--crimson);
|
||||
border-left: 4px solid #A51C30;
|
||||
border-bottom: 1px solid rgba(165, 28, 48, 0.25);
|
||||
padding-left: 14px;
|
||||
padding-bottom: 6px;
|
||||
@@ -88,7 +95,7 @@ h3 {
|
||||
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
border-left: 3px solid var(--crimson);
|
||||
border-left: 3px solid #A51C30;
|
||||
border-bottom: 1px solid rgba(165, 28, 48, 0.2);
|
||||
padding-left: 12px;
|
||||
padding-bottom: 4px;
|
||||
@@ -98,7 +105,7 @@ h4 {
|
||||
|
||||
h5 {
|
||||
font-size: 1.1em;
|
||||
border-left: 2px solid var(--crimson);
|
||||
border-left: 2px solid #A51C30;
|
||||
border-bottom: 1px solid rgba(165, 28, 48, 0.15);
|
||||
padding-left: 10px;
|
||||
padding-bottom: 3px;
|
||||
@@ -108,7 +115,7 @@ h5 {
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
border-left: 1px solid var(--crimson);
|
||||
border-left: 1px solid #A51C30;
|
||||
border-bottom: 1px solid rgba(165, 28, 48, 0.1);
|
||||
padding-left: 8px;
|
||||
padding-bottom: 2px;
|
||||
@@ -121,25 +128,25 @@ h6 {
|
||||
========================================================================== */
|
||||
|
||||
a {
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--crimson-dark);
|
||||
color: #8B1729;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--crimson-dark);
|
||||
color: #8B1729;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1.5em;
|
||||
padding: 0 1.5em;
|
||||
border-left: 3px solid var(--crimson);
|
||||
border-left: 3px solid #A51C30;
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
color: #4a5568;
|
||||
background-color: rgba(165, 28, 48, 0.05);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
@@ -150,8 +157,8 @@ blockquote {
|
||||
|
||||
/* Enhanced code blocks with syntax highlighting support */
|
||||
pre {
|
||||
background-color: var(--background-code);
|
||||
border: 1px solid var(--border-light);
|
||||
background-color: #f1f3f4;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
padding: 0.75em;
|
||||
white-space: pre-wrap;
|
||||
@@ -166,11 +173,11 @@ pre {
|
||||
|
||||
code {
|
||||
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
|
||||
background-color: var(--border-light);
|
||||
background-color: #e9ecef;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
color: var(--text-primary);
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@@ -198,7 +205,7 @@ pre code {
|
||||
/* Code listings with enhanced styling */
|
||||
.listing {
|
||||
margin: 1rem 0;
|
||||
border: 2px solid var(--border-medium);
|
||||
border: 2px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
@@ -207,11 +214,11 @@ pre code {
|
||||
.listing figcaption,
|
||||
.listing .listing-caption {
|
||||
background: linear-gradient(135deg, #f7f9fc 0%, #edf2f7 100%);
|
||||
border-bottom: 2px solid var(--border-medium);
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
color: #1a202c;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
@@ -219,7 +226,7 @@ pre code {
|
||||
|
||||
.listing .sourceCode {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--background-code);
|
||||
background-color: #f1f3f4;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
@@ -258,17 +265,17 @@ table {
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--background-light);
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid var(--crimson);
|
||||
border-bottom: 2px solid #A51C30;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
@@ -278,7 +285,7 @@ th {
|
||||
/* Special treatment for technology comparison headers */
|
||||
th:not(:first-child) {
|
||||
background-color: rgba(165, 28, 48, 0.04);
|
||||
border-bottom: 3px solid var(--crimson);
|
||||
border-bottom: 3px solid #A51C30;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
@@ -295,8 +302,8 @@ td:first-child,
|
||||
th:first-child {
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
background-color: var(--background-light);
|
||||
border-right: 1px solid var(--border-light);
|
||||
background-color: #f8f9fa;
|
||||
border-right: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* Zebra striping for better readability */
|
||||
@@ -317,7 +324,7 @@ table caption,
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
color: #4a5568;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -355,7 +362,7 @@ h1[epub|type="title"],
|
||||
#titlepage h1 {
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
@@ -369,7 +376,7 @@ h2[epub|type="subtitle"],
|
||||
#titlepage h2 {
|
||||
font-size: 1.4em;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
color: #4a5568;
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
line-height: 1.3;
|
||||
@@ -386,7 +393,7 @@ p[epub|type="author"],
|
||||
#titlepage p:contains("Prof.") {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
color: #1a202c;
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -397,7 +404,7 @@ p[epub|type="author"],
|
||||
#titlepage .publisher,
|
||||
#titlepage .affiliation {
|
||||
font-size: 1em;
|
||||
color: var(--text-secondary);
|
||||
color: #4a5568;
|
||||
margin: 0.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -406,7 +413,7 @@ p[epub|type="author"],
|
||||
.title-page .date,
|
||||
#titlepage .date {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted);
|
||||
color: #6c757d;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -417,7 +424,7 @@ p[epub|type="author"],
|
||||
#titlepage .rights,
|
||||
#titlepage .copyright {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
color: #6c757d;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
@@ -435,7 +442,7 @@ details[class*="callout"] {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 8px rgba(165, 28, 48, 0.1);
|
||||
page-break-inside: avoid;
|
||||
@@ -494,7 +501,7 @@ details[class*="callout"] > summary {
|
||||
}
|
||||
|
||||
.callout-important {
|
||||
border-left-color: var(--crimson);
|
||||
border-left-color: #A51C30;
|
||||
}
|
||||
|
||||
.callout-important .callout-header {
|
||||
@@ -524,7 +531,7 @@ details.callout-definition {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #1B4F72;
|
||||
}
|
||||
|
||||
@@ -553,7 +560,7 @@ details.callout-example {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #148F77;
|
||||
}
|
||||
|
||||
@@ -610,7 +617,7 @@ details.callout-quiz-question {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #5B4B8A;
|
||||
}
|
||||
|
||||
@@ -638,7 +645,7 @@ details.callout-quiz-answer {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #4a7c59;
|
||||
}
|
||||
|
||||
@@ -662,15 +669,15 @@ div.callout-chapter-forward,
|
||||
.callout-chapter-forward,
|
||||
details.callout-chapter-connection,
|
||||
details.callout-chapter-forward {
|
||||
border-left-color: var(--crimson);
|
||||
border-left-color: #A51C30;
|
||||
background-color: rgba(165, 28, 48, 0.05);
|
||||
margin: 1.25rem 0;
|
||||
padding: 0.75rem 0.85rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border-left: 5px solid var(--crimson);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #A51C30;
|
||||
}
|
||||
|
||||
div.callout-chapter-connection::before {
|
||||
@@ -679,7 +686,7 @@ div.callout-chapter-connection::before {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
}
|
||||
|
||||
div.callout-chapter-forward::before {
|
||||
@@ -688,7 +695,7 @@ div.callout-chapter-forward::before {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
}
|
||||
|
||||
.callout-chapter-connection .callout-header,
|
||||
@@ -708,7 +715,7 @@ details.callout-chapter-recall {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #C06014;
|
||||
}
|
||||
|
||||
@@ -742,7 +749,7 @@ details.callout-resource-exercises {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #20B2AA;
|
||||
}
|
||||
|
||||
@@ -792,7 +799,7 @@ details.callout-code {
|
||||
border-radius: 0.5rem;
|
||||
border-left-width: 5px;
|
||||
border-left-style: solid;
|
||||
border: 1px solid var(--border-light);
|
||||
border: 1px solid #e9ecef;
|
||||
border-left: 5px solid #3C4858;
|
||||
}
|
||||
|
||||
@@ -843,7 +850,7 @@ figcaption {
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
color: var(--text-muted);
|
||||
color: #6c757d;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -857,7 +864,7 @@ a[href^="#fn-"],
|
||||
font-size: 0.75em;
|
||||
vertical-align: super;
|
||||
text-decoration: none;
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
font-weight: 600;
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
@@ -876,10 +883,10 @@ div[id^="fn-"],
|
||||
.footnote {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid var(--border-light);
|
||||
border-top: 2px solid #e9ecef;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary);
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
/* Individual footnote entries */
|
||||
@@ -896,7 +903,7 @@ div[id^="fn-"],
|
||||
|
||||
/* Footnote numbers */
|
||||
.footnotes li::marker {
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -904,7 +911,7 @@ div[id^="fn-"],
|
||||
a[href^="#fnref-"],
|
||||
.footnote-back {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
margin-left: 0.5rem;
|
||||
padding: 2px 4px;
|
||||
@@ -914,7 +921,7 @@ a[href^="#fnref-"],
|
||||
|
||||
a[href^="#fnref-"]:hover,
|
||||
.footnote-back:hover {
|
||||
color: var(--crimson);
|
||||
color: #A51C30;
|
||||
background-color: rgba(165, 28, 48, 0.05);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -925,7 +932,7 @@ a[href^="#fnref-"]:hover,
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background-color: var(--crimson);
|
||||
background-color: #A51C30;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user