Skip to content

Commit fc6849f

Browse files
ckdakeckdake
committed
WIP new site
1 parent 975a587 commit fc6849f

6 files changed

Lines changed: 170 additions & 62 deletions

File tree

‎.devcontainer/devcontainer.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// README at: https://github.com/devcontainers/templates/tree/main/src/python
33
{
44
"name": "python-tracekit",
5-
"image": "mcr.microsoft.com/devcontainers/python:1-3.13-bullseye",
5+
"image": "mcr.microsoft.com/devcontainers/python:3-3.14-bookworm",
66

77
// Features to add to the dev container. More info: https://containers.dev/features.
88
"features": {
@@ -11,9 +11,6 @@
1111
},
1212
"ghcr.io/devcontainers/features/git:1": {
1313
"ppa": false
14-
},
15-
"ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
16-
"version": "latest"
1714
}
1815
},
1916

‎.devcontainer/install.sh‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,17 @@ else
3535
print_status "Adding Yarn GPG key to apt keyring (if needed)..."
3636
if command -v gpg >/dev/null 2>&1; then
3737
curl -fsSL https://dl.yarnpkg.com/debian/pubkey.gpg \
38-
| sudo gpg --dearmor -o /usr/share/keyrings/yarn-archive-keyring.gpg || true
38+
| gpg --dearmor \
39+
| sudo tee /usr/share/keyrings/yarn-archive-keyring.gpg >/dev/null || true
3940
echo "deb [signed-by=/usr/share/keyrings/yarn-archive-keyring.gpg] https://dl.yarnpkg.com/debian/ stable main" \
4041
| sudo tee /etc/apt/sources.list.d/yarn.list >/dev/null || true
4142
else
4243
curl -fsSL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - || true
4344
fi
4445

45-
sudo apt-get update -qq
46-
sudo apt-get install -y -qq \
46+
print_status "Updating packages"
47+
sudo apt-get update
48+
sudo apt-get install -y \
4749
curl \
4850
wget \
4951
git \

‎site/COLORS.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
TraceKit Site Color Palette
2+
3+
Primary
4+
- Signal Blue #2563EB — primary brand accent, buttons, links
5+
- Graphite #111827 — primary text and header/footer background
6+
- Cloud #F8FAFC — page background and light surfaces
7+
8+
Status
9+
- Trace Green #22C55E — success / primary CTA
10+
- Drift Amber #F59E0B — warning / accent
11+
- Conflict Red #EF4444 — error / destructive
12+
13+
Neutrals
14+
- Muted Text #6B7280 — secondary text
15+
- Borders #E5E7EB — neutral border color
16+
- Subtle Fill #F1F5F9 — subtle surface fills and code backgrounds
17+
18+
Accent (optional)
19+
- Pulse Violet #7C3AED — optional accent for hero gradients and highlights
20+
21+
Usage guidance
22+
- Use `Signal Blue` for links, primary highlights, and the brand accent.
23+
- Use `Graphite` for primary body text and prominent backgrounds (header/footer).
24+
- Use `Cloud` and `Subtle Fill` for page backgrounds and surfaces to keep contrast high.
25+
- Reserve `Trace Green`, `Drift Amber`, and `Conflict Red` for status badges, CTAs, and alerts.
26+
- `Pulse Violet` can be used sparingly in gradients or for emphasis.
27+
28+
This palette is defined in `site/src/assets/css/style.css` as CSS variables under `:root`.

‎site/src/assets/css/style.css‎

Lines changed: 114 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,31 @@
55
box-sizing: border-box;
66
}
77

8+
:root {
9+
/* Primary */
10+
--signal-blue: #2563EB;
11+
--graphite: #111827;
12+
--cloud: #F8FAFC;
13+
14+
/* Status */
15+
--trace-green: #22C55E;
16+
--drift-amber: #F59E0B;
17+
--conflict-red: #EF4444;
18+
19+
/* Neutrals */
20+
--muted-text: #6B7280;
21+
--borders: #E5E7EB;
22+
--subtle-fill: #F1F5F9;
23+
24+
/* Accent */
25+
--pulse-violet: #7C3AED;
26+
}
27+
828
body {
9-
font-family:
10-
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
29+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
1130
line-height: 1.6;
12-
color: #333;
13-
background: #fff;
31+
color: var(--graphite);
32+
background: var(--cloud);
1433
}
1534

