carlos / carloku Public

finish-review fixes: SVG masthead mark, mobile nav links, real dashboard still, deeper dark band, feature rows

Reviewer batch: brand mark drawn from the favicon C-ring instead of the
emoji; mobile header keeps all nav links on a second row; the features
section becomes rows beside a real console capture (actual console serve
at main b918b56, synthetic demo data, cropped clear of ladder jargon the
landing page bans); dark-scheme open-source band deepened to read purple.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Paul Campbell pushed by claude 2 months ago b3193cd6a04538a994a4f9f13855dce0cf7d45cb parent 2e6889a

5 files changed, +44 −24

get-started/index.html +1 −1
img/dashboard-dark.png binary
img/dashboard-light.png binary
index.html +13 −1
site.css +30 −22

diff --git a/get-started/index.html b/get-started/index.html

index 521c609..eeafe6d 100644

--- a/get-started/index.html

+++ b/get-started/index.html

@@ -20,7 +20,7 @@

<a class="skip" href="#main">Skip to content</a>

- <a class="brand" href="/"><span class="mark">🤖</span>Carloku</a>

+ <a class="brand" href="/"><svg class="mark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="14" fill="#5b3e96"/><circle cx="30" cy="32" r="17" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-dasharray="88.8 18" stroke-dashoffset="-9"/><circle cx="51" cy="44" r="5" fill="#c9b2f7"/></svg>Carloku</a>

<a href="/#workflow">How it works</a>

<a href="/#open">Open source</a>

diff --git a/img/dashboard-dark.png b/img/dashboard-dark.png

new file mode 100644

index 0000000..4a83bb3

Binary files /dev/null and b/img/dashboard-dark.png differ

diff --git a/img/dashboard-light.png b/img/dashboard-light.png

new file mode 100644

index 0000000..eb541e7

Binary files /dev/null and b/img/dashboard-light.png differ

diff --git a/index.html b/index.html

index b43b17f..e93be62 100644

--- a/index.html

+++ b/index.html

@@ -35,7 +35,7 @@ the verdict, and DESIGN.md.

<a class="skip" href="#main">Skip to content</a>

- <a class="brand" href="/"><span class="mark">🤖</span>Carloku</a>

<a href="#workflow">How it works</a>

<a href="#open">Open source</a>

@@ -102,6 +102,7 @@ the verdict, and DESIGN.md.

<h2>What you stop thinking about</h2>

+ <div class="quiet-grid">

<li>

@@ -128,6 +129,17 @@ the verdict, and DESIGN.md.

A quiet app is just quiet.</p>

</li>

</ul>

+ <figure class="dash">

+ <div class="dash-frame">

+ <div class="term-bar" aria-hidden="true"><i></i><i></i><i></i><span>dashboard.carloku.com</span></div>

+ <picture>

+ <source srcset="/img/dashboard-dark.png" media="(prefers-color-scheme: dark)">

+ <img src="/img/dashboard-light.png" width="736" height="336" alt="The Carloku dashboard: an account's apps listed with their hosts, running instances, status, and the version each one serves.">

+ </picture>

+ </div>

+ <figcaption>The dashboard, as it really looks — demo data.</figcaption>

+ </figure>

+ </div>

</div>

</section>

diff --git a/site.css b/site.css

index 5c65016..cb8b41a 100644

--- a/site.css

+++ b/site.css

@@ -63,7 +63,7 @@

--btn-ink: #ffffff;

--line: rgba(242, 239, 248, 0.09);

--line-strong: rgba(242, 239, 248, 0.16);

- --band-bg: #1a1428;

+ --band-bg: #261b44;

--band-ink: #f2eef9;

--band-muted: #b3a8d2;

--band-line: rgba(242, 238, 249, 0.12);

@@ -121,7 +121,7 @@ html { scrollbar-color: var(--line-strong) transparent; }

color: var(--ink); text-decoration: none;

display: flex; align-items: center; gap: 0.5rem;

}

-.brand .mark { font-size: 1.1rem; }

+.brand svg.mark { width: 1.4rem; height: 1.4rem; display: block; }

.site-head nav {

display: flex; gap: 1.75rem; margin-left: auto; align-items: center;

}

@@ -139,7 +139,10 @@ html { scrollbar-color: var(--line-strong) transparent; }

}

.site-head .head-cta:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

@media (max-width: 44rem) {

- .site-head nav a:not(.head-cta) { display: none; }

+ .site-head .wrap { flex-wrap: wrap; height: auto; padding-top: 0.7rem; padding-bottom: 0.7rem; row-gap: 0.5rem; }

+ .site-head nav { flex-basis: 100%; order: 3; gap: 1.15rem; }

+ .site-head nav a { font-size: 0.9rem; }

+ .site-head .head-cta { margin-left: auto; padding: 0.3rem 0.8rem; }

}

/* ---- Hero ---- */

@@ -262,30 +265,38 @@ h2 {

padding: 0.12em 0.4em; border-radius: 0.3em;

}

-.features {

- list-style: none; padding: 0;

- margin-top: 3rem;

- display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));

- gap: 1.25rem;

+.quiet-grid {

+ margin-top: 2.75rem;

+ display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);

+ gap: 4rem; align-items: center;

}

+.features { list-style: none; padding: 0; }

.features li {

- background: var(--panel);

- border: 1px solid var(--line);

- border-radius: 0.9rem;

- padding: 1.6rem 1.5rem 1.7rem;

- box-shadow: 0 1px 2px rgba(20, 12, 40, 0.04);

- transition: border-color 140ms ease-out, transform 140ms ease-out;

-.features li:hover { border-color: var(--line-strong); transform: translateY(-2px); }

+ display: grid; grid-template-columns: auto 1fr;

+ gap: 1.15rem; align-items: start;

+ padding: 1.35rem 0;

+.features li + li { border-top: 1px solid var(--line); }

.features .icon {

width: 2.4rem; height: 2.4rem; border-radius: 0.6rem;

display: grid; place-items: center;

background: var(--accent-soft); color: var(--accent);

- margin-bottom: 1.05rem;

+ margin-top: 0.15rem;

}

.features .icon svg { width: 1.25rem; height: 1.25rem; }

-.features h3 { font-size: 1.08rem; font-weight: 620; letter-spacing: -0.01em; margin-bottom: 0.4rem; }

+.features h3 { font-size: 1.08rem; font-weight: 620; letter-spacing: -0.01em; margin-bottom: 0.3rem; }

.features p { color: var(--muted); font-size: 0.97rem; }

+.dash-frame {

+ background: var(--term-bg);

+ border: 1px solid var(--term-line);

+ border-radius: 0.85rem;

+ box-shadow: var(--shadow);

+ overflow: hidden;

+.dash-frame img { display: block; width: 100%; height: auto; }

+.dash figcaption {

+ margin-top: 0.8rem; font-size: 0.88rem; color: var(--faint);

/* ---- Open-source band ---- */

.band { background: var(--band-bg); color: var(--band-ink); padding: 6rem 0; }

@@ -359,13 +370,10 @@ article.guide .note {

.hero .wrap { grid-template-columns: 1fr; gap: 3rem; }

.lede { max-width: 38rem; }

.steps { grid-template-columns: 1fr; gap: 2.25rem; }

- .features { grid-template-columns: 1fr; }

+ .quiet-grid { grid-template-columns: 1fr; gap: 2.5rem; }

section, .band { padding: 4rem 0; }

.close-cta { padding: 5rem 0; }

}

-@media (min-width: 44rem) and (max-width: 62rem) {

- .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (prefers-reduced-motion: reduce) {

html { scroll-behavior: auto; }