Skip to content

Commit 2842818

Browse files
DimillianDimillian
committed
web: update website
1 parent d76e010 commit 2842818

4 files changed

Lines changed: 206 additions & 50 deletions

File tree

‎docs/assets/feature5.png‎

806 KB
Loading

‎docs/assets/feature6.png‎

156 KB
Loading

‎docs/index.html‎

Lines changed: 67 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -142,28 +142,76 @@ <h2>The next-generation IDE.</h2>
142142
<p>Without a text editor built in, because you don’t need it.</p>
143143
</div>
144144

145-
<div class="screens">
146-
<div class="glass shot-large">
147-
<img src="assets/main.png" alt="Codex Monitor full interface" />
148-
</div>
149-
<div class="shot-row">
150-
<figure class="glass shot-small">
151-
<img src="assets/feature1.png" alt="Projects and Codex threads overview" />
152-
<figcaption>Projects and Codex threads overview</figcaption>
153-
</figure>
154-
<figure class="glass shot-small shot-wide">
145+
<div class="bento-grid">
146+
<figure class="glass bento-tile bento-main">
147+
<div class="bento-media">
148+
<img src="assets/main.png" alt="Codex Monitor full interface" />
149+
</div>
150+
<figcaption>
151+
<span class="bento-title">Command center layout</span>
152+
<span class="bento-copy">Threads, reviews, and activity stacked into one view.</span>
153+
</figcaption>
154+
</figure>
155+
156+
<figure class="glass bento-tile bento-chat">
157+
<div class="bento-media">
155158
<img src="assets/feature2.png" alt="Beautiful chat interface and integrated terminal" />
156-
<figcaption>Beautiful chat interface and integrated terminal</figcaption>
157-
</figure>
158-
<figure class="glass shot-small">
159+
</div>
160+
<figcaption>
161+
<span class="bento-title">Conversation + terminal</span>
162+
<span class="bento-copy">Ask, approve, and run commands with context attached.</span>
163+
</figcaption>
164+
</figure>
165+
166+
<figure class="glass bento-tile bento-projects">
167+
<div class="bento-media">
168+
<img src="assets/feature1.png" alt="Projects and Codex threads overview" />
169+
</div>
170+
<figcaption>
171+
<span class="bento-title">Projects hub</span>
172+
<span class="bento-copy">Keep every workspace, thread, and run in view.</span>
173+
</figcaption>
174+
</figure>
175+
176+
<figure class="glass bento-tile bento-git">
177+
<div class="bento-media">
159178
<img src="assets/feature3.png" alt="Git diff, log, and issues all built in" />
160-
<figcaption>Git diff, log, and issues all built in</figcaption>
161-
</figure>
162-
<figure class="glass shot-small">
179+
</div>
180+
<figcaption>
181+
<span class="bento-title">Git + issues</span>
182+
<span class="bento-copy">Diffs, logs, and GitHub issues in one dock.</span>
183+
</figcaption>
184+
</figure>
185+
186+
<figure class="glass bento-tile bento-files">
187+
<div class="bento-media">
163188
<img src="assets/feature4.png" alt="Files tree with search" />
164-
<figcaption>Files tree with search</figcaption>
165-
</figure>
166-
</div>
189+
</div>
190+
<figcaption>
191+
<span class="bento-title">Files tree</span>
192+
<span class="bento-copy">Search and jump through large repos quickly.</span>
193+
</figcaption>
194+
</figure>
195+
196+
<figure class="glass bento-tile bento-diff">
197+
<div class="bento-media">
198+
<img src="assets/feature5.png" alt="Beautiful live git diff" />
199+
</div>
200+
<figcaption>
201+
<span class="bento-title">Beautiful live git diff</span>
202+
<span class="bento-copy">Real-time diff visualization with syntax highlighting.</span>
203+
</figcaption>
204+
</figure>
205+
206+
<figure class="glass bento-tile bento-skills">
207+
<div class="bento-media">
208+
<img src="assets/feature6.png" alt="Skills support" />
209+
</div>
210+
<figcaption>
211+
<span class="bento-title">Skills support</span>
212+
<span class="bento-copy">Autocomplete and use skills seamlessly in your workflow.</span>
213+
</figcaption>
214+
</figure>
167215
</div>
168216
</div>
169217
</section>

‎docs/styles.css‎

Lines changed: 139 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -261,55 +261,133 @@ img {
261261
font-size: 0.95rem;
262262
}
263263

