Skip to content

feat: restyle marketing site #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
satyaborg merged 1 commit into from
Jun 9, 2026
Merged

feat: restyle marketing site #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# devloop site

Minimal static marketing site for the `devloop` CLI. Single page, monochrome
Minimal static landing site for the `devloop` CLI. Single page, monochrome
teletype aesthetic, violet accent matching the CLI brand. No runtime
dependencies: Tailwind compiled to static CSS, JetBrains Mono self-hosted from
`public/fonts/` (OFL, weights 400 + 700), used across the whole page. Built with
Expand Down
154 changes: 91 additions & 63 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<meta name="color-scheme" content="dark" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23070708'/%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='%23af87ff' stroke-width='6' stroke-dasharray='6 8'/%3E%3C/svg%3E"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23121212'/%3E%3Ccircle cx='50' cy='50' r='28' fill='none' stroke='%23af87ff' stroke-width='6' stroke-dasharray='6 8'/%3E%3C/svg%3E"
/>
<meta
property="og:title"
Expand All @@ -24,11 +24,20 @@
<meta property="og:type" content="website" />
<link rel="stylesheet" href="/src/input.css" />
</head>
<body class="bg-bg text-ink antialiased">
<body class="text-ink antialiased">
<div class="mx-auto w-full max-w-[780px] px-5 sm:px-8">
<div class="max-w-[480px]">
<!-- top nav: blog + github, pushed right -->
<header class="flex flex-wrap justify-end gap-x-5 gap-y-1 pt-6">
<a class="brk" href="https://satyaborg.com/blog/devloop"
>BLOG</a
>
<a class="brk" href="https://github.com/satyaborg/devloop"
>GITHUB</a
>
</header>
<!-- main: single narrow column, video sits right after install -->
<main class="flex flex-col gap-6 pb-2 pt-12 sm:pt-16">
<main class="flex flex-col gap-10 pb-12 pt-12 sm:pb-14 sm:pt-14">
<section class="min-w-0">
<pre
class="mb-4 select-none text-violet leading-[1.15] text-[13px] sm:text-[15px]"
Expand All @@ -41,7 +50,7 @@

<p class="text-dim">
Spec-driven code/review loop that runs until all
acceptance criteria are met and bugs fixed.
acceptance criteria are met and bugs fixed by agents.
</p>

<div
Expand Down Expand Up @@ -85,32 +94,41 @@
<polyline points="20 6 9 17 4 12" /></svg
></span>
</div>
<p class="mt-2 text-dim">
<p class="mt-3 text-dim">
Requires Codex and Claude Code. Runs on macOS.
</p>
</section>

<!-- demo video placeholder: swap this figure for the embed later -->
<!-- demo video: drop the file at site/public/demo.mp4 (served at /demo.mp4) -->
<figure
class="group relative aspect-video w-full overflow-hidden border border-line bg-panel"
>
<div
class="absolute inset-0 flex items-center justify-center"
<video
id="demo"
class="absolute inset-0 h-full w-full object-cover"
src="/demo.mp4"
preload="metadata"
autoplay
muted
loop
playsinline
></video>
<button
type="button"
id="demo-play"
aria-label="Play demo"
class="absolute left-1/2 top-1/2 flex h-14 w-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-violet/40 bg-bg/60 text-violet-bright transition-colors group-hover:border-violet"
>
<span
class="flex h-14 w-14 items-center justify-center rounded-full border border-violet/40 bg-bg/60 text-violet-bright transition-colors group-hover:border-violet"
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M8 5v14l11-7z" />
</svg>
</span>
</div>
<path d="M8 5v14l11-7z" />
</svg>
</button>
</figure>

<!-- why -->
Expand All @@ -119,15 +137,19 @@ <h2 class="text-ink">
<span class="text-faint">## </span
><span class="font-bold tracking-wide">WHY</span>
</h2>
<p class="mt-2 text-ink/90">
<p class="mt-3 text-ink/90">
Developers now spend most of their time in code
review, assisted by coding agents. But the same
model family can't both code and review. It favors
its own outputs. Devloop makes Codex implement and
model family can't both code and review. It
<a
href="https://arxiv.org/abs/2404.13076"
class="brk"
>favors</a
> its own outputs. Devloop makes Codex implement and
Claude Code review adversarially (or vice versa),
until all criteria are met and reviews addressed, so
humans only come in where judgment pays off: the
spec and PR sign-off.
humans only come in where judgment pays off: at the
spec and PR sign-off stages.
</p>
</section>

