Skip to content

Commit 6273efd

Browse files
RichardGeorgeDavisRichardGeorgeDavis
committed
Refresh minimal Pages site styling
1 parent 2dce6d1 commit 6273efd

File tree

2 files changed

+142
-52
lines changed

2 files changed

+142
-52
lines changed

‎site/index.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,12 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="color-scheme" content="dark light" />
67
<title>Codex Workspace</title>
78
<meta
89
name="description"
910
content="Local-first workspace structure for managing many standalone repos, shared caches, and a practical Workspace Hub without forcing a monorepo."
1011
/>
11-
<link rel="preconnect" href="https://fonts.googleapis.com" />
12-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13-
<link
14-
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
15-
rel="stylesheet"
16-
/>
1712
<link rel="stylesheet" href="./styles.css" />
1813
</head>
1914
<body>

‎site/styles.css‎

Lines changed: 141 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,52 @@
11
:root {
2-
--bg: #f5efe1;
3-
--panel: rgba(255, 252, 245, 0.78);
4-
--panel-strong: rgba(255, 248, 232, 0.92);
5-
--text: #1f1a16;
6-
--muted: #63584d;
7-
--line: rgba(31, 26, 22, 0.12);
8-
--accent: #0f766e;
9-
--accent-strong: #134e4a;
10-
--shadow: 0 24px 80px rgba(71, 52, 31, 0.14);
2+
color-scheme: dark;
3+
--bg: #282a36;
4+
--bg-accent: rgba(98, 114, 164, 0.12);
5+
--panel: #282a36;
6+
--panel-strong: #323543;
7+
--panel-emphasis: #323543;
8+
--text: #f8f8f2;
9+
--text-soft: #c9d1d9;
10+
--muted: #8b949e;
11+
--line: #44475a;
12+
--line-muted: rgba(240, 246, 252, 0.1);
13+
--accent: #bd93f9;
14+
--accent-secondary: #8be9fd;
15+
--accent-tertiary: #ff79c6;
16+
--accent-tint: rgba(189, 147, 249, 0.1);
17+
--code-bg: #323543;
18+
--button-bg: #323543;
19+
--button-hover: #30363d;
20+
--focus-ring: rgba(189, 147, 249, 0.38);
21+
--radius-panel: 16px;
22+
--radius-card: 12px;
23+
--radius-button: 6px;
24+
--shadow: none;
25+
}
26+
27+
@media (prefers-color-scheme: light) {
28+
:root {
29+
color-scheme: light;
30+
--bg: #f5f5f5;
31+
--bg-accent: rgba(99, 93, 151, 0.08);
32+
--panel: #ffffff;
33+
--panel-strong: #ffffff;
34+
--panel-emphasis: #f5f5f5;
35+
--text: #1f1f1f;
36+
--text-soft: #1f1f1f;
37+
--muted: #635d97;
38+
--line: #cfcfde;
39+
--line-muted: #cfcfde;
40+
--accent: #644ac9;
41+
--accent-secondary: #036a96;
42+
--accent-tertiary: #a3144d;
43+
--accent-tint: rgba(100, 74, 201, 0.1);
44+
--code-bg: #f5f5f5;
45+
--button-bg: rgba(3, 106, 150, 0.08);
46+
--button-hover: rgba(100, 74, 201, 0.08);
47+
--focus-ring: rgba(100, 74, 201, 0.32);
48+
--shadow: none;
49+
}
1150
}
1251

