Skip to content

Commit 9441dd9

Browse files
nedtwiggnedtwigg
committed
Merge branch 'marketing-fixup'
# Conflicts: # website/README.mdx
2 parents 2c211a9 + 5cf2b71 commit 9441dd9

7 files changed

Lines changed: 173 additions & 309 deletions

File tree

‎website/README.mdx‎

Lines changed: 0 additions & 202 deletions
This file was deleted.

‎website/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
88
<link rel="preconnect" href="https://fonts.googleapis.com" />
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10-
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
10+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Ubuntu+Sans+Mono&display=swap" rel="stylesheet" />
1111
</head>
1212
<body>
1313
<div id="root"></div>

‎website/src/components/SiteHeader.tsx‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const SiteHeader = forwardRef<HTMLElement, SiteHeaderProps>(
3939
? {
4040
color: "var(--vscode-editor-foreground, #cccccc)",
4141
fontFamily:
42-
"var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)",
42+
"var(--vscode-font-family, var(--font-display))",
4343
backgroundColor:
4444
"color-mix(in oklab, var(--vscode-editorGroupHeader-tabsBackground, var(--vscode-sideBar-background, #252526)) 92%, transparent)",
4545
borderColor: "var(--vscode-panel-border, #2b2b2b)",
@@ -51,23 +51,9 @@ const SiteHeader = forwardRef<HTMLElement, SiteHeaderProps>(
5151

5252
return (
5353
<>
54-
<div
55-
className={`fixed top-0 left-0 right-0 z-30 bg-[var(--color-caramel)] text-[var(--color-bg)] text-center text-sm font-display font-semibold py-1.5${themeAware ? " border-b" : ""}`}
56-
style={
57-
themeAware
58-
? {
59-
backgroundColor: "var(--vscode-badge-background, #007acc)",
60-
borderColor: "var(--vscode-panel-border, #2b2b2b)",
61-
color: "var(--vscode-badge-foreground, #ffffff)",
62-
}
63-
: undefined
64-
}
65-
>
66-
🚧 Under construction — check back soon! 🚧
67-
</div>
6854
<header
6955
ref={ref}
70-
className={`fixed top-8 left-0 right-0 z-20 flex items-center justify-between gap-3 px-4 md:px-8 font-display text-lg font-medium${
56+
className={`fixed top-0 left-0 right-0 z-20 flex items-center justify-between gap-3 px-4 md:px-8 font-display text-lg${
7157
themeAware ? " h-16 border-b py-0 md:h-20" : " py-4 md:py-6"
7258
}`}
7359
style={headerStyle}
@@ -77,12 +63,12 @@ const SiteHeader = forwardRef<HTMLElement, SiteHeaderProps>(
7763
href="/"
7864
className={
7965
brandVisible
80-
? `text-xl font-semibold tracking-tight transition-opacity ${
66+
? `text-xl transition-opacity ${
8167
themeAware
8268
? "opacity-80 hover:opacity-100"
8369
: "opacity-50 hover:opacity-100 text-[var(--color-caramel)]"
8470
}`
85-
: `text-xl font-semibold tracking-tight ${
71+
: `text-xl ${
8672
themeAware ? "" : "text-[var(--color-caramel)]"
8773
}`
8874
}
@@ -118,8 +104,8 @@ const SiteHeader = forwardRef<HTMLElement, SiteHeaderProps>(
118104
? "opacity-100"
119105
: "opacity-70 hover:opacity-100"
120106
: isActive
121-
? "text-[var(--color-caramel-light)]"
122-
: "hover:text-[var(--color-caramel-light)]"
107+
? "text-[var(--color-caramel)]"
108+
: "hover:text-[var(--color-caramel)]"
123109
}`}
124110
style={
125111
themeAware && isActive

‎website/src/index.css‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
@import "tailwindcss";
22

33
@theme {
4-
--font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
4+
--font-display: "Ubuntu Sans Mono", ui-monospace, monospace;
5+
--font-body: "Ubuntu Mono", ui-monospace, monospace;
56
--color-bg: oklch(10% 0.01 60);
67
--color-surface: oklch(18% 0.015 60);
78
--color-text: oklch(92% 0.01 60);
8-
--color-caramel: oklch(65% 0.14 60);
9-
--color-caramel-light: oklch(75% 0.12 60);
9+
--color-caramel: #d38d5f;
1010
}
1111

1212
html {
1313
background: var(--color-bg);
1414
color: var(--color-text);
15+
font-family: var(--font-body);
1516
font-kerning: normal;
1617
}
1718

18-
/* Override lib's terminal-app styles (body overflow:hidden, #root height:100vh)
19-
which Vite loads globally. The Playground page re-applies them when it mounts. */
20-
body {
19+
/* Override lib's terminal-app styles (body overflow:hidden, #root height:100vh,
20+
body font-family system font) which Vite loads globally. The Playground page
21+
re-applies them when it mounts. Higher specificity (html body) is required so
22+
we beat the lib's `body` rule which loads after ours on /playground. */
23+
html body {
2124
overflow: auto;
25+
font-family: var(--font-body);
2226
}
2327

2428
#root {

‎website/src/pages/Dependencies.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function Component() {
1111

1212
<div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] pt-24 pb-16">
1313
<div className="mx-auto max-w-3xl px-4 md:px-6">
14-
<h1 className="font-display text-[clamp(1.75rem,3vw+0.5rem,2.5rem)] font-semibold tracking-tight mb-2">
14+
<h1 className="font-display text-[clamp(1.5rem,2.5vw+0.5rem,2.25rem)] mb-2">
1515
Dependencies
1616
</h1>
1717
<p className="text-base opacity-50 mb-10">
@@ -21,9 +21,9 @@ export function Component() {
2121
<table className="w-full text-sm">
2222
<thead>
2323
<tr className="text-left border-b border-[var(--color-text)]/10">
24-
<th className="pb-2 font-medium opacity-70">Package</th>
25-
<th className="pb-2 font-medium opacity-70">Version</th>
26-
<th className="pb-2 font-medium opacity-70">License</th>
24+
<th className="pb-2 opacity-70">Package</th>
25+
<th className="pb-2 opacity-70">Version</th>
26+
<th className="pb-2 opacity-70">License</th>
2727
</tr>
2828
</thead>
2929
<tbody>

0 commit comments

Comments
 (0)