Skip to content

Commit abc7b98

Browse files
claudeclaude
committed
feat: switch landing page to Bulma academic template
Replace pandoc header-injection approach (-H doc-style.html -B home-nav.html) with a full custom Bulma 0.9.4 template (website-template.html) that renders the manuscript as a styled academic paper page with One Dark colour scheme, hero section (title, authors, PDF/Slides/Docs/GitHub buttons), MathJax 3, and proper table/figure/code styling. https://claude.ai/code/session_01ManXQWse294TCQRXHovqwQ
1 parent b509d2a commit abc7b98

2 files changed

Lines changed: 227 additions & 5 deletions

File tree

‎.github/workflows/deploy-pages.yml‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -129,14 +129,11 @@ jobs:
129129
cat _templates/docs-index-footer.html >> _site/docs/index.html
130130
echo "Docs index built"
131131
132-
# Generate landing page (index.html) from manuscript
132+
# Generate landing page (index.html) from manuscript using Bulma template
133133
pandoc Krampis-SyntheticLLMs-2026.md \
134-
--standalone \
134+
--template _templates/website-template.html \
135135
--from=markdown+tex_math_dollars \
136-
--metadata title="Geometric Feature Invariance in SAEs" \
137136
--highlight-style=espresso \
138-
-H _templates/doc-style.html \
139-
-B _templates/home-nav.html \
140137
-o _site/index.html
141138
echo "Landing page generated from manuscript"
142139

