Skip to content

Commit 1a20754

Browse files
afrendeiroafrendeiro
committed
better styling of HTML
1 parent a53dfdb commit 1a20754

File tree

5 files changed

+90
-67
lines changed

5 files changed

+90
-67
lines changed

‎.github/workflows/build.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ jobs:
5555
--metadata-file=metadata.yaml \
5656
-o build/index.html
5757
58+
- name: Add container div
59+
run: |
60+
sed 's/<body>/<body><div class="container">/g' -i build/index.html
61+
sed 's/<\/body>/<\/div><\/body>/g' -i build/index.html
62+
5863
- name: Convert to PDF
5964
run: |
6065
wkhtmltopdf \

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ This manual is open source and maintained collaboratively. Anyone on GitHub can
1313
The project includes a [Makefile](https://github.com/rendeirolab/lab-manual/blob/main/Makefile) to streamline the development process.
1414

1515
Key targets include:
16+
1617
- **`format`**: Formats Markdown files consistently using `mdformat`.
1718
- **`build`**: Converts the manual into a single HTML file using `pandoc` and generates a PDF file using `wkhtmltopdf`.
1819
- **`clean`**: Removes generated files to ensure a fresh build.

‎assets/style.css

Lines changed: 78 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,61 @@
22
body {
33
font-family: 'Arial', 'Helvetica Neue', sans-serif;
44
color: #333;
5-
font-size: 10pt;
6-
line-height: 1.35;
5+
font-size: 14px;
6+
line-height: 1.6;
77
margin: 0;
88
padding: 0;
9+
background-color: #f9f9f9;
10+
}
11+
12+
/* Centered Content */
13+
.container {
14+
max-width: 800px; /* Constrain the content width */
15+
margin: 2rem auto; /* Center content and add vertical spacing */
16+
padding: 1.5rem;
917
background-color: #ffffff;
18+
border: 1px solid #ddd;
19+
border-radius: 4px;
20+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
1021
}
1122

1223
/* Headings */
13-
h1, h2, h3, h4, h5, h6 {
14-
font-family: 'Segoe UI', 'Arial', sans-serif;
24+
h1, h2, h3, h4, h5, h6, .abstract-title {
25+
font-family: 'Helvetica Neue', 'Arial', sans-serif;
1526
color: #222;
1627
margin-top: 1em;
17-
margin-bottom: 0.25em;
28+
margin-bottom: 0.5em;
1829
font-weight: 600;
1930
}
20-
h1 { font-size: 2em; border-bottom: 2px solid #ddd; padding-bottom: 0.2em; }
21-
h2 { font-size: 1.75em; border-bottom: 1px solid #eee; padding-bottom: 0.15em; }
22-
h3 { font-size: 1.5em; }
23-
h4 { font-size: 1.25em; }
24-
h5 { font-size: 1em; }
25-
h6 { font-size: 0.875em; }
31+
h1 {
32+
font-size: 2.5rem;
33+
text-align: center;
34+
border-bottom: 3px solid #ddd;
35+
padding-bottom: 0.5em;
36+
margin-bottom: 1em;
37+
color: #003366;
38+
}
39+
h2, .abstract-title {
40+
font-size: 2rem;
41+
border-bottom: 2px solid #ddd;
42+
padding-bottom: 0.3em;
43+
}
44+
h3 { font-size: 1.75rem; }
45+
h4 { font-size: 1.5rem; }
46+
h5 { font-size: 1.25rem; }
47+
h6 { font-size: 1rem; }
2648

2749
/* Paragraphs */
2850
p {
29-
margin: 0 0 0.25em;
51+
margin: 0 0 1em;
52+
text-align: justify; /* Improve readability */
3053
}
3154

3255
/* Links */
3356
a {
3457
color: #0066cc;
3558
text-decoration: none;
59+
font-weight: bold;
3660
}
3761
a:hover {
3862
text-decoration: underline;
@@ -42,11 +66,12 @@ a:hover {
4266
table {
4367
width: 100%;
4468
border-collapse: collapse;
45-
margin: 1em 0;
69+
margin: 1.5em 0;
70+
border: 1px solid #ddd;
4671
}
4772
th, td {
4873
border: 1px solid #ddd;
49-
padding: 0.5em;
74+
padding: 0.75em;
5075
text-align: left;
5176
}
5277
th {
@@ -57,27 +82,29 @@ th {
5782
/* Code Blocks */
5883
code {
5984
font-family: 'Courier New', monospace;
60-
background-color: #f8f8f8;
61-
border: 1px solid #eee;
85+
background-color: #f4f4f4;
86+
border: 1px solid #ddd;
6287
padding: 0.2em 0.4em;
6388
border-radius: 4px;
6489
font-size: 0.95em;
6590
}
6691
pre {
67-
background-color: #f8f8f8;
68-
border: 1px solid #eee;
69-
padding: 1em;
70-
border-radius: 4px;
92+
background-color: #f4f4f4;
93+
border: 1px solid #ddd;
94+
padding: 1rem;
95+
border-radius: 6px;
7196
overflow-x: auto;
97+
font-size: 0.95em;
7298
}
7399

74100
/* Blockquotes */
75101
blockquote {
76-
margin: 0 0 1em;
77-
padding: 0.5em 1em;
78-
color: #666;
79-
border-left: 4px solid #ccc;
102+
margin: 1em 0;
103+
padding: 1em;
104+
color: #555;
105+
border-left: 4px solid #0066cc;
80106
background: #f9f9f9;
107+
font-style: italic;
81108
}
82109

83110
/* Lists */
@@ -99,7 +126,10 @@ hr {
99126
/* Table of Contents */
100127
.toc {
101128
margin: 2em 0;
102-
padding: 0;
129+
padding: 1em;
130+
background: #f4f4f4;
131+
border: 1px solid #ddd;
132+
border-radius: 6px;
103133
}
104134
.toc ul {
105135
list-style-type: none;
@@ -116,59 +146,42 @@ hr {
116146
text-decoration: underline;
117147
}
118148

119-
/* Headers and Footers for PDF */
120-
@page {
121-
margin: 1in;
122-
}
123-
@page:first {
124-
margin-top: 2in;
125-
}
126-
header {
127-
text-align: center;
128-
font-size: 10pt;
129-
color: #777;
130-
margin-bottom: 1em;
131-
}
132-
footer {
133-
text-align: center;
134-
font-size: 10pt;
135-
color: #777;
136-
margin-top: 1em;
137-
}
138-
139-
.abstract-title {
140-
font-family: 'Segoe UI', 'Arial', sans-serif;
141-
color: #222;
142-
margin-top: 1em;
143-
margin-bottom: 0.5em;
144-
font-weight: 600;
145-
font-size: 2em;
149+
/* Highlighting */
150+
mark {
151+
background-color: #ff0;
146152
color: #000;
147-
border-bottom: 2px solid #ddd; padding-bottom: 0.2em;
148-
}
149-
.abstract {
150-
text-align: justify;
153+
font-weight: bold;
151154
}
155+
152156
/* Images */
153157
img {
154158
max-width: 100%;
155159
height: auto;
156160
margin: 1em 0;
161+
border-radius: 6px;
162+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
157163
}
158164

159-
/* Highlighting */
160-
mark {
161-
background-color: #ff0;
162-
color: #000;
163-
font-weight: bold;
164-
}
165-
166-
/* Additional Styles */
165+
/* Figure and Caption */
167166
figure {
168-
margin: 1em 0;
167+
margin: 1.5em 0;
169168
text-align: center;
170169
}
171170
figcaption {
172171
font-size: 0.9em;
173172
color: #666;
173+
margin-top: 0.5em;
174+
}
175+
176+
/* Footer */
177+
footer {
178+
text-align: center;
179+
font-size: 0.85em;
180+
color: #888;
181+
margin-top: 2em;
182+
}
183+
184+
/* Page Wrapper */
185+
html {
186+
scroll-behavior: smooth;
174187
}

‎build.sh

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ cat ORDER | pandoc \
2424
--metadata-file=metadata.yaml \
2525
-s `xargs` \
2626
-o build/html/rendeiro-lab_manual.html
27-
27+
28+
# Add content inside 'container'
29+
sed 's/<body>/<body><div class="container">/g' -i build/html/rendeiro-lab_manual.html
30+
sed 's/<\/body>/<\/div><\/body>/g' -i build/html/rendeiro-lab_manual.html
31+
2832
# Convert to PDF
2933
wkhtmltopdf \
3034
--enable-internal-links \

‎metadata.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
title: Rendeiro lab manual
22
subtitle: A guide to the Rendeiro lab at CeMM
33
abstract: |
4-
> You are reading the version from <VERSION>.
4+
> You are reading version '<VERSION>'.
55
66
The Rendeiro Lab Manual serves as a comprehensive guide to the lab’s operations, culture, and best practices.
77

0 commit comments

Comments
 (0)