docs: redesign landing page with Obsidian-native aesthetic#1168
Merged
docs: redesign landing page with Obsidian-native aesthetic#1168
Conversation
Replaces the emoji-heavy, centered-everything landing page with a warm, typographic design tuned for the Obsidian community: - Inline SVG icons (Lucide-style) in place of emoji for features, examples, and step numbers - Purple-blue accent (#7C6EF2) replacing flat primary blue across the docs - Warm cream/slate canvas scoped to the landing page via the .landing class - Left-aligned feature and example sections with eyebrow kickers; centered hero with ⌘P keyboard chip - Single consistent card treatment (14px radius, 1px hairline, no shadows) - Rewritten copy throughout — concrete over generic - Responsive breakpoints at 640/768/1024; reduced-motion respected - React 19 JSX namespace fix
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughLanding was redesigned: global typography and color tokens updated, large legacy CSS removed, a new scoped CSS module added for landing components, and the React page refactored to use new section components and SVG icons. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying quickadd with
|
| Latest commit: |
5811a6b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a4058cbb.quickadd.pages.dev |
| Branch Preview URL: | https://docs-landing-page-redesign.quickadd.pages.dev |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/src/css/custom.css`:
- Line 6: Stylelint is failing due to the raw `@import` line and unquoted
capitalized font family names; change the import to use consistent quoting
(e.g., use double quotes in the `@import` url(...) statement that currently reads
"@import url('https://rsms.me/inter/inter.css');") and update every font-family
declaration that uses capitalized names (look for "font-family" entries) to wrap
those family names in quotes (e.g., "Inter", "JetBrains Mono") or convert them
to lowercase/standard CSS-safe identifiers; after updating the `@import` and
quoting all capitalized font-family tokens, run Stylelint to confirm violations
are resolved.
In `@docs/src/pages/index.module.css`:
- Around line 6-10: The primary CTA uses insufficient-contrast colors (white on
--qa-accent) in the .landing area; update the theme tokens and button styles to
use AA-safe color tokens instead of raw `#fff`—add or use dedicated variables like
--qa-accent-foreground or --qa-accent-cta and apply those to the CTA button
rules (refer to the .landing class and the button rules around lines 136-160) so
the foreground/background pair meets WCAG AA contrast for normal text; ensure
dark-mode values for --qa-accent and its foreground are tested and adjusted
accordingly.
- Around line 401-406: The .steps class is applied to an <ol> and needs its
native numbering and default spacing removed; update the .steps rule to reset
the list markers and spacing by adding list-style: none and clearing the default
padding/margin (e.g., padding: 0; margin: 0;) so the browser’s numbers do not
appear alongside your custom 01/02/03 badges.
In `@docs/src/pages/index.tsx`:
- Around line 303-310: The repeated "Learn how →" links are indistinguishable to
screen-reader users; update the Link element inside the examples.map render so
each link has a unique accessible name—e.g., add an aria-label that includes the
example title produced by the map (aria-label={`Learn how ${e.title}`}) or use
aria-labelledby pointing to the h3 (give the h3 in the exampleTitle a stable id
derived from e.title and reference it). Locate the Link with className
"exampleLink" and the h3 with className "exampleTitle" in the mapping and add
the aria attribute accordingly to make each card's link distinguishable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cf41b6be-4682-40da-915d-9bea6f3c49fc
📒 Files selected for processing (3)
docs/src/css/custom.cssdocs/src/pages/index.module.cssdocs/src/pages/index.tsx
| */ | ||
|
|
||
| /* You can override the default Infima variables here. */ | ||
| @import url('https://rsms.me/inter/inter.css'); |
There was a problem hiding this comment.
Fix the Stylelint violations before merge.
The new font import and unquoted capitalized font families trigger the reported Stylelint errors.
Proposed lint fix
-@import url('https://rsms.me/inter/inter.css');
+@import 'https://rsms.me/inter/inter.css';
--ifm-font-family-base: 'InterVariable', 'Inter', system-ui, -apple-system,
- 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif,
+ 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--ifm-heading-font-family: var(--ifm-font-family-base);
- --ifm-font-family-monospace: 'JetBrains Mono', 'SF Mono', Monaco, Consolas,
+ --ifm-font-family-monospace: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas',
'Liberation Mono', 'Courier New', monospace;
}
`@supports` (font-variation-settings: normal) {
:root {
--ifm-font-family-base: 'InterVariable', system-ui, -apple-system,
- 'Segoe UI', Roboto, sans-serif;
+ 'Segoe UI', 'Roboto', sans-serif;
}
}Also applies to: 32-43
🧰 Tools
🪛 Stylelint (17.7.0)
[error] 6-6: Expected "url('https://rsms.me/inter/inter.css')" to be "'https://rsms.me/inter/inter.css'" (import-notation)
(import-notation)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/src/css/custom.css` at line 6, Stylelint is failing due to the raw
`@import` line and unquoted capitalized font family names; change the import to
use consistent quoting (e.g., use double quotes in the `@import` url(...)
statement that currently reads "@import
url('https://rsms.me/inter/inter.css');") and update every font-family
declaration that uses capitalized names (look for "font-family" entries) to wrap
those family names in quotes (e.g., "Inter", "JetBrains Mono") or convert them
to lowercase/standard CSS-safe identifiers; after updating the `@import` and
quoting all capitalized font-family tokens, run Stylelint to confirm violations
are resolved.
Comment on lines
+401
to
+406
| .steps { | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| gap: 2rem; | ||
| margin-top: 0.5rem; | ||
| } |
There was a problem hiding this comment.
Reset the ordered list’s native markers and padding.
steps is applied to an <ol>, so browser default numbering/padding can show alongside the custom 01/02/03 badges.
Proposed list reset
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
- margin-top: 0.5rem;
+ margin: 0.5rem 0 0;
+ padding: 0;
+ list-style: none;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/src/pages/index.module.css` around lines 401 - 406, The .steps class is
applied to an <ol> and needs its native numbering and default spacing removed;
update the .steps rule to reset the list markers and spacing by adding
list-style: none and clearing the default padding/margin (e.g., padding: 0;
margin: 0;) so the browser’s numbers do not appear alongside your custom
01/02/03 badges.
- Reset <ol> padding and list-style on .steps so native list numbering and left padding don't offset the quick-start grid - Introduce dedicated --qa-cta-bg/-fg tokens so primary button text clears AA (~5.68:1, was ~3.9:1 with white on #7c6ef2); darken light-mode text accent to #5a4aec to pass AA for eyebrow and example links - Add aria-label to each "Learn how →" example link so assistive tech can distinguish otherwise-identical link text
Owner
Author
|
Pushed Fixed
Not fixed
Verified in-browser: button bg is now |
There was a problem hiding this comment.
♻️ Duplicate comments (1)
docs/src/css/custom.css (1)
6-6:⚠️ Potential issue | 🟡 MinorFix the remaining Stylelint violations.
Line 6 still violates
import-notation, and Lines 38, 41, and 48 still violatevalue-keyword-casefor unquoted capitalized font family names.Proposed lint fix
-@import url('https://rsms.me/inter/inter.css'); +@import 'https://rsms.me/inter/inter.css'; --ifm-font-family-base: 'InterVariable', 'Inter', system-ui, -apple-system, - 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, + 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --ifm-heading-font-family: var(--ifm-font-family-base); - --ifm-font-family-monospace: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, + --ifm-font-family-monospace: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; } `@supports` (font-variation-settings: normal) { :root { --ifm-font-family-base: 'InterVariable', system-ui, -apple-system, - 'Segoe UI', Roboto, sans-serif; + 'Segoe UI', 'Roboto', sans-serif; } }Please rerun the Stylelint check after applying the fix.
Also applies to: 37-48
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/css/custom.css` at line 6, Change the `@import` to string notation (e.g., replace `@import` url('https://rsms.me/inter/inter.css'); with `@import` "https://rsms.me/inter/inter.css";) to satisfy import-notation, and update any font-family declarations that use unquoted capitalized family names (the properties using font-family around lines 37–48) by quoting those names (e.g., "Inter", "Poppins" or other capitalized family identifiers) so they comply with value-keyword-case; after making these edits, rerun Stylelint to verify no violations remain.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@docs/src/css/custom.css`:
- Line 6: Change the `@import` to string notation (e.g., replace `@import`
url('https://rsms.me/inter/inter.css'); with `@import`
"https://rsms.me/inter/inter.css";) to satisfy import-notation, and update any
font-family declarations that use unquoted capitalized family names (the
properties using font-family around lines 37–48) by quoting those names (e.g.,
"Inter", "Poppins" or other capitalized family identifiers) so they comply with
value-keyword-case; after making these edits, rerun Stylelint to verify no
violations remain.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 901a941f-11de-4696-b6d9-b7b68c41edc1
📒 Files selected for processing (3)
docs/src/css/custom.cssdocs/src/pages/index.module.cssdocs/src/pages/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/src/pages/index.tsx
| <dl className={styles.features}> | ||
| {features.map((f) => ( | ||
| <div className={styles.feature} key={f.title}> | ||
| <span className={styles.featureIcon}>{f.icon}</span> |
Contributor
There was a problem hiding this comment.
🟡 Invalid HTML: <span> inside <dl> > <div> violates the content model for definition lists
The Features component at docs/src/pages/index.tsx:274-282 wraps each feature in a <dl> > <div> structure, but places a <span className={styles.featureIcon}> as a child of the <div> alongside the <dt> and <dd>. Per the HTML spec, when <div> is a child of <dl>, its content model is restricted to one or more <dt> elements followed by one or more <dd> elements (plus script-supporting elements). The <span> is not permitted there. While browsers render this gracefully, it will fail HTML validation and can confuse assistive technologies that rely on the strict <dl> content model to convey term-description relationships.
Prompt for agents
The <span> wrapping the feature icon is an invalid child of <div> inside <dl>. To fix this, either: (1) move the icon inside the <dt> element so it becomes part of the term, e.g. <dt className={styles.featureTitle}><span className={styles.featureIcon}>{f.icon}</span>{f.title}</dt> (adjusting CSS as needed), or (2) change the <dl> to a plain <div> and use role='list' with ARIA attributes if semantic list behavior is desired, or (3) use the CSS `display` property to visually place the icon while keeping it in a valid HTML position. Option 1 is simplest — the icon is semantically part of the feature 'term', so nesting it in <dt> is correct.
Was this helpful? React with 👍 or 👎 to provide feedback.
5 tasks
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refreshes the docs landing page using fundamental UI principles — hierarchy, repetition, contrast, whitespace. The old page was centered-everything, emoji-heavy, and visually flat. The new page is warm and typographic, sits comfortably next to obsidian.md, and uses one consistent card treatment throughout.
010203) — no more ⚡📄🤖🧠📁🚀 or 1️⃣2️⃣3️⃣.#3B82F6blue →#7C6EF2purple-blue, applied via--ifm-color-primaryso links, the sidebar, and the navbar all pick it up consistently.cv02,cv03,ss01). Clamp-scaled display type (~59px hero → 30–40px section → 17px feature).text-wrap: balanceon headings,text-wrap: prettyon body.clamp(4rem, 8vw, 6rem)section rhythm.⌘ P → QuickAdd: Run Choice— showing what triggering the plugin looks like.#17181C) with raised card background, tuned token set.Files
docs/src/css/custom.css— Inter font import, new primary palette, scoped landing tokens, minor sidebar/navbar polishdocs/src/pages/index.module.css— Full rewrite (hero, sections, feature grid, example cards, quick-start steps, buttons, kbd chip)docs/src/pages/index.tsx— New structure with inline SVG icons, eyebrow kickers, numbered steps, rewritten copy; React 19 JSX namespace fixTest plan
bun run typecheckpassesbun run buildproduces the site cleanly#F7F5F0canvas, white cards, purple CTA) and dark mode (#17181Ccanvas, raised cards)prefers-reduced-motionremoves transform transitionscd docs && bun run startand click through on a real browserSummary by CodeRabbit