Skip to content

Commit f0ae7f5

Browse files
logoherelogohere
committed
fix: restyle dotdog landing page
1 parent cb52536 commit f0ae7f5

1 file changed

Lines changed: 69 additions & 57 deletions

File tree

‎dotdog/index.html‎

Lines changed: 69 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,13 @@
88
<link rel="icon" type="image/svg+xml" href="/dotdog/assets/dog.svg">
99
<style>
1010
* { margin: 0; padding: 0; box-sizing: border-box; }
11-
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#1a1a2e; background:#fff; padding:24px; }
12-
nav { display:flex; justify-content:center; gap:18px; padding:8px 0 32px; flex-wrap:wrap; }
13-
nav a { color:#6b7280; text-decoration:none; font-size:.9em; font-weight:500; }
14-
nav a:hover, nav a.active { color:#d97706; }
15-
main { max-width:760px; margin:0 auto; text-align:center; }
16-
.hero { text-align:center; margin:12px 0 24px; }
17-
h1 { font-size:2.4em; font-weight:700; margin:12px 0 4px; }
18-
.tagline { color:#6b7280; font-size:1.1em; line-height:1.6; margin:0 auto 4px; max-width:680px; }
19-
.panel { border:1px solid #e5e7eb; background:#fafafa; border-radius:10px; padding:12px 14px; margin:10px 0; text-align:left; }
20-
h2 { margin:0 0 10px; font-size:1.2rem; }
21-
p, li { color:#4b5563; line-height:1.6; }
22-
pre { background:#1e293b; color:#e2e8f0; border-radius:8px; padding:16px 20px; overflow:auto; text-align:left; font-size:.85em; }
23-
code { color:#2563eb; }
24-
pre code { color:#93c5fd; }
25-
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
26-
.card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; background:#fafafa; text-align:left; }
27-
.btns { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
28-
.btn { display:inline-block; padding:10px 22px; border-radius:6px; text-decoration:none; font-weight:600; font-size:.92em; }
29-
.primary { background:#f59e0b; color:#1a1a2e; }
30-
.secondary { background:#f1f5f9; color:#1e293b; border:1px solid #cbd5e1; }
31-
32-
33-
/* shared navigation */
34-
body { padding-top: 24px; margin-top: 0; }
11+
body {
12+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
13+
background: #ffffff;
14+
color: #1a1a2e;
15+
min-height: 100vh;
16+
padding: 24px;
17+
}
3518
nav {
3619
display: flex;
3720
justify-content: center;
@@ -44,7 +27,41 @@
4427
}
4528
nav a { color: #6b7280; text-decoration: none; font-size: .9em; font-weight: 500; line-height: 1.4; }
4629
nav a:hover, nav a.active { color: #d97706; }
47-
/* end shared navigation */
30+
main {
31+
max-width: 520px;
32+
margin: 0 auto;
33+
text-align: center;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
}
38+
.hero-art { width: 100px; height: 100px; margin-bottom: 8px; }
39+
h1 { font-size: 2.4em; font-weight: 700; margin: 12px 0 4px; }
40+
p.tagline { color: #6b7280; font-size: 1.1em; margin-bottom: 4px; line-height: 1.6; }
41+
p.desc { color: #4b5563; font-size: 0.92em; margin-bottom: 16px; line-height: 1.6; }
42+
.why { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
43+
.why span { padding: 4px 10px; border-radius: 12px; font-size: .8em; }
44+
.why span:nth-child(1) { background: #fef3c7; }
45+
.why span:nth-child(2) { background: #dcfce7; }
46+
.why span:nth-child(3) { background: #f3e8ff; }
47+
.why span:nth-child(4) { background: #e7fcef; }
48+
.install-wrap { position: relative; margin-bottom: 20px; width: 100%; }
49+
pre { background: #1e293b; color: #e2e8f0; border-radius: 8px; padding: 16px 20px; text-align: left; font-size: .85em; margin: 0; overflow-x: auto; position: relative; }
50+
pre code { color: #93c5fd; }
51+
code { color: #2563eb; }
52+
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
53+
a.btn { display: inline-block; padding: 10px 22px; border-radius: 6px; font-size: .92em; font-weight: 600; text-decoration: none; }
54+
a.primary { background: #f59e0b; color: #1a1a2e; }
55+
a.primary:hover { background: #d97706; }
56+
a.secondary { background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; }
57+
a.secondary:hover { background: #e2e8f0; }
58+
.product-grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin: 18px 0 4px; text-align: left; }
59+
.product-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; background: #fafafa; }
60+
.product-card h2 { color: #1a1a2e; font-size: 1em; margin-bottom: 4px; }
61+
.product-card p { color: #4b5563; font-size: .86em; line-height: 1.45; }
62+
.product-card a { color: #d97706; font-weight: 700; text-decoration: none; }
63+
footer { margin-top: 24px; color: #9ca3af; font-size: .8em; }
64+
footer a { color: #9ca3af; }
4865
</style>
4966
<link rel="canonical" href="https://specdog.github.io/dotdog">
5067
</head>
@@ -61,45 +78,40 @@
6178
<a href="/collar">collar</a>
6279
</nav>
6380
<main>
64-
<section class="hero">
65-
<h1>dotdog</h1>
66-
<p class="tagline">CLI and MCP tooling for structured `.dog` specs, compiled `.dag` graphs, existing repo mapping, and multi-repo workspaces.</p>
67-
<div class="btns">
68-
<a class="btn primary" href="https://www.npmjs.com/package/dotdog">Install from npm</a>
69-
<a class="btn secondary" href="https://github.com/specdog/dotdog">GitHub</a>
70-
</div>
71-
</section>
81+
<img class="hero-art" src="/dotdog/assets/dog.svg" alt="specdog dog logo">
7282

73-
<section class="panel">
74-
<h2>Quick start</h2>
75-
<pre><code>npm install -g dotdog
76-
dotdog init my-project
77-
dotdog validate
78-
dotdog compile
79-
dotdog serve</code></pre>
80-
</section>
83+
<h1>dotdog</h1>
84+
<p class="tagline">CLI and MCP tooling for structured specs, repo graphs, and multi-repo workspaces.</p>
85+
<p class="desc">dotdog turns `.dog` specs and existing repositories into deterministic `.dag` graphs that agents can query without guessing through the whole codebase.</p>
8186

82-
<section class="panel">
83-
<h2>Workspace bridge</h2>
84-
<p>A Dotdog workspace is a product boundary. It can contain one repo, a monorepo, or N separate repositories described by <code>.doghouse/workspace.json</code>.</p>
85-
<pre><code>dotdog workspace init --id example-product
86-
dotdog workspace add ../example-api --alias example-api --role api
87-
dotdog workspace add ../example-web --alias example-web --role web
87+
<div class="why">
88+
<span>specs</span>
89+
<span>graphs</span>
90+
<span>MCP</span>
91+
<span>workspaces</span>
92+
</div>
93+
94+
<div class="install-wrap">
95+
<pre><code>npm install -g dotdog
96+
dotdog workspace init --id example-product
8897
dotdog workspace validate
8998
dotdog workspace graph --json</code></pre>
90-
</section>
99+
</div>
91100

92-
<section class="grid">
93-
<div class="card"><h2>Specs</h2><p>Write human-readable `.dog` specs with structured YAML blocks.</p></div>
94-
<div class="card"><h2>Graphs</h2><p>Compile deterministic `.dag` graphs for exact agent queries.</p></div>
95-
<div class="card"><h2>Repos</h2><p>Map existing code into graph-ready facts instead of starting from a blank spec.</p></div>
96-
<div class="card"><h2>Workspaces</h2><p>Represent products made from multiple repos with repo-qualified graph facts.</p></div>
97-
</section>
101+
<div class="btns">
102+
<a class="btn primary" href="https://www.npmjs.com/package/dotdog">Install from npm</a>
103+
<a class="btn secondary" href="https://github.com/specdog/dotdog">GitHub</a>
104+
</div>
98105

99-
<section class="panel">
100-
<h2>MCP tools</h2>
101-
<p><code>dotdog serve</code> exposes graph queries to MCP-compatible agents. The workspace bridge adds <code>workspace.list</code>, a read-only structured tool that reports workspace repos and groups with <code>trustedAsInstruction: false</code>.</p>
106+
<section class="product-grid" aria-label="dotdog capabilities">
107+
<div class="product-card"><h2>Specs</h2><p>Write human-readable `.dog` specs with structured YAML blocks.</p></div>
108+
<div class="product-card"><h2>Graphs</h2><p>Compile deterministic `.dag` graphs for exact agent queries.</p></div>
109+
<div class="product-card"><h2>Repo mapping</h2><p>Map existing code into graph-ready facts instead of starting from a blank spec.</p></div>
110+
<div class="product-card"><h2>Workspace bridge</h2><p>Represent products made from multiple repos with repo-qualified graph facts.</p></div>
111+
<div class="product-card"><h2>MCP tools</h2><p><code>dotdog serve</code> exposes graph queries to MCP-compatible agents.</p></div>
102112
</section>
113+
114+
<footer>dotdog · specdog tooling · <a href="https://github.com/specdog/dotdog/blob/main/LICENSE">MIT</a></footer>
103115
</main>
104116
</body>
105117
</html>

0 commit comments

Comments
 (0)