Skip to content

Commit 5db38b5

Browse files
nicktahaninicktahani
authored
Merge pull request #7 from eScholarship/organize-styles
move css to a separate file
2 parents 029fa1c + 4bebfcd commit 5db38b5

2 files changed

Lines changed: 368 additions & 368 deletions

File tree

‎create_branded_html.sh‎

Lines changed: 1 addition & 368 deletions
Original file line numberDiff line numberDiff line change
@@ -23,374 +23,7 @@ cat << EOF
2323
<meta charset="UTF-8">
2424
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2525
<title>$SITE_TITLE</title>
26-
<style>
27-
* {
28-
margin: 0;
29-
padding: 0;
30-
box-sizing: border-box;
31-
}
32-
33-
body {
34-
font-family: Georgia, serif;
35-
line-height: 1.6;
36-
color: #333;
37-
background-color: #f8f9fa;
38-
}
39-
40-
.container {
41-
max-width: 1200px;
42-
margin: 0 auto;
43-
padding: 0 20px;
44-
}
45-
46-
.site-header {
47-
background: #62708d;
48-
color: #fff;
49-
padding: 1.5rem 0;
50-
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
51-
}
52-
53-
.site-header .container {
54-
display: flex;
55-
justify-content: space-between;
56-
align-items: center;
57-
}
58-
59-
.brand {
60-
color: #fff;
61-
font-size: 2rem;
62-
font-weight: bold;
63-
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
64-
border-bottom: none;
65-
padding: 0;
66-
}
67-
68-
.tagline {
69-
font-size: 0.9rem;
70-
opacity: 0.9;
71-
font-style: italic;
72-
}
73-
74-
[data-tei-tag="front"] {
75-
display: flex;
76-
align-items: center;
77-
gap: 3em;
78-
background: #f5f5f5;
79-
border-radius: 5px;
80-
padding: 1em;
81-
}
82-
83-
[data-tei-tag="docImprint"] {
84-
display: flex;
85-
flex-direction: column;
86-
}
87-
88-
/* Book cover styles */
89-
.book-cover {
90-
text-align: center;
91-
margin: 2rem 0;
92-
}
93-
94-
.book-cover img {
95-
max-width: 300px;
96-
height: auto;
97-
border-radius: 8px;
98-
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
99-
}
100-
101-
.main-nav ul {
102-
list-style: none;
103-
display: flex;
104-
gap: 2rem;
105-
}
106-
107-
.main-nav a {
108-
color: white;
109-
text-decoration: none;
110-
font-weight: 500;
111-
padding: 0.5rem 1rem;
112-
border-radius: 4px;
113-
transition: all 0.3s ease;
114-
}
115-
116-
.main-nav a:hover {
117-
background: rgba(255,255,255,0.2);
118-
transform: translateY(-2px);
119-
}
120-
121-
.document-content {
122-
background: white;
123-
margin: 3rem 0;
124-
padding: 4rem 0;
125-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
126-
border-radius: 8px;
127-
}
128-
129-
.site-footer {
130-
background: #2c3e50;
131-
color: white;
132-
text-align: center;
133-
padding: 3rem 0;
134-
}
135-
136-
.site-footer p {
137-
margin: 0.5rem 0;
138-
}
139-
140-
.footer-links {
141-
margin: 1rem 0;
142-
}
143-
144-
.footer-links a {
145-
color: #3498db;
146-
text-decoration: none;
147-
margin: 0 1rem;
148-
}
149-
150-
.footer-links a:hover {
151-
text-decoration: underline;
152-
}
153-
154-
/* TEI-specific styles */
155-
h1, h2, h3, h4, h5, h6 {
156-
margin: 2rem 0 1rem 0;
157-
color: #333;
158-
}
159-
160-
h1 {
161-
font-size: 2.5rem;
162-
border-bottom: 3px solid #ddd;
163-
padding-bottom: 1rem;
164-
}
165-
166-
h2 {
167-
font-size: 2rem;
168-
}
169-
170-
h3 {
171-
font-size: 1.5rem;
172-
}
173-
174-
p {
175-
margin: 1.5rem 0;
176-
text-align: justify;
177-
}
178-
179-
.blockquote p,
180-
blockquote[data-tei-tag="epigraph"] {
181-
padding-left: 2rem;
182-
font-size: 0.9em;
183-
}
184-
185-
.blockquote::before,
186-
.blockquote::after {
187-
content: none;
188-
}
189-
190-
figure {
191-
margin: 2rem 0;
192-
text-align: center;
193-
padding: 1rem;
194-
background: #f8f9fa;
195-
border-radius: 8px;
196-
}
197-
198-
figure img {
199-
max-width: 100%;
200-
height: auto;
201-
border-radius: 4px;
202-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
203-
}
204-
205-
aside[data-type="footnote"] {
206-
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
207-
border-left: 4px solid #6c757d;
208-
padding: 1.5rem;
209-
margin: 1.5rem 0;
210-
border-radius: 0 8px 8px 0;
211-
font-size: 0.9rem;
212-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
213-
}
214-
215-
.Heading-Heading2B {
216-
color: #333;
217-
border-bottom: 2px solid #ddd;
218-
padding-bottom: 0.5rem;
219-
}
220-
221-
.Heading-Heading3 {
222-
color: #333;
223-
}
224-
225-
.Heading-Heading4 {
226-
color: #333;
227-
}
228-
229-
.chapter-link {
230-
color: inherit;
231-
text-decoration: none;
232-
}
233-
234-
.chapter-link:hover {
235-
text-decoration: underline;
236-
}
237-
238-
/* Footnotes and References Styling */
239-
footer.footnotes {
240-
margin-top: 4rem;
241-
padding-top: 2rem;
242-
border-top: 3px solid;
243-
background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
244-
}
245-
246-
footer.footnotes ul {
247-
list-style: none;
248-
padding: 0;
249-
}
250-
251-
footer.footnotes li {
252-
margin: 1.5rem 0;
253-
}
254-
255-
footer.footnotes > ul > li > aside {
256-
background: white;
257-
border-left: 4px solid;
258-
padding: 1.25rem;
259-
border-radius: 0 6px 6px 0;
260-
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
261-
transition: all 0.3s ease;
262-
}
263-
264-
footer.footnotes > ul > li > aside:hover {
265-
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
266-
transform: translateX(4px);
267-
}
268-
269-
footer.footnotes aside p {
270-
margin: 0.5rem 0;
271-
font-size: 0.95rem;
272-
line-height: 1.7;
273-
}
274-
275-
/* Reset nested asides to not have the border */
276-
footer.footnotes aside aside {
277-
border-left: none;
278-
padding: 0;
279-
box-shadow: none;
280-
background: transparent;
281-
}
282-
283-
/* Footnote navigation (anchor and backlink) */
284-
.footnote--nav {
285-
display: flex;
286-
align-items: center;
287-
gap: 0.5rem;
288-
margin-bottom: 0.75rem;
289-
padding-bottom: 0.5rem;
290-
border-bottom: 1px solid #e9ecef;
291-
}
292-
293-
/* Hide backlinks in nested asides since they point to the same footnote */
294-
footer.footnotes aside aside .footnote--nav {
295-
display: none;
296-
}
297-
298-
.footnote--anchor {
299-
flex-shrink: 0;
300-
}
301-
302-
.footnote--backlink {
303-
color: #000;
304-
text-decoration: none;
305-
font-size: 0.75rem;
306-
font-weight: 600;
307-
padding: 0.25rem 0.75rem;
308-
border-radius: 4px;
309-
background: #e6e6e6;
310-
transition: all 0.2s ease;
311-
}
312-
313-
.footnote--backlink:hover {
314-
background: #000;
315-
color: #fff;
316-
transform: translateX(-2px);
317-
}
318-
319-
.footnote--backlink:active {
320-
transform: translateX(-3px);
321-
}
322-
323-
/* Footnote reference links in text */
324-
section[data-tei-tag="body"] a[data-tei-tag="ref"] {
325-
color: #e74c3c;
326-
text-decoration: none;
327-
font-weight: 600;
328-
font-size: 0.85em;
329-
vertical-align: super;
330-
padding: 0.1em 0.3em;
331-
border-radius: 3px;
332-
background: #fee;
333-
transition: all 0.2s ease;
334-
}
335-
336-
section[data-tei-tag="body"] a[data-tei-tag="ref"]:hover {
337-
background: #e74c3c;
338-
color: white;
339-
box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
340-
}
341-
342-
/* Scroll behavior for smooth jumping */
343-
html {
344-
scroll-behavior: smooth;
345-
}
346-
347-
/* Highlight target when jumping to it */
348-
aside:target {
349-
animation: highlightFootnote 2s ease;
350-
}
351-
352-
@keyframes highlightFootnote {
353-
0%, 100% {
354-
background: white;
355-
}
356-
20% {
357-
background: #fff3cd;
358-
}
359-
}
360-
361-
/* Responsive design */
362-
@media (max-width: 768px) {
363-
.site-header .container {
364-
flex-direction: column;
365-
gap: 1rem;
366-
}
367-
368-
[data-tei-tag="titlePage"] h1 {
369-
font-size: 1.5rem;
370-
}
371-
372-
.main-nav ul {
373-
gap: 1rem;
374-
}
375-
376-
.document-content {
377-
margin: 1rem 0;
378-
padding: 2rem 0;
379-
}
380-
381-
.container {
382-
padding: 0 15px;
383-
}
384-
385-
h1 {
386-
font-size: 2rem;
387-
}
388-
389-
h2 {
390-
font-size: 1.5rem;
391-
}
392-
}
393-
</style>
26+
<link rel="stylesheet" href="templates/styles.css">
39427
</head>
39528
<body>
39629
<header class="site-header">

0 commit comments

Comments
 (0)