Skip to content

docs: redesign landing page with Obsidian-native aesthetic #1168

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
chhoumann merged 2 commits into from
Apr 20, 2026
Merged

docs: redesign landing page with Obsidian-native aesthetic #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
729d510
feat(docs): redesign landing page with Obsidian-native aesthetic
chhoumann Apr 20, 2026
5811a6b
fix(docs): address review feedback on landing redesign
chhoumann Apr 20, 2026
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
230 changes: 79 additions & 151 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,186 +1,114 @@
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
* bundles Infima by default.
*/

/* You can override the default Infima variables here. */
@import url('https://rsms.me/inter/inter.css');
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.


:root {
/* Sophisticated blue-based color scheme */
--ifm-color-primary: #3b82f6;
--ifm-color-primary-dark: #2563eb;
--ifm-color-primary-darker: #1d4ed8;
--ifm-color-primary-darkest: #1e40af;
--ifm-color-primary-light: #60a5fa;
--ifm-color-primary-lighter: #93bbfd;
--ifm-color-primary-lightest: #dbeafe;
/* Obsidian-ish purple-blue accent */
--ifm-color-primary: #7c6ef2;
--ifm-color-primary-dark: #6b5cef;
--ifm-color-primary-darker: #5a4aec;
--ifm-color-primary-darkest: #4a38e9;
--ifm-color-primary-light: #8d80f5;
--ifm-color-primary-lighter: #a195f7;
--ifm-color-primary-lightest: #e6e3fd;

--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);

/* Custom properties for QuickAdd */
--qa-accent: #3b82f6;
--qa-success: #10b981;
--qa-info: #0ea5e9;

/* Typography */
--ifm-font-family-base: system-ui, -apple-system, '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: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #60a5fa;
--ifm-color-primary-dark: #3b82f6;
--ifm-color-primary-darker: #2563eb;
--ifm-color-primary-darkest: #1d4ed8;
--ifm-color-primary-light: #93bbfd;
--ifm-color-primary-lighter: #bfdbfe;
--ifm-color-primary-lightest: #dbeafe;
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05);

/* Custom properties for QuickAdd dark mode */
--qa-accent: #60a5fa;
--qa-success: #34d399;
--qa-info: #38bdf8;

/* Better dark mode backgrounds */
--ifm-background-color: #0f172a;
--ifm-background-surface-color: #1e293b;
}

/* Custom styles for enhanced homepage */

.feature-card {
padding: 2rem;
margin: 1rem 0;
border-radius: 8px;
background: var(--ifm-card-background-color);
border: 1px solid var(--ifm-color-emphasis-200);
transition: all 0.2s ease;
height: 100%;
}

.feature-card:hover {
transform: translateY(-2px);
border-color: var(--ifm-color-emphasis-300);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .feature-card {
border-color: var(--ifm-color-emphasis-200);
}

[data-theme='dark'] .feature-card:hover {
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

/* Fix spacing for feature grid */
.col {
padding: 0.75rem !important;
}

.row {
margin-left: -0.75rem !important;
margin-right: -0.75rem !important;
}

.hero-button {
font-size: 1.05rem;
padding: 0.75rem 2rem;
margin: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
font-weight: 500;
}

.hero-button:hover {
transform: translateY(-1px);
text-decoration: none;
}

.hero-button--primary {
background: var(--ifm-color-primary);
color: white;
border: none;
}

.hero-button--primary:hover {
background: var(--ifm-color-primary-dark);
color: white;
}

.button--outline {
border: 2px solid var(--ifm-color-primary);
color: var(--ifm-color-primary);
background: var(--ifm-background-color);
}

.button--outline:hover {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}

.section-dark {
background-color: var(--ifm-background-surface-color);
border-top: 1px solid var(--ifm-color-emphasis-200);
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}

.code-example {
background-color: var(--ifm-pre-background);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
font-family: var(--ifm-font-family-monospace);
overflow-x: auto;
/* Landing-page tokens (scoped via .landing class to avoid affecting docs chrome) */
--qa-canvas: #f7f5f0;
--qa-canvas-raised: #ffffff;
--qa-ink: #18181b;
--qa-ink-muted: #52525b;
--qa-ink-subtle: #71717a;
--qa-line: rgba(24, 24, 27, 0.08);
--qa-line-strong: rgba(24, 24, 27, 0.14);
/* Text/icon accent — darker shade for AA contrast on cream canvas (~5.4:1) */
--qa-accent: #5a4aec;
--qa-accent-soft: rgba(124, 110, 242, 0.1);
/* Dedicated CTA tokens — white on #5a4aec passes AA at 5.68:1 */
--qa-cta-bg: #5a4aec;
--qa-cta-bg-hover: #4a38e9;
--qa-cta-fg: #ffffff;

--ifm-font-family-base: 'InterVariable', 'Inter', system-ui, -apple-system,
'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,
'Liberation Mono', 'Courier New', monospace;
}

/* Improve navbar appearance */
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@supports (font-variation-settings: normal) {
:root {
--ifm-font-family-base: 'InterVariable', system-ui, -apple-system,
'Segoe UI', Roboto, sans-serif;
}
}

[data-theme='dark'] .navbar {
box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] {
--ifm-color-primary: #a195f7;
--ifm-color-primary-dark: #8d80f5;
--ifm-color-primary-darker: #7c6ef2;
--ifm-color-primary-darkest: #6b5cef;
--ifm-color-primary-light: #b5abf9;
--ifm-color-primary-lighter: #c9c1fb;
--ifm-color-primary-lightest: #e6e3fd;
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05);

/* Better code blocks */
--qa-canvas: #17181c;
--qa-canvas-raised: #1f2126;
--qa-ink: #f4f4f5;
--qa-ink-muted: #a1a1aa;
--qa-ink-subtle: #71717a;
--qa-line: rgba(244, 244, 245, 0.08);
/* Button: keep #5a4aec so white text still passes AA; lighter on hover */
--qa-cta-bg: #5a4aec;
--qa-cta-bg-hover: #6b5cef;
--qa-cta-fg: #ffffff;
--qa-line-strong: rgba(244, 244, 245, 0.14);
--qa-accent: #a195f7;
--qa-accent-soft: rgba(161, 149, 247, 0.14);

--ifm-background-color: #0f1013;
--ifm-background-surface-color: #17181c;
}

/* Better code blocks across the whole site */
pre {
border-radius: 8px;
border-radius: 10px;
}

/* Improved documentation sidebar */
/* Docs sidebar polish */
.menu__link {
border-radius: 6px;
transition: all 0.2s ease;
transition: background-color 0.15s ease, color 0.15s ease;
}

.menu__link:hover {
background-color: var(--ifm-color-emphasis-200);
background-color: var(--ifm-color-emphasis-100);
text-decoration: none;
}

.menu__link--active {
background-color: var(--ifm-color-emphasis-200);
color: var(--ifm-font-color-base);
background-color: var(--qa-accent-soft);
color: var(--ifm-color-primary);
font-weight: 600;
}

/* Feature icons styling */
.feature-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
color: var(--ifm-color-primary);
.navbar {
border-bottom: 1px solid var(--ifm-color-emphasis-200);
box-shadow: none;
}

/* GitHub icon in navbar */
.header-github-link::before {
content: '';
width: 24px;
height: 24px;
width: 22px;
height: 22px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}
Expand All @@ -190,5 +118,5 @@ pre {
}

.header-github-link:hover {
opacity: 0.6;
opacity: 0.7;
}
Loading
Loading