1352
* {
@@ -22,82 +61,126 @@ body {
2261

2362
body {
2463
background:
25-
radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 28%),
26-
radial-gradient(circle at bottom right, rgba(191, 143, 0, 0.14), transparent 30%),
27-
linear-gradient(180deg, #fbf6ec 0%, var(--bg) 100%);
64+
linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
2865
color: var(--text);
29-
font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
66+
font-family:
67+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
68+
}
69+
70+
body::before {
71+
content: "";
72+
position: fixed;
73+
inset: 0;
74+
z-index: -1;
75+
background-image:
76+
linear-gradient(var(--bg-accent) 1px, transparent 1px),
77+
linear-gradient(90deg, var(--bg-accent) 1px, transparent 1px);
78+
background-size: 32px 32px;
79+
opacity: 0.22;
80+
pointer-events: none;
3081
}
3182

3283
.page-shell {
3384
width: min(1100px, calc(100% - 2rem));
3485
margin: 0 auto;
35-
padding: 3rem 0 4rem;
86+
padding: 2rem 0 4rem;
3687
}
3788

3889
.hero {
39-
padding: 2.5rem;
90+
padding: 2rem;
4091
border: 1px solid var(--line);
41-
border-radius: 28px;
42-
background: linear-gradient(145deg, rgba(255, 252, 245, 0.94), rgba(250, 243, 230, 0.88));
92+
border-radius: var(--radius-panel);
93+
background: var(--panel);
4394
box-shadow: var(--shadow);
4495
}
4596

4697
.eyebrow,
4798
h1,
4899
h2 {
49-
font-family: "Space Grotesk", sans-serif;
100+
font-family:
101+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
50102
}
51103

52104
.eyebrow {
53105
margin: 0 0 1rem;
54-
letter-spacing: 0.12em;
106+
letter-spacing: 0.08em;
55107
text-transform: uppercase;
56-
font-size: 0.82rem;
57-
color: var(--accent-strong);
108+
font-size: 0.75rem;
109+
font-weight: 700;
110+
color: var(--accent);
58111
}
59112

60113
h1 {
61114
margin: 0;
62-
max-width: 12ch;
63-
font-size: clamp(2.7rem, 5vw, 4.9rem);
64-
line-height: 0.95;
115+
font-size: clamp(2.5rem, 5vw, 4.4rem);
116+
line-height: 1.02;
117+
font-weight: 600;
65118
}
66119

67120
.lede {
68121
max-width: 58rem;
69-
margin: 1.4rem 0 0;
70-
font-size: 1.1rem;
71-
line-height: 1.7;
122+
margin: 1rem 0 0;
123+
font-size: 1rem;
124+
line-height: 1.6;
72125
color: var(--muted);
73126
}
74127

75128
.hero-actions {
76129
display: flex;
77130
flex-wrap: wrap;
78131
gap: 0.8rem;
79-
margin-top: 1.8rem;
132+
margin-top: 1.5rem;
80133
}
81134

82135
.hero-actions a,
83136
.text-link {
84-
color: var(--accent-strong);
137+
color: var(--accent-secondary);
85138
text-decoration: none;
86139
font-weight: 600;
87140
}
88141

89142
.hero-actions a {
90143
display: inline-flex;
91144
align-items: center;
92-
min-height: 46px;
93-
padding: 0.8rem 1rem;
94-
border: 1px solid rgba(19, 78, 74, 0.18);
95-
border-radius: 999px;
96-
background: rgba(255, 255, 255, 0.7);
145+
justify-content: center;
146+
min-height: 2.5rem;
147+
padding: 0.55rem 0.95rem;
148+
border: 1px solid var(--line-muted);
149+
border-radius: var(--radius-button);
150+
background: var(--button-bg);
151+
color: var(--text-soft);
152+
font-size: 0.875rem;
153+
transition:
154+
transform 180ms ease,
155+
background-color 180ms ease,
156+
border-color 180ms ease,
157+
color 180ms ease;
158+
}
159+
160+
.hero-actions a:first-child {
161+
border-color: var(--accent);
162+
background: transparent;
163+
color: var(--accent);
164+
}
165+
166+
.hero-actions a:hover,
167+
.hero-actions a:focus-visible,
168+
.text-link:hover,
169+
.text-link:focus-visible {
170+
color: var(--accent-secondary);
97171
}
98172

99173
.hero-actions a:hover,
100-
.text-link:hover {
174+
.hero-actions a:focus-visible {
175+
transform: translateY(-1px);
176+
border-color: var(--accent-secondary);
177+
background: var(--button-hover);
178+
}
179+
180+
.hero-actions a:first-child:hover,
181+
.hero-actions a:first-child:focus-visible {
182+
border-color: var(--accent);
183+
background: var(--accent-tint);
101184
color: var(--accent);
102185
}
103186

@@ -109,39 +192,52 @@ h1 {
109192
}
110193

111194
.card {
112-
padding: 1.4rem;
195+
padding: 1.25rem;
113196
border: 1px solid var(--line);
114-
border-radius: 22px;
197+
border-radius: var(--radius-card);
115198
background: var(--panel);
116-
backdrop-filter: blur(10px);
117-
box-shadow: 0 12px 36px rgba(71, 52, 31, 0.08);
199+
box-shadow: var(--shadow);
118200
}
119201

120202
.card.emphasis {
121-
background: var(--panel-strong);
203+
background: var(--panel-emphasis);
204+
border-color: var(--accent);
122205
}
123206

124207
h2 {
125208
margin: 0 0 0.9rem;
126-
font-size: 1.25rem;
209+
font-size: 1.1rem;
210+
font-weight: 600;
127211
}
128212

129213
p,
130214
li {
131215
color: var(--muted);
132-
line-height: 1.7;
216+
line-height: 1.6;
133217
}
134218

135219
ul {
136220
margin: 0;
137221
padding-left: 1.2rem;
138222
}
139223

224+
li + li {
225+
margin-top: 0.45rem;
226+
}
227+
140228
code {
141229
padding: 0.15rem 0.35rem;
142-
border-radius: 0.45rem;
143-
background: rgba(19, 78, 74, 0.08);
144-
color: var(--text);
230+
border: 1px solid var(--line);
231+
border-radius: 0.35rem;
232+
background: var(--code-bg);
233+
color: var(--text-soft);
234+
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
235+
font-size: 0.92em;
236+
}
237+
238+
a:focus-visible {
239+
outline: 2px solid var(--focus-ring);
240+
outline-offset: 2px;
145241
}
146242

147243
@media (max-width: 760px) {
@@ -152,7 +248,6 @@ code {
152248

153249
.hero {
154250
padding: 1.5rem;
155-
border-radius: 24px;
156251
}
157252

158253
.grid {

0 commit comments

Comments
 (0)