Skip to content

Commit cb50173

Browse files
sestinjclaude
sestinj
and
claude
committed
fix: update OG card to dark theme matching next-geo style
Replace the light off-white OG card with the correct dark theme: watercolor background, gradient overlay, white text, and Continue logo on the right side. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 5d82579 commit cb50173

2 files changed

Lines changed: 45 additions & 61 deletions

File tree

‎.github/assets/og-bg.png‎

2.54 MB
Loading

‎.github/assets/og-card.html‎

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,30 @@
1414
height: 640px;
1515
overflow: hidden;
1616
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
17-
background: hsl(0 0% 95.3%);
17+
background: #1a1a2e;
1818
position: relative;
1919
}
2020

21-
/* Ambient glow — top-right */
22-
.ambient {
21+
/* Watercolor background */
22+
.bg-image {
2323
position: absolute;
24-
top: -80px;
25-
right: -80px;
26-
width: 600px;
27-
height: 600px;
28-
background: radial-gradient(
29-
circle at center,
30-
rgba(120, 100, 255, 0.12) 0%,
31-
rgba(180, 140, 255, 0.06) 40%,
32-
transparent 70%
24+
inset: 0;
25+
background: url('./og-bg.png') center/cover no-repeat;
26+
}
27+
28+
/* Gradient overlay — darker on left for text, transparent on right for icon */
29+
.bg-wash {
30+
position: absolute;
31+
inset: 0;
32+
background: linear-gradient(
33+
to right,
34+
rgba(10, 10, 30, 0.7) 0%,
35+
rgba(10, 10, 30, 0.45) 50%,
36+
rgba(10, 10, 30, 0.15) 100%
3337
);
34-
filter: blur(40px);
35-
pointer-events: none;
3638
}
3739

40+
/* Content — left side */
3841
.content {
3942
position: relative;
4043
z-index: 1;
@@ -52,71 +55,55 @@
5255
font-weight: 400;
5356
text-transform: uppercase;
5457
letter-spacing: 0.2em;
55-
color: rgba(0, 0, 0, 0.3);
58+
color: rgba(255, 255, 255, 0.5);
5659
margin-bottom: 24px;
5760
}
5861

5962
h1 {
60-
font-size: 72px;
63+
font-size: 68px;
6164
font-weight: 300;
6265
letter-spacing: -2px;
6366
line-height: 1.05;
64-
color: rgba(0, 0, 0, 0.88);
67+
color: rgba(255, 255, 255, 0.95);
6568
margin-bottom: 20px;
6669
}
6770

6871
.tagline {
6972
font-size: 24px;
7073
font-weight: 400;
71-
color: rgba(0, 0, 0, 0.4);
74+
color: rgba(255, 255, 255, 0.6);
7275
line-height: 1.5;
7376
margin-bottom: 40px;
7477
}
7578

7679
.pill {
7780
display: inline-block;
7881
padding: 12px 28px;
79-
background: rgba(0, 0, 0, 0.04);
80-
border: 1px solid rgba(0, 0, 0, 0.06);
81-
border-radius: 8px;
82+
background: rgba(255, 255, 255, 0.08);
83+
border: 1px solid rgba(255, 255, 255, 0.15);
8284
font-family: 'IBM Plex Mono', monospace;
8385
font-size: 17px;
8486
font-weight: 400;
85-
color: rgba(0, 0, 0, 0.5);
87+
color: rgba(255, 255, 255, 0.7);
8688
letter-spacing: 0.02em;
8789
}
8890

89-
.footer {
91+
/* Continue icon — right side */
92+
.logo-icon {
9093
position: absolute;
91-
bottom: 0;
92-
left: 0;
93-
right: 0;
94-
padding: 0 100px 36px;
95-
display: flex;
96-
align-items: center;
97-
justify-content: space-between;
98-
border-top: 1px solid rgba(0, 0, 0, 0.06);
99-
padding-top: 20px;
100-
margin: 0 100px;
101-
padding-left: 0;
102-
padding-right: 0;
103-
}
104-
105-
.footer-logo {
106-
opacity: 0.3;
107-
height: 20px;
108-
}
109-
110-
.footer-url {
111-
font-family: 'IBM Plex Mono', monospace;
112-
font-size: 13px;
113-
color: rgba(0, 0, 0, 0.3);
114-
letter-spacing: 0.02em;
94+
z-index: 1;
95+
right: 60px;
96+
top: 50%;
97+
transform: translateY(-50%);
98+
width: 520px;
99+
height: 520px;
100+
opacity: 1;
115101
}
116102
</style>
117103
</head>
118104
<body>
119-
<div class="ambient"></div>
105+
<div class="bg-image"></div>
106+
<div class="bg-wash"></div>
120107
<div class="content">
121108
<p class="label">Continue</p>
122109
<h1>create-software-factory</h1>
@@ -125,18 +112,15 @@ <h1>create-software-factory</h1>
125112
<code class="pill">npx create-software-factory</code>
126113
</div>
127114
</div>
128-
<div class="footer">
129-
<svg class="footer-logo" viewBox="27.2 27.2 52.4 48.7" xmlns="http://www.w3.org/2000/svg">
130-
<path fill="currentColor" d="M68.6,34.7l-2.7,4.7l6.8,11.9c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3l-6.8,11.9l2.7,4.7l9.7-16.9L68.6,34.7
131-
L68.6,34.7z M64.9,38.8l2.7-4.7h-5.4l-2.7,4.7H64.9L64.9,38.8z M59.4,40l6.3,11h5.4l-6.3-11H59.4z M64.9,63.1l6.3-11h-5.4l-6.3,11
132-
H64.9z M59.4,64.4l2.7,4.7h5.4l-2.7-4.7H59.4L59.4,64.4z M41.1,70.2c-0.1,0-0.2,0-0.3-0.1s-0.2-0.1-0.2-0.2L33.7,58h-5.4L38,74.9
133-
h19.5l-2.7-4.7H41.1L41.1,70.2z M55.8,69.6l2.7,4.7l2.7-4.7l-2.7-4.7L55.8,69.6L55.8,69.6z M57.5,64.3H44.8L42.1,69h12.6L57.5,64.3z
134-
M43.8,63.7l-6.3-11l-2.7,4.7l6.3,11C41.1,68.4,43.8,63.7,43.8,63.7z M28.3,56.8h5.4l2.7-4.7H31C31,52.1,28.3,56.8,28.3,56.8z
135-
M40.5,33.3c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.2-0.1,0.3-0.1h13.7l2.7-4.7H38l-9.7,16.9h5.4L40.5,33.3L40.5,33.3z M36.4,51.1l-2.7-4.7
136-
h-5.4l2.7,4.7C31,51.1,36.4,51.1,36.4,51.1z M41,34.8l-6.3,11l2.7,4.7l6.3-11L41,34.8z M54.8,34.2H42.1l2.7,4.7h12.7L54.8,34.2z
137-
M58.5,38.3l2.7-4.7l-2.7-4.7l-2.7,4.7L58.5,38.3z"/>
138-
</svg>
139-
<span class="footer-url">continue.dev</span>
140-
</div>
115+
<svg class="logo-icon" viewBox="27.2 27.2 52.4 48.7" xmlns="http://www.w3.org/2000/svg">
116+
<path fill="white" d="M68.6,34.7l-2.7,4.7l6.8,11.9c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3l-6.8,11.9l2.7,4.7l9.7-16.9L68.6,34.7
117+
L68.6,34.7z M64.9,38.8l2.7-4.7h-5.4l-2.7,4.7H64.9L64.9,38.8z M59.4,40l6.3,11h5.4l-6.3-11H59.4z M64.9,63.1l6.3-11h-5.4l-6.3,11
118+
H64.9z M59.4,64.4l2.7,4.7h5.4l-2.7-4.7H59.4L59.4,64.4z M41.1,70.2c-0.1,0-0.2,0-0.3-0.1s-0.2-0.1-0.2-0.2L33.7,58h-5.4L38,74.9
119+
h19.5l-2.7-4.7H41.1L41.1,70.2z M55.8,69.6l2.7,4.7l2.7-4.7l-2.7-4.7L55.8,69.6L55.8,69.6z M57.5,64.3H44.8L42.1,69h12.6L57.5,64.3z
120+
M43.8,63.7l-6.3-11l-2.7,4.7l6.3,11C41.1,68.4,43.8,63.7,43.8,63.7z M28.3,56.8h5.4l2.7-4.7H31C31,52.1,28.3,56.8,28.3,56.8z
121+
M40.5,33.3c0-0.1,0.1-0.2,0.2-0.2c0.1,0,0.2-0.1,0.3-0.1h13.7l2.7-4.7H38l-9.7,16.9h5.4L40.5,33.3L40.5,33.3z M36.4,51.1l-2.7-4.7
122+
h-5.4l2.7,4.7C31,51.1,36.4,51.1,36.4,51.1z M41,34.8l-6.3,11l2.7,4.7l6.3-11L41,34.8z M54.8,34.2H42.1l2.7,4.7h12.7L54.8,34.2z
123+
M58.5,38.3l2.7-4.7l-2.7-4.7l-2.7,4.7L58.5,38.3z"/>
124+
</svg>
141125
</body>
142126
</html>

0 commit comments

Comments
 (0)