Skip to content

Commit cdbee83

Browse files
DavidLiedleclaude
DavidLiedle
and
claude
committed
Redesign layout: fix postamble float, clean up HTML structure
The root cause of the floating footer was body{display:flex} making #preamble, #content, and #postamble flex siblings in a row. Fix: - Remove body flexbox; use simple block flow with margin-left on all page sections to clear the fixed sidebar - Remove duplicate id="preamble" / id="postamble" divs from publish.el (org-html already wraps preamble/postamble in those divs itself) - Simplify postamble to plain text — no nested flex layout - Clean up CSS: consistent padding, tighter spacing, simpler rules Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 843ce25 commit cdbee83

File tree

2 files changed

+103
-158
lines changed

2 files changed

+103
-158
lines changed

‎book.css‎

Lines changed: 92 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@
33
============================================================ */
44

55
:root {
6-
--bg: #fafaf8;
7-
--bg-alt: #f0efe8;
8-
--bg-code: #1e1e2e;
9-
--fg: #1a1a1a;
10-
--fg-muted: #555;
11-
--accent: #7c6fcd; /* org-mode purple */
12-
--accent-dark: #5a4fa3;
13-
--link: #5a4fa3;
14-
--link-hover: #7c6fcd;
15-
--border: #d8d6cc;
16-
--max-width: 780px;
17-
--sidebar-w: 260px;
18-
--font-body: 'IBM Plex Serif', Georgia, serif;
19-
--font-ui: 'IBM Plex Sans', system-ui, sans-serif;
20-
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
6+
--bg: #fafaf8;
7+
--bg-alt: #f0efe8;
8+
--bg-code: #1e1e2e;
9+
--fg: #1a1a1a;
10+
--fg-muted: #555;
11+
--accent: #7c6fcd;
12+
--accent-dk: #5a4fa3;
13+
--link: #5a4fa3;
14+
--border: #d8d6cc;
15+
--sidebar-w: 240px;
16+
--content-w: 760px;
17+
--font-body: 'IBM Plex Serif', Georgia, serif;
18+
--font-ui: 'IBM Plex Sans', system-ui, sans-serif;
19+
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
2120
}
2221

2322
/* ── Reset ── */
@@ -31,11 +30,9 @@ body {
3130
color: var(--fg);
3231
font-family: var(--font-body);
3332
line-height: 1.75;
34-
display: flex;
35-
min-height: 100vh;
3633
}
3734

38-
/* ── Sidebar nav ── */
35+
/* ── Fixed sidebar ── */
3936
#org-nav {
4037
position: fixed;
4138
top: 0; left: 0;
@@ -52,7 +49,7 @@ body {
5249

5350
#org-nav .nav-title {
5451
font-weight: 700;
55-
font-size: 0.95rem;
52+
font-size: 0.9rem;
5653
color: var(--accent);
5754
text-transform: uppercase;
5855
letter-spacing: 0.08em;
@@ -61,49 +58,56 @@ body {
6158
text-decoration: none;
6259
}
6360

64-
#org-nav ol {
65-
list-style: none;
66-
padding: 0;
67-
}
68-
69-
#org-nav li {
70-
margin-bottom: 0.35rem;
71-
}
61+
#org-nav ol { list-style: none; padding: 0; }
62+
#org-nav li { margin-bottom: 0.3rem; }
7263

7364
#org-nav a {
7465
color: var(--fg-muted);
7566
text-decoration: none;
76-
line-height: 1.4;
7767
display: block;
7868
padding: 0.2rem 0.4rem;
7969
border-radius: 4px;
70+
line-height: 1.4;
8071
transition: color 0.15s, background 0.15s;
8172
}
8273

83-
#org-nav a:hover,
84-
#org-nav a.active {
85-
color: var(--accent);
86-
background: rgba(124, 111, 205, 0.08);
87-
}
74+
#org-nav a:hover { color: var(--accent); background: rgba(124,111,205,0.08); }
8875

8976
#org-nav .nav-index {
9077
margin-top: 1.5rem;
9178
padding-top: 1rem;
9279
border-top: 1px solid var(--border);
9380
}
81+
#org-nav .nav-index a { color: var(--accent); font-weight: 600; }
9482

95-
#org-nav .nav-index a {
96-
color: var(--accent);
97-
font-weight: 600;
83+
/* ── Page sections — all shift right past the fixed sidebar ── */
84+
#preamble,
85+
#content,
86+
#postamble {
87+
margin-left: var(--sidebar-w);
88+
}
89+
90+
/* ── Preamble (org wraps our HTML in <div id="preamble">) ── */
91+
#preamble {
92+
padding: 1.25rem 2.5rem 0;
93+
max-width: calc(var(--sidebar-w) + var(--content-w) + 5rem);
94+
font-family: var(--font-ui);
9895
}
9996

