Skip to content

Commit 3fef050

Browse files
oschwaldclaude
oschwald
and
claude
committed
Move layout CSS to a shared file
Extracts the inline `<style>` block from the default and 404 layouts into `docs/assets/css/main.css`, served via Hugo's asset pipeline. Both layouts now reference the file via `<link rel="stylesheet">`, so the 404 page inherits the full stylesheet instead of duplicating a subset of rules. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 0914cd1 commit 3fef050

3 files changed

Lines changed: 193 additions & 236 deletions

File tree

‎docs/assets/css/main.css‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
:root {
2+
--fg: #2d2d2d;
3+
--bg: #faf9f7;
4+
--accent: #1a6b50;
5+
--accent-soft: rgba(26, 107, 80, 0.06);
6+
--border: #d5d0c8;
7+
--code-bg: #f0eeea;
8+
--heading: #1a1a1a;
9+
--muted: #70695f;
10+
}
11+
12+
::selection {
13+
background: rgba(26, 107, 80, 0.15);
14+
}
15+
16+
*,
17+
*::before,
18+
*::after {
19+
box-sizing: border-box;
20+
}
21+
22+
body {
23+
font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
24+
font-size: 1.05rem;
25+
line-height: 1.78;
26+
color: var(--fg);
27+
background: var(--bg);
28+
max-width: 50rem;
29+
margin: 0 auto;
30+
padding: 3rem 1.5rem 5rem;
31+
}
32+
33+
h1,
34+
h2,
35+
h3,
36+
h4 {
37+
font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
38+
line-height: 1.35;
39+
}
40+
41+
h1 {
42+
font-size: 1.75rem;
43+
font-weight: 800;
44+
color: var(--heading);
45+
margin: 0 0 1.5rem;
46+
padding-bottom: 0.75rem;
47+
border-bottom: 3px solid var(--accent);
48+
}
49+
50+
h2 {
51+
font-size: 1.3rem;
52+
font-weight: 700;
53+
color: var(--heading);
54+
margin: 3rem 0 0.75rem;
55+
padding-bottom: 0.4rem;
56+
border-bottom: 1px solid var(--border);
57+
}
58+
59+
h3 {
60+
font-size: 1.05rem;
61+
font-weight: 700;
62+
color: var(--accent);
63+
margin: 2.5rem 0 0.5rem;
64+
padding: 0.4rem 0.75rem;
65+
border-left: 3px solid var(--accent);
66+
background: linear-gradient(135deg, var(--accent-soft), transparent 80%);
67+
border-radius: 0 3px 3px 0;
68+
}
69+
70+
h4 {
71+
font-size: 0.92rem;
72+
font-weight: 700;
73+
color: var(--muted);
74+
margin: 2rem 0 0.5rem;
75+
padding-bottom: 0.2rem;
76+
border-bottom: 1px dashed var(--border);
77+
}
78+
79+
p {
80+
margin: 0.8rem 0;
81+
}
82+
83+
a {
84+
color: var(--accent);
85+
text-decoration-thickness: 1px;
86+
text-underline-offset: 2px;
87+
transition: text-decoration-thickness 0.15s;
88+
}
89+
90+
a:hover {
91+
text-decoration-thickness: 2px;
92+
}
93+
94+
strong {
95+
color: var(--heading);
96+
font-weight: 700;
97+
}
98+
99+
ol,
100+
ul {
101+
padding-left: 1.75rem;
102+
}
103+
104+
li + li {
105+
margin-top: 0.3rem;
106+
}
107+
108+
code {
109+
font-family: "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
110+
font-size: 0.88em;
111+
background: var(--code-bg);
112+
padding: 0.15em 0.4em;
113+
border-radius: 3px;
114+
border: 1px solid rgba(0, 0, 0, 0.06);
115+
}
116+
117+
pre {
118+
background: var(--code-bg);
119+
border: 1px solid var(--border);
120+
border-radius: 5px;
121+
padding: 1rem 1.25rem;
122+
overflow-x: auto;
123+
line-height: 1.55;
124+
}
125+
126+
pre code {
127+
background: none;
128+
padding: 0;
129+
border: none;
130+
font-size: 0.85em;
131+
}
132+
133+
img {
134+
max-width: 100%;
135+
height: auto;
136+
}
137+
138+
.heading-anchor {
139+
opacity: 0;
140+
margin-left: 0.3em;
141+
font-weight: 400;
142+
text-decoration: none;
143+
transition: opacity 0.15s;
144+
}
145+
146+
h1:hover .heading-anchor,
147+
h2:hover .heading-anchor,
148+
h3:hover .heading-anchor,
149+
h4:hover .heading-anchor,
150+
.heading-anchor:focus {
151+
opacity: 0.4;
152+
}
153+
154+
.heading-anchor:hover {
155+
opacity: 1;
156+
}
157+
158+
.page-nav {
159+
margin-bottom: 2.5rem;
160+
display: flex;
161+
gap: 0.5rem;
162+
flex-wrap: wrap;
163+
}
164+
165+
.page-nav a {
166+
font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
167+
font-size: 0.85rem;
168+
font-weight: 600;
169+
text-decoration: none;
170+
color: var(--muted);
171+
padding: 0.3rem 0.75rem;
172+
border: 1px solid var(--border);
173+
border-radius: 999px;
174+
transition:
175+
color 0.15s,
176+
border-color 0.15s,
177+
background 0.15s;
178+
}
179+
180+
.page-nav a:hover {
181+
color: var(--accent);
182+
border-color: var(--accent);
183+
}
184+
185+
.page-nav a.active {
186+
color: var(--bg);
187+
background: var(--accent);
188+
border-color: var(--accent);
189+
}

‎docs/layouts/404.html‎

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,8 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>Page not found | {{ .Site.Title }}</title>
7-
<style>
8-
:root {
9-
--fg: #2d2d2d;
10-
--bg: #faf9f7;
11-
--accent: #1a6b50;
12-
--heading: #1a1a1a;
13-
}
14-
15-
*,
16-
*::before,
17-
*::after {
18-
box-sizing: border-box;
19-
}
20-
21-
body {
22-
font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
23-
font-size: 1.05rem;
24-
line-height: 1.78;
25-
color: var(--fg);
26-
background: var(--bg);
27-
max-width: 50rem;
28-
margin: 0 auto;
29-
padding: 3rem 1.5rem 5rem;
30-
}
31-
32-
h1 {
33-
font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
34-
sans-serif;
35-
font-size: 1.75rem;
36-
font-weight: 800;
37-
line-height: 1.35;
38-
color: var(--heading);
39-
margin: 0 0 1.5rem;
40-
padding-bottom: 0.75rem;
41-
border-bottom: 3px solid var(--accent);
42-
}
43-
44-
a {
45-
color: var(--accent);
46-
}
47-
</style>
7+
{{- $css := resources.Get "css/main.css" -}}
8+
<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
489
</head>
4910
<body>
5011
<main>

0 commit comments

Comments
 (0)