Rebuild the site: positioning first, internals in docs - #76
Conversation
Takes the transferable parts of the reference system: one accent keyword highlighted inside the headline, uppercase button labels with a tracking lift, and a drawn divider above the footer instead of a rule. The accent is the cyan already in the palette rather than a new colour, and one chip per viewport keeps it doing work.
|
Warning Review limit reached
Next review available in: 41 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe landing page is substantially rewritten with new metadata, navigation, hero content, benchmark and quickstart sections, status milestones, calls to action, footer links, and a white-and-purple responsive styling system. ChangesLanding page redesign
Estimated code review effort: 3 (Moderate) | ~30 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 |
Bench report✅ All profiles within the ±10% noise band of main. Baseline: main @ same runn. Cells read baseline → this PR. Verdicts need more than ±15% to leave the noise band. linux-arm64-full
linux-x64-1cpu-1gb
linux-x64-2cpu-2gb
linux-x64-full
windows-x64-full
Field referenceAll engines in identical containers, same driver, measured 2026-07-24 @ ba0ec39. A different harness than the tables above, so read this as standing, not as this PR's delta. linux-arm64-full
linux-x64-1cpu-1gb
linux-x64-2cpu-2gb
linux-x64-full
Shared CI runners: treat single-profile swings as suggestive, agreement across profiles as real. |
The page opened with five file magics, a byte-for-byte page dump and a tour of six crates. That is a documentation structure wearing a homepage, and it asked a visitor to care about the internals before knowing what the thing is. Turso and Neon both open with a positioning line, then proof, then how to start, and keep the internals in docs. This follows that: what it is, why the benchmarks are worth trusting, the numbers against three other engines, a minute to first query, and an honest status. White canvas with purple, near-black type and 12px buttons, replacing the dark documentary palette. The logo is repainted to match.
martian56
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/style.css`:
- Around line 9-18: Update the --silver design token used by .metric span, thead
th, .note, and .foot to a color that achieves at least 4.5:1 contrast against
--surface (`#ffffff`) for normal-sized text. Keep the existing secondary-text
usage and token structure unchanged.
- Around line 20-22: Update the font-family values in the --display, --ui, and
--mono custom properties to use lowercase casing for the flagged font keywords,
including helvetica, arial, menlo, and consolas, while preserving the existing
font order and fallback structure.
- Around line 68-75: Update the .nav style rule to include the
-webkit-backdrop-filter fallback alongside the existing backdrop-filter
declaration, preserving the same blur value for Safari compatibility.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4ee8b080-99e4-4758-abe1-8e5f5f594b8c
⛔ Files ignored due to path filters (7)
web/apple-touch-icon.pngis excluded by!**/*.pngweb/favicon-16.pngis excluded by!**/*.pngweb/favicon-32.pngis excluded by!**/*.pngweb/favicon.icois excluded by!**/*.icoweb/icon-512.pngis excluded by!**/*.pngweb/logo-mark.pngis excluded by!**/*.pngweb/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
web/index.htmlweb/style.css
| --display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| --ui: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Font-family keyword casing flagged by Stylelint.
value-keyword-case expects lowercase generic/keyword values (helvetica, arial, menlo, consolas).
Fix
- --display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
- --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
- --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+ --display: "IBM Plex Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+ --ui: "Helvetica Neue", helvetica, arial, sans-serif;
+ --mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| --ui: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; | |
| --display: "IBM Plex Sans", "Helvetica Neue", helvetica, arial, sans-serif; | |
| --ui: "Helvetica Neue", helvetica, arial, sans-serif; | |
| --mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace; |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 20-20: Expected "Helvetica" to be "helvetica" (value-keyword-case)
(value-keyword-case)
[error] 20-20: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 21-21: Expected "Helvetica" to be "helvetica" (value-keyword-case)
(value-keyword-case)
[error] 21-21: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 22-22: Expected "Menlo" to be "menlo" (value-keyword-case)
(value-keyword-case)
[error] 22-22: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/style.css` around lines 20 - 22, Update the font-family values in the
--display, --ui, and --mono custom properties to use lowercase casing for the
flagged font keywords, including helvetica, arial, menlo, and consolas, while
preserving the existing font order and fallback structure.
Source: Linters/SAST tools
| .nav { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 20; | ||
| background: rgba(255, 255, 255, 0.9); | ||
| backdrop-filter: blur(12px); | ||
| border-bottom: 1px solid var(--border); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== file snippet =="
if [ -f web/style.css ]; then
nl -ba web/style.css | sed -n '60,80p'
else
echo "web/style.css not found"
fi
echo
echo "== all backdrop-filter occurrences =="
rg -n "backdrop-filter:|webkit-backdrop-filter" -S . --glob '!node_modules' --glob '!dist' --glob '!build' || trueRepository: martian56/quantadb
Length of output: 215
🌐 Web query:
Safari CSS backdrop-filter -webkit-backdrop-filter support
💡 Result:
Safari provides support for the backdrop-filter CSS property, but developers must continue to use the -webkit- prefix to ensure compatibility [1][2]. While Safari 18 and newer versions include support for the unprefixed backdrop-filter property in some contexts, real-world implementation often necessitates the use of -webkit-backdrop-filter [2]. Reports indicate that even in recent versions of Safari, relying solely on the unprefixed property may lead to inconsistent behavior [2]. Furthermore, some developers have noted limitations when using CSS variables with the prefixed property, recommending the use of fixed values for optimal cross-version reliability [2]. For production environments, the recommended best practice is to include both the prefixed and unprefixed versions to ensure consistent rendering across all supported Safari versions [1][2]:.element { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } To see the effects of backdrop-filter, ensure that the element itself or its background has some degree of transparency [3].
Citations:
- 1: https://caniuse.com/css-backdrop-filter
- 2: css.properties.backdrop-filter - There is no full support in Safari 18. We still need
-webkit-prefix, and we can't use CSS variables. mdn/browser-compat-data#25914 - 3: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter
🌐 Web query:
Can I use CSS backdrop-filter Safari support
💡 Result:
Yes, you can use the CSS backdrop-filter property in Safari [1][2]. As of July 2026, Safari provides support for backdrop-filter [1]. Historically, Safari required the -webkit- prefix (-webkit-backdrop-filter) [3][4], and while the property is now available unprefixed in modern versions of Safari (introduced in version 18) [3][4], it is still common practice in web development to include both the prefixed and unprefixed versions to ensure compatibility across a wider range of browser versions [5]. When implementing this, keep the following in mind: 1. Compatibility: The unprefixed backdrop-filter property is supported in Safari 18.0 and later [1]. For older versions of Safari, the -webkit-backdrop-filter prefix remains necessary [3]. 2. Best Practice: To ensure the broadest support, many developers use the following pattern:.element { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } 3. Requirements: For the effect to be visible, the element itself must have a transparent or semi-transparent background (e.g., background: rgba(255, 255, 255, 0.5)) [2][6]. The property applies filter effects to the area behind the element [2][6]. 4. Performance: Using backdrop-filter can create a new stacking context [6] and may impact performance if overused or applied to deeply nested elements, as it requires the browser to render the content behind the element before applying the filter [7][6].
Citations:
- 1: https://caniuse.com/css-backdrop-filter
- 2: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter
- 3: https://www.roboleary.net/blog/unprefixing-backdrop-filter/
- 4: https://usefulangle.com/post/391/css-backdrop-filter-unprefixed
- 5: css.properties.backdrop-filter - There is no full support in Safari 18. We still need
-webkit-prefix, and we can't use CSS variables. mdn/browser-compat-data#25914 - 6: https://web.dev/articles/backdrop-filter
- 7: https://drafts.csswg.org/filter-effects-2/
Add the -webkit- backdrop-filter fallback for Safari.
.nav {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 255, 255, 0.9);
+ -webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}This keeps the blur effect available for Safari versions that still require the prefixed property.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| background: rgba(255, 255, 255, 0.9); | |
| -webkit-backdrop-filter: blur(12px); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/style.css` around lines 68 - 75, Update the .nav style rule to include
the -webkit-backdrop-filter fallback alongside the existing backdrop-filter
declaration, preserving the same blur value for Safari compatibility.
Kraken's system is built for a consumer exchange on white. The colour roles, purple brand, twelve pixel buttons, quiet shadows and type scale carry over, but developer infrastructure is read on dark and that is where this project started.
|
Superseded by #78, which rebuilds the site on top of quanta-port so it can describe the native protocol on 6626 instead of the PostgreSQL wire protocol that branch removes. |
1 participant
The old page led with implementation: five file magics, a byte for byte page dump, a tour of six crates. It read as documentation with a nav bar, and it asked a visitor to care about the internals before telling them what QuantaDB is.
I looked at how Turso and Neon actually structure their homepages. Both open with one positioning sentence, then proof, then how to start, and keep the internals in docs where someone goes deliberately. This follows the same shape:
Design follows the Kraken system: white canvas, purple brand, near black type, 12px button radius, whisper level shadows. The logo is repainted purple to match, and the icon set regenerated from it.
The version badge is gone. Verified in a browser at 1280px rather than assumed; two layout bugs showed up that way and are fixed, an orphaned metric card and a hero column that was centring against the rest of the page.
Summary by CodeRabbit
New Features
Style