10097
/* ── Main content ── */
10198
#content {
102-
margin-left: var(--sidebar-w);
103-
max-width: calc(var(--max-width) + 6rem);
104-
padding: 3.5rem 3rem 5rem;
105-
width: 100%;
106-
flex: 1;
99+
padding: 2.5rem 2.5rem 4rem;
100+
max-width: calc(var(--sidebar-w) + var(--content-w) + 5rem);
101+
}
102+
103+
/* ── Footer ── */
104+
#postamble {
105+
padding: 1.25rem 2.5rem 2rem;
106+
max-width: calc(var(--sidebar-w) + var(--content-w) + 5rem);
107+
border-top: 1px solid var(--border);
108+
font-family: var(--font-ui);
109+
font-size: 0.8rem;
110+
color: var(--fg-muted);
107111
}
108112

109113
/* ── Typography ── */
@@ -116,55 +120,58 @@ h1, h2, h3, h4, h5 {
116120
margin-bottom: 0.75rem;
117121
}
118122

119-
h1 { font-size: 2.1rem; margin-top: 0; border-bottom: 2px solid var(--accent); padding-bottom: 0.5rem; }
120-
h2 { font-size: 1.55rem; color: var(--accent-dark); }
121-
h3 { font-size: 1.2rem; }
123+
h1 {
124+
font-size: 2rem;
125+
margin-top: 0;
126+
padding-bottom: 0.5rem;
127+
border-bottom: 2px solid var(--accent);
128+
}
129+
h2 { font-size: 1.45rem; color: var(--accent-dk); }
130+
h3 { font-size: 1.15rem; }
122131
h4 { font-size: 1rem; }
123132

124133
p { margin-bottom: 1.1rem; }
125134

126135
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
127-
a:hover { color: var(--link-hover); }
136+
a:hover { color: var(--accent); }
128137

129138
strong, b { font-weight: 700; }
130-
em, i { font-style: italic; }
131-
del, s { text-decoration: line-through; color: var(--fg-muted); }
139+
em, i { font-style: italic; }
140+
del, s { text-decoration: line-through; color: var(--fg-muted); }
132141

133-
/* ── Table of contents ── */
142+
/* ── Inline table of contents ── */
134143
#table-of-contents {
135144
background: var(--bg-alt);
136145
border: 1px solid var(--border);
137-
border-radius: 8px;
138-
padding: 1.5rem 2rem;
139-
margin-bottom: 2.5rem;
146+
border-radius: 6px;
147+
padding: 1.25rem 1.75rem;
148+
margin-bottom: 2rem;
140149
font-family: var(--font-ui);
141-
font-size: 0.9rem;
150+
font-size: 0.88rem;
142151
}
143-
144152
#table-of-contents h2 {
145-
font-size: 0.85rem;
153+
font-size: 0.78rem;
146154
text-transform: uppercase;
147155
letter-spacing: 0.07em;
148156
color: var(--fg-muted);
149157
margin-top: 0;
150158
margin-bottom: 0.75rem;
151159
}
152-
153-
#table-of-contents ul { list-style: none; padding-left: 0; }
154-
#table-of-contents ul ul { padding-left: 1.25rem; margin-top: 0.25rem; }
155-
#table-of-contents li { margin-bottom: 0.25rem; }
160+
#table-of-contents ul { list-style: none; padding: 0; }
161+
#table-of-contents ul ul { padding-left: 1.25rem; margin-top: 0.2rem; }
162+
#table-of-contents li { margin-bottom: 0.2rem; }
156163
#table-of-contents a { color: var(--link); text-decoration: none; }
157164
#table-of-contents a:hover { text-decoration: underline; }
158165

159166
/* ── Lists ── */
160-
ul, ol { padding-left: 1.75rem; margin-bottom: 1.1rem; }
161-
li { margin-bottom: 0.3rem; }
162-
li p { margin-bottom: 0.3rem; }
167+
ul, ol { padding-left: 1.75rem; margin-bottom: 1rem; }
168+
li { margin-bottom: 0.25rem; }
169+
li p { margin-bottom: 0.25rem; }
163170

164171
/* ── Code ── */
165172
code, kbd, samp {
166173
font-family: var(--font-mono);
167-
font-size: 0.88em;
174+
font-size: 0.86em;
168175
background: rgba(0,0,0,0.06);
169176
padding: 0.1em 0.35em;
170177
border-radius: 3px;
@@ -175,136 +182,76 @@ pre {
175182
background: var(--bg-code);
176183
color: #cdd6f4;
177184
font-family: var(--font-mono);
178-
font-size: 0.84rem;
185+
font-size: 0.83rem;
179186
line-height: 1.6;
180187
padding: 1.25rem 1.5rem;
181-
border-radius: 8px;
188+
border-radius: 6px;
182189
overflow-x: auto;
183-
margin: 1.25rem 0 1.5rem;
184-
tab-size: 2;
190+
margin: 1rem 0 1.5rem;
185191
}
186-
187-
pre code {
188-
background: none;
189-
padding: 0;
190-
color: inherit;
191-
font-size: inherit;
192-
border-radius: 0;
193-
}
194-
195-
/* org-mode src block wrapper */
196-
.org-src-container { margin: 1.25rem 0 1.5rem; }
192+
pre code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }
193+
.org-src-container { margin: 1rem 0 1.5rem; }
197194
.org-src-container pre { margin: 0; }
198195