1635
.container {
@@ -21,8 +40,8 @@ body {
2140

2241
/* Header */
2342
.header {
24-
background: #2c3e50;
25-
color: #fff;
43+
background: var(--graphite);
44+
color: var(--cloud);
2645
padding: 1rem 0;
2746
position: sticky;
2847
top: 0;
@@ -46,24 +65,47 @@ body {
4665
}
4766

4867
.nav a {
49-
color: #fff;
68+
color: var(--cloud);
5069
text-decoration: none;
51-
transition: color 0.3s;
70+
transition: color 0.2s ease;
5271
}
5372

5473
.nav a:hover {
55-
color: #3498db;
74+
color: var(--signal-blue);
5675
}
5776

5877
/* Hero section */
5978
.hero {
60-
text-align: center;
61-
padding: 4rem 0;
62-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
63-
color: #fff;
79+
padding: 3rem 0;
6480
margin-bottom: 3rem;
6581
}
6682

83+
.hero-inner {
84+
display: flex;
85+
gap: 2rem;
86+
align-items: center;
87+
}
88+
89+
.hero-media img {
90+
max-width: 520px;
91+
width: 100%;
92+
border-radius: 8px;
93+
border: 1px solid var(--borders);
94+
background: var(--subtle-fill);
95+
}
96+
97+
.hero-copy {
98+
flex: 1;
99+
color: var(--graphite);
100+
}
101+
102+
.hero h1,
103+
.hero-copy h1 {
104+
font-size: 2.25rem;
105+
margin-bottom: 0.75rem;
106+
color: var(--graphite);
107+
}
108+
67109
.hero h1 {
68110
font-size: 3rem;
69111
margin-bottom: 1rem;
@@ -78,17 +120,18 @@ body {
78120

79121
.cta-button {
80122
display: inline-block;
81-
background: #e74c3c;
82-
color: #fff;
83-
padding: 12px 30px;
123+
background: var(--trace-green);
124+
color: var(--cloud);
125+
padding: 10px 22px;
84126
text-decoration: none;
85-
border-radius: 5px;
86-
font-weight: bold;
87-
transition: background 0.3s;
127+
border-radius: 8px;
128+
font-weight: 700;
129+
transition: transform 0.12s ease, box-shadow 0.12s ease;
130+
box-shadow: 0 6px 18px rgba(34,37,39,0.06);
88131
}
89132

90133
.cta-button:hover {
91-
background: #c0392b;
134+
transform: translateY(-2px);
92135
}
93136

94137
/* Content */
@@ -103,23 +146,23 @@ body {
103146
.content h3 {
104147
margin-top: 2rem;
105148
margin-bottom: 1rem;
106-
color: #2c3e50;
107149
}
108150

109151
.content h1 {
110-
font-size: 2.5rem;
111-
border-bottom: 3px solid #3498db;
152+
font-size: 2.25rem;
153+
border-bottom: 3px solid var(--signal-blue);
112154
padding-bottom: 0.5rem;
155+
color: var(--graphite);
113156
}
114157

115158
.content h2 {
116-
font-size: 2rem;
117-
color: #34495e;
159+
font-size: 1.75rem;
160+
color: var(--graphite);
118161
}
119162

120163
.content h3 {
121-
font-size: 1.5rem;
122-
color: #7f8c8d;
164+
font-size: 1.25rem;
165+
color: var(--muted-text);
123166
}
124167

125168
.content p {
@@ -137,18 +180,18 @@ body {
137180
}
138181

139182
.content code {
140-
background: #f8f9fa;
183+
background: var(--subtle-fill);
141184
padding: 2px 6px;
142-
border-radius: 3px;
185+
border-radius: 4px;
143186
font-family: 'Monaco', 'Consolas', monospace;
144187
font-size: 0.9em;
145188
}
146189

147190
.content pre {
148-
background: #2c3e50;
149-
color: #ecf0f1;
191+
background: var(--graphite);
192+
color: var(--cloud);
150193
padding: 1rem;
151-
border-radius: 5px;
194+
border-radius: 6px;
152195
overflow-x: auto;
153196
margin: 1rem 0;
154197
}
@@ -160,15 +203,15 @@ body {
160203
}
161204

162205
.content blockquote {
163-
border-left: 4px solid #3498db;
206+
border-left: 4px solid var(--signal-blue);
164207
padding-left: 1rem;
165208
margin: 1rem 0;
166209
font-style: italic;
167-
color: #7f8c8d;
210+
color: var(--muted-text);
168211
}
169212

170213
.content a {
171-
color: #3498db;
214+
color: var(--signal-blue);
172215
text-decoration: none;
173216
}
174217

@@ -184,27 +227,27 @@ body {
184227

185228
.content th,
186229
.content td {
187-
border: 1px solid #ddd;
230+
border: 1px solid var(--borders);
188231
padding: 0.5rem;
189232
text-align: left;
190233
}
191234

192235
.content th {
193-
background: #f8f9fa;
236+
background: var(--subtle-fill);
194237
font-weight: bold;
195238
}
196239

197240
/* Footer */
198241
.footer {
199-
background: #34495e;
200-
color: #fff;
242+
background: var(--graphite);
243+
color: var(--cloud);
201244
text-align: center;
202245
padding: 2rem 0;
203246
margin-top: 4rem;
204247
}
205248

206249
.footer a {
207-
color: #3498db;
250+
color: var(--signal-blue);
208251
text-decoration: none;
209252
}
210253

@@ -213,7 +256,11 @@ body {
213256
}
214257

215258
/* Responsive */
216-
@media (width <= 768px) {
259+
@media (max-width: 900px) {
260+
.hero-inner {
261+
flex-direction: column;
262+
}
263+
217264
.header .container {
218265
flex-direction: column;
219266
gap: 1rem;
@@ -224,7 +271,7 @@ body {
224271
}
225272

226273
.hero h1 {
227-
font-size: 2rem;
274+
font-size: 1.75rem;
228275
}
229276

230277
.hero p {
@@ -236,6 +283,31 @@ body {
236283
}
237284
}
238285

286+
.services {
287+
list-style: none;
288+
padding-left: 0;
289+
display: grid;
290+
grid-template-columns: repeat(2, minmax(0, 1fr));
291+
gap: 0.25rem 1rem;
292+
margin: 0.5rem 0 1rem 0;
293+
}
294+
295+
.services li {
296+
background: var(--subtle-fill);
297+
padding: 8px 10px;
298+
border-radius: 6px;
299+
border: 1px solid var(--borders);
300+
color: var(--graphite);
301+
font-weight: 600;
302+
}
303+
304+
.small {
305+
color: var(--muted-text);
306+
margin-top: 0.5rem;
307+
}
308+
309+
.actions { margin-top: 1rem; }
310+
239311
/* Smooth scrolling */
240312
html {
241313
scroll-behavior: smooth;

‎site/src/assets/img/screenshot.png‎

216 KB
Loading

0 commit comments

Comments
 (0)