Skip to content

fix(site): put every product page's content on its hero's left edge #26

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
bkearns merged 1 commit into from
Aug 19, 2026
Merged

fix(site): put every product page's content on its hero's left edge #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions docs/ferrosa-memory/getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;700&amp;display=swap">
<link rel="stylesheet" href="../site.css">
</head>
<body class="legacy-doc">
<body class="product-page legacy-doc">
<nav class="site-nav" id="site-nav" aria-label="Primary">
<div class="site-nav-inner">
<a href="../" aria-label="Ferrosa AI home"><img class="logo-dark" src="../logo.svg" alt="Ferrosa AI" width="140" height="42"><img class="logo-light" src="../logo-light.svg" alt="Ferrosa AI" width="140" height="42"></a>
Expand Down Expand Up @@ -48,7 +48,6 @@
<a href="getting-started.html" aria-current="page">Setup</a>
</div>
</div>
<main>
<section class="hero hero-compact">
<div class="hero-ground" aria-hidden="true"></div>

Expand All @@ -68,6 +67,8 @@ <h1>Let&rsquo;s get Ferrosa Memory <em>running.</em></h1>
<div aria-hidden="true"></div>
</div>
</section>
<main>
<div class="page-content">

<h2 id="steps">Two paths to memory</h2>
<p>Most people only need one of these. Pick the one that fits how you work.</p>
Expand Down Expand Up @@ -346,6 +347,7 @@ <h2>You're up — what next?</h2>
<li>Read <a href="how-to-use.html">How to use</a> for day-to-day patterns once you're set up.</li>
<li>Run long-horizon evaluation scenarios before making broad reasoning claims.</li>
</ul>
</div>
</main>
<footer>
<div class="footer-inner">
Expand Down
39 changes: 39 additions & 0 deletions docs/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1590,3 +1590,42 @@ a.btn.btn-secondary, a.button.button-secondary {
:root:not([data-theme="dark"]) .site-nav .logo-dark { display: none; }
:root:not([data-theme="dark"]) .site-nav .logo-light { display: block; }
}

/* ── Content inset matches the hero ─────────────────────────────────────────
#24 set the product-page geometry: a 1200px centred column inset by --gutter,
which puts the Forge hero and its content on the same left edge. The ported
sections on Memory, Database and Tools were still inset by the legacy 2rem
inside that same 1200px column, so their content sat 16–48px left of their
own hero. Same column, same inset. */
.product-page section {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media (max-width: 720px) {
.product-page section { padding-left: 1rem; padding-right: 1rem; }
}

/* Getting Started is the last page still wrapping its content in the legacy
980px <main>, which sat neither with its own hero nor with anything else.
Same treatment #24 gave Forge. */
.legacy-doc main { max-width: none; margin: 0; padding: 0; }
.legacy-doc .page-content {
max-width: 1200px;
margin: 0 auto;
padding: calc(var(--module) * 1.5) var(--gutter);
}
.legacy-doc .page-content > :first-child { margin-top: 0; }
@media (max-width: 720px) {
.legacy-doc .page-content { padding-left: 1rem; padding-right: 1rem; }
}

/* Tools and Compare nest <section> inside <section>. The inset above applies at
every level, so their content sat a full gutter right of their own hero
(273px against 193px). Only the outermost section carries the column. */
.product-page section section {
padding-left: 0;
padding-right: 0;
max-width: none;
margin-left: 0;
margin-right: 0;
}