‎_templates/website-template.html‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>$title$</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
11+
<script>
12+
MathJax = {
13+
tex: {
14+
inlineMath: [['$', '$'], ['\\(', '\\)']],
15+
displayMath: [['$$', '$$'], ['\\[', '\\]']],
16+
processEscapes: true
17+
},
18+
options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
19+
};
20+
</script>
21+
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
22+
<style>
23+
:root {
24+
--bg: #1e2127;
25+
--bg2: #282c34;
26+
--bg3: #2c313c;
27+
--border: #3e4451;
28+
--text: #abb2bf;
29+
--heading: #ffffff;
30+
--blue: #61afef;
31+
--green: #98c379;
32+
--yellow: #e5c07b;
33+
--purple: #c678dd;
34+
--red: #e06c75;
35+
}
36+
37+
html { font-size: 11pt; }
38+
39+
body {
40+
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
41+
background: var(--bg);
42+
color: var(--text);
43+
}
44+
45+
/* ── Hero ── */
46+
.pub-hero {
47+
background: var(--bg2);
48+
border-bottom: 2px solid var(--blue);
49+
padding: 3rem 1.5rem 2.5rem;
50+
text-align: center;
51+
}
52+
.pub-hero .pub-title {
53+
font-size: clamp(1.3rem, 3vw, 1.9rem);
54+
font-weight: 700;
55+
color: var(--heading);
56+
line-height: 1.3;
57+
max-width: 860px;
58+
margin: 0 auto 1rem;
59+
}
60+
.pub-hero .pub-authors {
61+
font-size: 1rem;
62+
color: var(--text);
63+
margin-bottom: 0.35rem;
64+
}
65+
.pub-hero .pub-affil {
66+
font-size: 0.85rem;
67+
color: #636d83;
68+
margin-bottom: 1.5rem;
69+
}
70+
.pub-hero .buttons { justify-content: center; gap: 0.6rem; }
71+
.pub-hero .button {
72+
border-radius: 6px;
73+
font-weight: 600;
74+
font-size: 0.875rem;
75+
}
76+
.btn-pdf { background: var(--blue); color: #fff !important; border: none; }
77+
.btn-pdf:hover { background: #4d9ede; }
78+
.btn-ghost { background: transparent; color: var(--blue) !important;
79+
border: 1.5px solid var(--blue); }
80+
.btn-ghost:hover { background: var(--bg3); }
81+
82+
/* ── Content wrapper ── */
83+
.pub-content {
84+
max-width: 860px;
85+
margin: 0 auto;
86+
padding: 2.5rem 1.5rem 4rem;
87+
}
88+
89+
/* ── Headings ── */
90+
.pub-content h2 {
91+
font-size: 1.35rem;
92+
font-weight: 700;
93+
color: var(--heading);
94+
margin-top: 2.5rem;
95+
margin-bottom: 0.6rem;
96+
padding-bottom: 0.4rem;
97+
border-bottom: 1px solid var(--border);
98+
}
99+
.pub-content h3 {
100+
font-size: 1.1rem;
101+
font-weight: 600;
102+
color: var(--blue);
103+
margin-top: 1.75rem;
104+
margin-bottom: 0.5rem;
105+
}
106+
.pub-content h4 {
107+
font-size: 1rem;
108+
font-weight: 600;
109+
color: var(--yellow);
110+
margin-top: 1.25rem;
111+
margin-bottom: 0.4rem;
112+
}
113+
114+
/* ── Body text ── */
115+
.pub-content p { margin: 0.7rem 0; line-height: 1.75; }
116+
.pub-content strong { color: var(--yellow); }
117+
.pub-content em { color: var(--purple); font-style: italic; }
118+
119+
/* ── Links ── */
120+
.pub-content a { color: var(--blue); text-decoration: none; }
121+
.pub-content a:hover { text-decoration: underline; color: var(--green); }
122+
123+
/* ── Code ── */
124+
.pub-content code {
125+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
126+
font-size: 0.85em;
127+
background: var(--bg3);
128+
border: 1px solid var(--border);
129+
border-radius: 4px;
130+
padding: 0.15em 0.4em;
131+
color: var(--text);
132+
}
133+
.pub-content pre {
134+
background: #21252b;
135+
border: 1px solid var(--border);
136+
border-radius: 6px;
137+
padding: 1em 1.25em;
138+
overflow-x: auto;
139+
margin: 1.25rem 0;
140+
}
141+
.pub-content pre code { background: none; border: none; padding: 0; font-size: 0.85em; }
142+
143+
/* ── Tables ── */
144+
.pub-content table {
145+
border-collapse: collapse;
146+
width: 100%;
147+
margin: 1.25rem 0;
148+
font-size: 0.9rem;
149+
}
150+
.pub-content th, .pub-content td {
151+
border: 1px solid var(--border);
152+
padding: 0.5em 0.85em;
153+
text-align: left;
154+
color: var(--text);
155+
}
156+
.pub-content th { background: var(--bg3); font-weight: 600; color: var(--green); }
157+
.pub-content tr:nth-child(even) td { background: var(--bg3); }
158+
159+
/* ── Figures ── */
160+
.pub-content img {
161+
max-width: 100%;
162+
border-radius: 6px;
163+
border: 1px solid var(--border);
164+
display: block;
165+
margin: 1.5rem auto;
166+
}
167+
.pub-content figure { margin: 1.5rem 0; text-align: center; }
168+
.pub-content figcaption {
169+
font-size: 0.875rem;
170+
color: #636d83;
171+
margin-top: 0.5rem;
172+
}
173+
174+
/* ── Blockquote ── */
175+
.pub-content blockquote {
176+
border-left: 3px solid var(--blue);
177+
background: var(--bg3);
178+
border-radius: 0 4px 4px 0;
179+
margin: 1.25rem 0;
180+
padding: 0.6rem 1rem;
181+
color: #9da5b4;
182+
}
183+
184+
/* ── HR ── */
185+
.pub-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
186+
187+
/* ── Footer ── */
188+
.pub-footer {
189+
background: var(--bg2);
190+
border-top: 1px solid var(--border);
191+
padding: 1.25rem 1.5rem;
192+
text-align: center;
193+
font-size: 0.82rem;
194+
color: #636d83;
195+
}
196+
</style>
197+
</head>
198+
<body>
199+
200+
<!-- ── Hero ── -->
201+
<header class="pub-hero">
202+
<p class="pub-title">Geometric Feature Invariance in SAEs: A Framework for Transferable Mechanistic Interpretability and Scalable AI Safety</p>
203+
<p class="pub-authors">Konstantinos Krampis &nbsp;&middot;&nbsp; David Williams-King &nbsp;&middot;&nbsp; David Chanin</p>
204+
<p class="pub-affil">City University of New York &nbsp;&middot;&nbsp; ERA &nbsp;&middot;&nbsp; University College London &nbsp;&middot;&nbsp; 2026</p>
205+
<div class="buttons">
206+
<a href="Krampis-SyntheticLLMs-2026.pdf" class="button btn-pdf">&#8595;&nbsp; Download PDF</a>
207+
<a href="presentation/" class="button btn-ghost">Slides</a>
208+
<a href="docs/" class="button btn-ghost">Docs</a>
209+
<a href="https://github.com/KKrampis/SyntheticLLMs" class="button btn-ghost">GitHub</a>
210+
</div>
211+
</header>
212+
213+
<!-- ── Paper content rendered from markdown ── -->
214+
<main class="pub-content">
215+
$body$
216+
</main>
217+
218+
<!-- ── Footer ── -->
219+
<footer class="pub-footer">
220+
Targeted output: NeurIPS 2026 &nbsp;&middot;&nbsp;
221+
<a href="Krampis-SyntheticLLMs-2026.pdf" style="color:#61afef;">Download PDF</a>
222+
</footer>
223+
224+
</body>
225+
</html>

0 commit comments

Comments
 (0)