Skip to content

Commit fbdec67

Browse files
austin-thesingaustin-thesing
committed
Refresh OG image to match new hero: updated headline and design
Rebuilds og-temp.html with the new two-line headline ('Talk to your terminal. In plain English.'), $ msh brand mark, gradient orbs and grid from the hero, gradient highlight on the second line, and the WCAG AA text ramp. Regenerates og-image.png via capture-og.js.
1 parent 0499411 commit fbdec67

2 files changed

Lines changed: 99 additions & 63 deletions

File tree

‎website/public/og-image.png‎

92.1 KB
Loading

‎website/public/og-temp.html‎

Lines changed: 99 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,120 +2,156 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
58
<style>
69
* {
710
margin: 0;
811
padding: 0;
912
box-sizing: border-box;
1013
}
11-
14+
1215
body {
1316
width: 1200px;
1417
height: 630px;
1518
background: #030303;
1619
display: flex;
1720
align-items: center;
1821
justify-content: center;
19-
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
22+
font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
2023
overflow: hidden;
2124
position: relative;
2225
}
23-
24-
/* Subtle grid pattern */
26+
27+
/* Gradient orbs — matches the hero */
28+
.orb {
29+
position: absolute;
30+
border-radius: 50%;
31+
filter: blur(120px);
32+
pointer-events: none;
33+
}
34+
.orb-1 {
35+
width: 600px;
36+
height: 600px;
37+
background: #fab283;
38+
top: -220px;
39+
left: 50%;
40+
transform: translateX(-50%);
41+
opacity: 0.12;
42+
}
43+
.orb-2 {
44+
width: 400px;
45+
height: 400px;
46+
background: #5c9cf5;
47+
bottom: -140px;
48+
left: 18%;
49+
opacity: 0.08;
50+
}
51+
52+
/* Grid pattern — matches the hero */
2553
body::before {
2654
content: '';
2755
position: absolute;
2856
inset: 0;
29-
background-image:
57+
background-image:
3058
linear-gradient(rgba(37, 37, 37, 0.3) 1px, transparent 1px),
3159
linear-gradient(90deg, rgba(37, 37, 37, 0.3) 1px, transparent 1px);
3260
background-size: 60px 60px;
33-
opacity: 0.2;
34-
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
35-
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
61+
opacity: 0.25;
62+
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 10%, transparent 70%);
63+
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 10%, transparent 70%);
3664
}
37-
65+
3866
.container {
3967
display: flex;
4068
flex-direction: column;
4169
align-items: center;
42-
gap: 32px;
70+
gap: 28px;
4371
z-index: 1;
4472
padding: 80px;
73+
position: relative;
4574
}
46-
47-
.brand-icon {
48-
width: 80px;
49-
height: 80px;
50-
background: #0a0a0a;
51-
border-radius: 12px;
52-
display: flex;
53-
align-items: center;
54-
justify-content: center;
55-
border: 1px solid rgba(250, 178, 131, 0.2);
56-
box-shadow:
57-
0 0 0 1px rgba(250, 178, 131, 0.1),
58-
0 8px 40px rgba(0, 0, 0, 0.7),
59-
0 0 40px rgba(250, 178, 131, 0.08);
60-
}
61-
62-
.icon-text {
63-
font-size: 32px;
75+
76+
/* Brand mark — matches the sticky nav */
77+
.brand-mark {
78+
display: inline-flex;
79+
align-items: baseline;
80+
gap: 4px;
81+
font-size: 28px;
6482
font-weight: 700;
65-
color: #fab283;
66-
text-shadow: 0 0 20px rgba(250, 178, 131, 0.5);
83+
letter-spacing: -0.01em;
6784
}
68-
69-
.brand-name {
70-
font-size: 72px;
85+
.brand-mark .dollar { color: #fab283; }
86+
.brand-mark .name { color: #f0f0f0; }
87+
88+
/* Headline — matches the hero title */
89+
.headline {
90+
text-align: center;
91+
font-size: 68px;
7192
font-weight: 700;
72-
color: #eeeeee;
93+
line-height: 1.1;
7394
letter-spacing: -0.03em;
7495
}
75-
76-
.tagline {
77-
font-size: 28px;
78-
color: #b0b0b0;
79-
text-align: center;
80-
line-height: 1.5;
81-
font-weight: 400;
96+
.headline .line-1 {
97+
display: block;
98+
color: #f0f0f0;
8299
}
83-
84-
.terminal-preview {
85-
margin-top: 16px;
100+
.headline .line-2 {
101+
display: block;
102+
background: linear-gradient(135deg, #fab283 0%, #f5a742 100%);
103+
-webkit-background-clip: text;
104+
-webkit-text-fill-color: transparent;
105+
background-clip: text;
106+
}
107+
108+
/* Terminal preview — matches the demo window */
109+
.terminal {
110+
margin-top: 8px;
86111
background: #0a0a0a;
87-
border: 1px solid rgba(37, 37, 37, 0.8);
88-
border-radius: 8px;
89-
padding: 20px 24px;
90-
font-size: 18px;
91-
color: #b0b0b0;
112+
border: 1px solid #252525;
113+
border-radius: 12px;
114+
padding: 20px 28px;
115+
font-size: 22px;
92116
display: flex;
93117
align-items: center;
94-
gap: 12px;
95-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
118+
gap: 14px;
119+
box-shadow:
120+
0 4px 6px -1px rgba(0, 0, 0, 0.3),
121+
0 10px 30px -5px rgba(0, 0, 0, 0.4),
122+
0 0 0 1px rgba(255, 255, 255, 0.03);
96123
}
97-
98-
.prompt {
124+
.terminal .prompt {
99125
color: #fab283;
100126
font-weight: 600;
101127
}
102-
103-
.command {
104-
color: #5c9cf5;
128+
.terminal .cmd {
129+
color: #f0f0f0;
130+
}
131+
.terminal .arrow {
132+
color: #7fd88f;
133+
}
134+
.terminal .out {
135+
color: #b8b8b8;
105136
}
106137
</style>
107138
</head>
108139
<body>
140+
<div class="orb orb-1"></div>
141+
<div class="orb orb-2"></div>
109142
<div class="container">
110-
<div class="brand-icon">
111-
<span class="icon-text">$_</span>
143+
<div class="brand-mark">
144+
<span class="dollar">$</span>
145+
<span class="name">msh</span>
112146
</div>
113-
<h1 class="brand-name">magic-shell</h1>
114-
<p class="tagline">Type what you mean.<br>Execute what you need.</p>
115-
<div class="terminal-preview">
147+
<h1 class="headline">
148+
<span class="line-1">Talk to your terminal.</span>
149+
<span class="line-2">In plain English.</span>
150+
</h1>
151+
<div class="terminal">
116152
<span class="prompt">$</span>
117-
<span class="command">msh "find all large files"</span>
153+
<span class="cmd">msh "undo my last commit"</span>
118154
</div>
119155
</div>
120156
</body>
121-
</html>
157+
</html>

0 commit comments

Comments
 (0)