199196
/* ── Blockquote ── */
200197
blockquote {
201198
border-left: 4px solid var(--accent);
202199
margin: 1.5rem 0;
203200
padding: 0.75rem 1.5rem;
204-
background: rgba(124, 111, 205, 0.05);
201+
background: rgba(124,111,205,0.05);
205202
font-style: italic;
206203
color: var(--fg-muted);
207-
border-radius: 0 6px 6px 0;
204+
border-radius: 0 4px 4px 0;
208205
}
209-
210206
blockquote p:last-child { margin-bottom: 0; }
211207

212208
/* ── Tables ── */
213209
table {
214210
width: 100%;
215211
border-collapse: collapse;
216212
margin: 1.5rem 0;
217-
font-size: 0.9rem;
213+
font-size: 0.88rem;
218214
font-family: var(--font-ui);
219215
}
220-
221216
th {
222217
background: var(--accent);
223218
color: #fff;
224219
font-weight: 600;
225-
padding: 0.6rem 0.85rem;
220+
padding: 0.55rem 0.85rem;
226221
text-align: left;
227222
}
228-
229-
td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--border); }
223+
td { padding: 0.45rem 0.85rem; border-bottom: 1px solid var(--border); }
230224
tr:nth-child(even) td { background: var(--bg-alt); }
231225

232226
/* ── Horizontal rule ── */
233-
hr {
234-
border: none;
235-
border-top: 2px solid var(--border);
236-
margin: 2.5rem 0;
237-
}
238-
239-
/* ── Preamble / postamble ── */
240-
#preamble {
241-
font-family: var(--font-ui);
242-
margin-bottom: 2.5rem;
243-
padding-bottom: 1.5rem;
244-
border-bottom: 1px solid var(--border);
245-
}
246-
247-
#postamble {
248-
margin-top: 4rem;
249-
padding-top: 1.5rem;
250-
border-top: 1px solid var(--border);
251-
font-family: var(--font-ui);
252-
font-size: 0.82rem;
253-
color: var(--fg-muted);
254-
display: flex;
255-
justify-content: space-between;
256-
flex-wrap: wrap;
257-
gap: 0.5rem;
258-
}
227+
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
259228

229+
/* ── Chapter prev/next nav ── */
260230
.chapter-nav {
261231
display: flex;
262232
justify-content: space-between;
263233
gap: 1rem;
264-
flex-wrap: wrap;
265234
font-family: var(--font-ui);
266-
font-size: 0.9rem;
235+
font-size: 0.88rem;
236+
padding-bottom: 1.25rem;
237+
border-bottom: 1px solid var(--border);
238+
margin-bottom: 0.5rem;
267239
}
268-
269240
.chapter-nav a {
270-
display: inline-flex;
271-
align-items: center;
272-
gap: 0.4rem;
273-
padding: 0.5rem 1rem;
241+
padding: 0.4rem 0.9rem;
274242
border: 1px solid var(--border);
275-
border-radius: 6px;
243+
border-radius: 5px;
276244
color: var(--link);
277245
text-decoration: none;
278246
transition: border-color 0.15s, background 0.15s;
279247
}
280-
281-
.chapter-nav a:hover {
282-
border-color: var(--accent);
283-
background: rgba(124, 111, 205, 0.06);
284-
}
285-
286-
/* ── Syntax highlighting (org export classes) ── */
287-
.org-keyword { color: #cba6f7; }
288-
.org-builtin { color: #89dceb; }
289-
.org-string { color: #a6e3a1; }
290-
.org-comment { color: #6c7086; font-style: italic; }
291-
.org-type { color: #89b4fa; }
292-
.org-constant { color: #fab387; }
293-
.org-variable-name { color: #cdd6f4; }
294-
.org-function-name { color: #89b4fa; }
248+
.chapter-nav a:hover { border-color: var(--accent); background: rgba(124,111,205,0.06); }
295249

296250
/* ── Responsive ── */
297-
@media (max-width: 900px) {
298-
:root { --sidebar-w: 0px; }
299-
300-
#org-nav {
301-
display: none;
302-
}
303-
304-
#content {
305-
margin-left: 0;
306-
padding: 2rem 1.25rem 3rem;
307-
}
251+
@media (max-width: 860px) {
252+
#org-nav { display: none; }
253+
#preamble, #content, #postamble { margin-left: 0; }
254+
#preamble, #content, #postamble { padding-left: 1.25rem; padding-right: 1.25rem; }
308255
}
309256

310257
@media print {

0 commit comments

Comments
 (0)