Skip to content

Commit dc131b5

Browse files
MasuRiiMasuRii
committed
style(docs-site): implement editorial design system with serif typography
Comprehensive CSS overhaul introducing an editorial design system: - Crimson Pro serif font for headings, Inter for body and UI - Warm off-white palette (#FDFCF8) with refined ink tones - Updated design tokens: spacing scales, shadows, radii - Expanded component styles: hero sections, meta actions, navigation - Full dark mode support with nuanced color relationships Component updates: - Head.astro: Theme colors and font loading updated - EditLink.astro: Layout refactor, improved visual hierarchy - index.mdx: Added hero section with kicker and subtitle - custom.css: 795 additions, 479 deletions across design system
1 parent 40f1884 commit dc131b5

4 files changed

Lines changed: 850 additions & 522 deletions

File tree

‎docs-site/src/components/EditLink.astro‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,14 @@ function toMarkdownAssetPath(pathname: string, basePath: string): string {
1717
---
1818

1919
<div class="recursor-meta-actions" role="list" aria-label="Page actions">
20-
{editUrl && (
21-
<a
22-
href={editUrl}
23-
class="recursor-meta-action print:hidden"
24-
role="listitem"
25-
aria-label="Edit this page on GitHub"
26-
>
27-
<span aria-hidden="true">
28-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
29-
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
30-
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
31-
</svg>
32-
</span>
33-
<span>{editLabel}</span>
34-
</a>
35-
)}
36-
3720
{hasMarkdownCopy && markdownUrl && (
3821
<button
3922
type="button"
4023
class="recursor-meta-action recursor-copy-markdown print:hidden"
4124
data-copy-markdown
4225
data-markdown-url={markdownUrl}
43-
data-default-label="Copy page as Markdown"
44-
data-success-label="Copied!"
26+
data-default-label="Copy Markdown"
27+
data-success-label="Copied"
4528
data-error-label="Copy failed"
4629
role="listitem"
4730
aria-label="Copy page content as Markdown"
@@ -55,9 +38,26 @@ function toMarkdownAssetPath(pathname: string, basePath: string): string {
5538
<polyline points="20 6 9 17 4 12"></polyline>
5639
</svg>
5740
</span>
58-
<span data-copy-markdown-label>Copy page as Markdown</span>
41+
<span data-copy-markdown-label>Copy Markdown</span>
5942
</button>
6043
)}
44+
45+
{editUrl && (
46+
<a
47+
href={editUrl}
48+
class="recursor-meta-action print:hidden"
49+
role="listitem"
50+
aria-label="Edit this page on GitHub"
51+
>
52+
<span aria-hidden="true">
53+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
54+
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
55+
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
56+
</svg>
57+
</span>
58+
<span>{editLabel}</span>
59+
</a>
60+
)}
6161
</div>
6262

6363
<script>
@@ -106,8 +106,8 @@ function toMarkdownAssetPath(pathname: string, basePath: string): string {
106106
return;
107107
}
108108

109-
const defaultLabel = button.dataset.defaultLabel ?? 'Copy page as Markdown';
110-
const successLabel = button.dataset.successLabel ?? 'Copied!';
109+
const defaultLabel = button.dataset.defaultLabel ?? 'Copy Markdown';
110+
const successLabel = button.dataset.successLabel ?? 'Copied';
111111
const errorLabel = button.dataset.errorLabel ?? 'Copy failed';
112112

113113
button.disabled = true;
@@ -154,31 +154,36 @@ function toMarkdownAssetPath(pathname: string, basePath: string): string {
154154
.recursor-meta-actions {
155155
display: flex;
156156
flex-wrap: wrap;
157+
justify-content: flex-end;
157158
gap: 0.5rem;
158159
align-items: center;
159160
}
160-
161+
161162
.recursor-meta-action {
162163
display: inline-flex;
163164
align-items: center;
164165
gap: 0.5rem;
165-
padding: 0.5rem 0.75rem;
166-
background: var(--sl-color-bg-nav);
167-
border: 1px solid var(--sl-color-gray-5);
168-
border-radius: 0.5rem;
166+
min-height: 2.5rem;
167+
padding: 0.5rem 0.875rem;
168+
background: var(--recursor-card-bg, var(--sl-color-bg-nav));
169+
border: 1px solid var(--recursor-border, var(--sl-color-gray-5));
170+
border-radius: 0.625rem;
169171
font: inherit;
170172
font-size: 0.875rem;
171173
font-weight: 500;
172174
text-decoration: none;
173175
color: var(--sl-color-text);
174176
cursor: pointer;
175-
transition: all 150ms ease;
177+
transition:
178+
border-color 150ms ease,
179+
background-color 150ms ease,
180+
color 150ms ease;
176181
}
177182

178183
.recursor-meta-action:hover:not(:disabled) {
179184
background: var(--sl-color-gray-6);
180-
border-color: var(--sl-color-gray-4);
181-
color: var(--sl-color-white);
185+
border-color: var(--sl-color-accent);
186+
color: var(--sl-color-text-accent);
182187
}
183188

184189
.recursor-meta-action:focus-visible {
@@ -194,5 +199,11 @@ function toMarkdownAssetPath(pathname: string, basePath: string): string {
194199
.recursor-meta-action svg {
195200
flex-shrink: 0;
196201
}
202+
203+
@media (max-width: 50rem) {
204+
.recursor-meta-actions {
205+
justify-content: flex-start;
206+
}
207+
}
197208
}
198209
</style>

‎docs-site/src/components/Head.astro‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ interface Props {
66
title?: string;
77
description?: string;
88
}
9-
10-
const { title, description } = Astro.props;
119
---
1210

1311
<Default><slot /></Default>
@@ -16,14 +14,14 @@ const { title, description } = Astro.props;
1614
<link rel="preconnect" href="https://fonts.googleapis.com" />
1715
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1816
<link
19-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
17+
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap"
2018
rel="stylesheet"
2119
/>
2220

2321
<!-- Favicon and theme color -->
2422
<link rel="icon" type="image/svg+xml" href={favicon} />
25-
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)" />
26-
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)" />
23+
<meta name="theme-color" content="#0f1115" media="(prefers-color-scheme: dark)" />
24+
<meta name="theme-color" content="#FDFCF8" media="(prefers-color-scheme: light)" />
2725

2826
<!-- Skip link for keyboard navigation -->
2927
<style>
@@ -34,12 +32,13 @@ const { title, description } = Astro.props;
3432
transform: translateX(-50%);
3533
z-index: 9999;
3634
padding: 0.75rem 1.25rem;
37-
background: var(--sl-color-accent, #0ea5e9);
35+
background: var(--sl-color-accent, #3d4f6f);
3836
color: white;
3937
font-weight: 600;
40-
border-radius: 0.5rem;
38+
border-radius: 9999px;
4139
text-decoration: none;
4240
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
41+
font-family: var(--sl-font);
4342
}
4443

4544
.skip-link:focus {

‎docs-site/src/content/docs/index.mdx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,15 @@ template: splash
66
---
77

88
import { Card, CardGrid, LinkButton } from '@astrojs/starlight/components';
9+
import LlmsLinks from '../../components/LlmsLinks.astro';
910

1011
<section class="hero-section">
12+
<span class="recursor-kicker">Documentation</span>
13+
<h1 class="recursor-hero-title">Mobile companion for AI coding workflows</h1>
14+
<p class="recursor-hero-subtitle">
15+
ReCursor is a Flutter app with OpenCode-like UI for Claude Code and other AI assistants.
16+
Bridge-first, no-login—connects to your user-controlled desktop bridge via secure tunnel.
17+
</p>
1118
<div class="hero-note">
1219
**Source of truth:** The canonical documentation lives in `/docs` in this repository. This site is generated from that corpus and preserves the project constraint that Claude Code Remote Control is first-party only.
1320
</div>
@@ -44,12 +51,7 @@ import { Card, CardGrid, LinkButton } from '@astrojs/starlight/components';
4451

4552
## AI-friendly artifacts
4653

47-
<div class="site-link-list">
48-
49-
- [Compact AI index](/llms.txt)
50-
- [Full concatenated AI context](/llms-full.txt)
51-
52-
</div>
54+
<LlmsLinks />
5355

5456
## Project constraints
5557

0 commit comments

Comments
 (0)