Expand All @@ -139,7 +161,7 @@ <h2 class="text-ink">
>HOW IT WORKS</span
>
</h2>
<ul class="mt-2 space-y-4 text-ink/90">
<ul class="mt-3 space-y-5 text-ink/90">
<li>
<span aria-hidden="true"
><span class="text-faint">[</span
Expand Down Expand Up @@ -196,10 +218,9 @@ <h2 class="text-ink">
>WHEN (NOT) TO USE</span
>
</h2>
<div class="mt-2 grid gap-6 sm:grid-cols-2">
<div>
<h3 class="sr-only">When to use</h3>
<ul class="space-y-4 text-ink/90">
<div class="mt-3 grid gap-x-8 gap-y-5 sm:grid-cols-2 sm:grid-rows-[repeat(3,auto)]">
<h3 class="sr-only">When to use</h3>
<ul class="grid gap-y-5 text-ink/90 sm:col-start-1 sm:row-span-3 sm:grid-rows-subgrid">
<li>
<span aria-hidden="true"
><span class="text-faint">[</span
Expand Down Expand Up @@ -230,11 +251,9 @@ <h3 class="sr-only">When to use</h3>
unattended and only pull you in for the
spec and PR sign-off.
</li>
</ul>
</div>
<div>
<h3 class="sr-only">When not to use</h3>
<ul class="space-y-4 text-ink/90">
</ul>
<h3 class="sr-only">When not to use</h3>
<ul class="grid gap-y-5 text-ink/90 sm:col-start-2 sm:row-start-1 sm:row-span-3 sm:grid-rows-subgrid">
<li>
<span aria-hidden="true"
><span class="text-faint">[</span
Expand Down Expand Up @@ -263,8 +282,7 @@ <h3 class="sr-only">When not to use</h3>
You want hands-on control of every edit
rather than a loop running on its own.
</li>
</ul>
</div>
</ul>
</div>
</section>

Expand All @@ -274,7 +292,7 @@ <h2 class="text-ink">
<span class="text-faint">## </span
><span class="font-bold tracking-wide">FAQ</span>
</h2>
<div class="mt-2">
<div class="mt-3">
<details class="faq">
<summary
class="flex cursor-pointer items-baseline gap-2 py-2 text-ink"
Expand Down Expand Up @@ -375,30 +393,6 @@ <h2 class="text-ink">
</div>
</section>
</main>

<!-- footer -->
<footer
class="flex flex-col gap-3 py-3 text-dim sm:flex-row sm:items-center sm:justify-between"
>
<div>
Built by
<a
class="text-ink transition-colors hover:text-violet-bright"
href="https://github.com/satyaborg"
>@satyaborg</a
>
</div>
<nav class="flex flex-wrap gap-x-5 gap-y-1">
<a class="brk" href="https://satyaborg.com/blog/devloop"
>BLOG</a
>
<a
class="brk"
href="https://github.com/satyaborg/devloop"
>GITHUB</a
>
</nav>
</footer>
</div>
</div>

Expand Down Expand Up @@ -440,6 +434,40 @@ <h2 class="text-ink">
});
});
})();

// demo video: controls on hover/focus/touch, play button while paused
(() => {
const video = document.getElementById("demo");
const playBtn = document.getElementById("demo-play");
if (!video || !playBtn) return;
const figure = video.closest("figure");
const coarse = window.matchMedia(
"(hover: none), (pointer: coarse)",
);

const syncControls = () => {
video.controls =
coarse.matches ||
figure.matches(":hover") ||
figure.contains(document.activeElement);
};
["mouseenter", "mouseleave", "focusin", "focusout"].forEach(
(e) => figure.addEventListener(e, syncControls),
);
if (coarse.addEventListener) {
coarse.addEventListener("change", syncControls);
} else {
coarse.addListener(syncControls);
}
syncControls();

const syncPlayBtn = () =>
playBtn.classList.toggle("hidden", !video.paused);
video.addEventListener("play", syncPlayBtn);
video.addEventListener("pause", syncPlayBtn);
playBtn.addEventListener("click", () => video.play());
syncPlayBtn();
})();
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.2.0",
"private": true,
"type": "module",
"description": "Static marketing site for the devloop CLI.",
"description": "Static landing site for the devloop CLI.",
"scripts": {
"dev": "vite",
"build": "vite build",
Expand Down
14 changes: 7 additions & 7 deletions site/src/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular",
"Menlo", "Cascadia Code", "Consolas", "Liberation Mono", monospace;

--color-bg: #070708;
--color-panel: #0e0e10;
--color-line: #1b1b1f;
--color-ink: #e8e8ea;
--color-dim: #7e7e86;
--color-faint: #4a4a51;
--color-bg: #121212;
--color-panel: #1c1c1c;
--color-line: #2a2a2a;
--color-ink: #ededec;
--color-dim: #a3a3a3;
--color-faint: #6b6b6b;

--color-violet: #af87ff;
--color-violet-bright: #d2a8ff;
Expand All @@ -55,7 +55,7 @@
}
::selection {
background: var(--color-violet);
color: #070708;
color: #121212;
}
code {
background: var(--color-panel);
Expand Down
Loading