264-
.screens {
264+
.bento-grid {
265265
display: grid;
266-
gap: 24px;
266+
grid-template-columns: repeat(12, 1fr);
267+
gap: 18px;
267268
}
268269

269-
.shot-large {
270+
.bento-tile {
270271
padding: 18px;
272+
display: grid;
273+
gap: 14px;
274+
min-height: 200px;
275+
overflow: hidden;
276+
transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
271277
}
272278

273-
.shot-large img {
274-
border-radius: 16px;
275-
width: 100%;
276-
height: auto;
279+
.bento-tile:hover {
280+
transform: translateY(-6px);
281+
border-color: rgba(255, 255, 255, 0.2);
282+
box-shadow: 0 28px 60px rgba(6, 12, 26, 0.6);
277283
}
278284

279-
.shot-row {
285+
.bento-media {
286+
border-radius: 16px;
287+
background: rgba(8, 12, 22, 0.65);
288+
padding: 10px;
280289
display: grid;
281-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
282-
gap: 18px;
290+
place-items: center;
291+
overflow: hidden;
283292
}
284293

285-
.shot-small {
286-
padding: 16px;
287-
display: grid;
288-
gap: 12px;
289-
transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
294+
.bento-media img {
295+
border-radius: 12px;
296+
width: 100%;
297+
height: 100%;
298+
object-fit: cover;
290299
}
291300

292-
.shot-small figcaption {
293-
font-size: 0.85rem;
301+
.bento-title {
302+
display: block;
303+
font-family: "Space Grotesk", system-ui, sans-serif;
304+
font-weight: 600;
305+
font-size: 1rem;
306+
}
307+
308+
.bento-copy {
309+
display: block;
294310
color: var(--muted);
311+
font-size: 0.9rem;
295312
}
296313

297-
.shot-wide {
298-
grid-column: span 2;
314+
.bento-pill {
315+
justify-self: start;
316+
padding: 6px 12px;
317+
border-radius: 999px;
318+
border: 1px solid rgba(255, 255, 255, 0.16);
319+
font-size: 0.75rem;
320+
letter-spacing: 0.08em;
321+
text-transform: uppercase;
322+
color: var(--accent);
323+
background: rgba(10, 18, 32, 0.7);
299324
}
300325

301-
.shot-small img {
302-
border-radius: 14px;
303-
width: 100%;
304-
height: auto;
305-
object-fit: contain;
306-
background: rgba(8, 12, 22, 0.6);
326+
.bento-main {
327+
grid-column: span 7;
328+
min-height: 320px;
307329
}
308330

309-
.shot-small:hover {
310-
transform: translateY(-6px);
311-
border-color: rgba(255, 255, 255, 0.2);
312-
box-shadow: 0 28px 60px rgba(6, 12, 26, 0.6);
331+
.bento-main .bento-media {
332+
aspect-ratio: 16 / 9;
333+
}
334+
335+
.bento-chat .bento-media {
336+
aspect-ratio: 4 / 3;
337+
}
338+
339+
.bento-projects .bento-media,
340+
.bento-git .bento-media,
341+
.bento-files .bento-media {
342+
aspect-ratio: 5 / 4;
343+
}
344+
345+
.bento-chat {
346+
grid-column: span 5;
347+
}
348+
349+
.bento-projects {
350+
grid-column: span 4;
351+
}
352+
353+
.bento-git {
354+
grid-column: span 4;
355+
}
356+
357+
.bento-files {
358+
grid-column: span 4;
359+
}
360+
361+
.bento-diff {
362+
grid-column: span 8;
363+
min-height: 320px;
364+
}
365+
366+
.bento-diff .bento-media {
367+
aspect-ratio: 21 / 9;
368+
}
369+
370+
.bento-skills {
371+
grid-column: span 4;
372+
}
373+
374+
.bento-skills .bento-media {
375+
aspect-ratio: 4 / 3;
376+
}
377+
378+
.bento-future,
379+
.bento-future-alt {
380+
grid-column: span 6;
381+
display: flex;
382+
align-items: center;
383+
justify-content: space-between;
384+
gap: 20px;
385+
min-height: 160px;
386+
background: linear-gradient(135deg, rgba(15, 25, 45, 0.7), rgba(10, 16, 30, 0.5));
387+
}
388+
389+
.bento-future-alt {
390+
background: linear-gradient(135deg, rgba(10, 20, 38, 0.7), rgba(18, 12, 28, 0.6));
313391
}
314392

315393
.workflow {
@@ -549,8 +627,38 @@ img {
549627
width: 100%;
550628
}
551629

552-
.shot-wide {
553-
grid-column: auto;
630+
.bento-grid {
631+
grid-template-columns: repeat(2, 1fr);
632+
}
633+
634+
.bento-main,
635+
.bento-chat,
636+
.bento-projects,
637+
.bento-git,
638+
.bento-files,
639+
.bento-diff,
640+
.bento-skills,
641+
.bento-future,
642+
.bento-future-alt {
643+
grid-column: span 2;
644+
}
645+
}
646+
647+
@media (max-width: 520px) {
648+
.bento-grid {
649+
grid-template-columns: 1fr;
650+
}
651+
652+
.bento-main,
653+
.bento-chat,
654+
.bento-projects,
655+
.bento-git,
656+
.bento-files,
657+
.bento-diff,
658+
.bento-skills,
659+
.bento-future,
660+
.bento-future-alt {
661+
grid-column: span 1;
554662
}
555663
}
556664

0 commit comments

Comments
 (0)