patx/vegy
Improve homepage spacing and proof section layout
Commit df1247a · patx · 2026-09-21T20:18:01-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 3c4ec10..73b76ba 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -117,15 +117,17 @@
<section class="trust" aria-labelledby="proof-title">
<div class="proof-result">
<h2 class="h-md" id="proof-title">Over $2 million in orders in Vegy’s first year</h2>
+ </div>
+ <div class="proof-source">
<p>Reported by After Dark Labs, the team that builds and operates Vegy. This is a platform-wide result.</p>
<a class="link" href="https://afterdarklabs.io/">Read the Vegy project write-up at After Dark Labs</a>
</div>
<div class="proof-customers">
+ <p class="trust-caption">Garden Fresh Produce and Prima Produce use Vegy to take orders.</p>
<div class="trust-logos">
<img src="gardenfresh.webp" width="437" height="132" loading="lazy" alt="Garden Fresh Produce LLC" />
<img src="prima.webp" width="315" height="132" loading="lazy" alt="Prima Produce" />
</div>
- <p class="trust-caption">Garden Fresh Produce and Prima Produce use Vegy to take orders.</p>
</div>
</section>
</div>
diff --git a/docs/styles.css b/docs/styles.css
index 45647d9..0cc53d3 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1572,31 +1572,67 @@ a {
.marketing .trust {
display: grid;
- grid-template-columns: 1.15fr 1fr;
- gap: clamp(2rem, 5vw, 4rem);
- align-items: center;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
+ column-gap: clamp(3rem, 7vw, 6rem);
+ row-gap: 3rem;
+ align-items: start;
+ max-width: 1040px;
+ margin: clamp(4rem, 8vw, 7rem) auto 1.5rem;
+ padding-top: clamp(3rem, 5vw, 4.5rem);
text-align: left;
}
-.proof-result p {
- margin: 1rem 0;
+.proof-result h2 {
+ max-width: 20ch;
+ font-size: clamp(1.8rem, 3vw, 2.5rem);
+ line-height: 1.2;
+ text-wrap: balance;
+}
+
+.proof-source p {
+ margin-bottom: 1.25rem;
+ line-height: 1.75;
color: var(--ink-2);
}
-.proof-result .link {
+.proof-source .link {
+ display: inline-block;
color: var(--green-dark);
font-size: 0.95rem;
+ line-height: 1.65;
}
.proof-customers {
- text-align: center;
+ grid-column: 1 / -1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2.5rem;
+ padding-top: 2.5rem;
+ border-top: 1px solid var(--border);
+}
+
+.proof-customers .trust-caption {
+ margin: 0;
+ max-width: 36ch;
+ font-size: 1rem;
+ line-height: 1.7;
+ color: var(--ink-2);
+}
+
+.marketing .trust-logos {
+ flex: 0 1 440px;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ gap: clamp(1.5rem, 4vw, 3.5rem);
}
.marketing .trust-logos img {
- max-width: 45%;
- height: auto;
- max-height: 56px;
+ width: 180px;
+ max-width: calc(50% - 0.75rem);
+ height: 64px;
object-fit: contain;
+ opacity: 1;
}
.example-note {
@@ -1630,14 +1666,98 @@ a {
align-items: start;
}
+/* Keep room inside components as well as between sections. */
+.marketing .h-lg {
+ line-height: 1.16;
+ text-wrap: balance;
+}
+
+.marketing .cards {
+ gap: 1.75rem;
+}
+
+.marketing .card {
+ padding: clamp(1.75rem, 3vw, 2.5rem);
+}
+
+.marketing .card .h-sm {
+ margin-bottom: 1rem;
+ line-height: 1.4;
+}
+
+.marketing .card p,
+.marketing .row-text p {
+ line-height: 1.75;
+}
+
+.marketing .rows {
+ gap: clamp(3.5rem, 7vw, 6rem);
+}
+
+.marketing .mock-head {
+ padding: 1.15rem 1.5rem;
+ flex-wrap: wrap;
+}
+
+.marketing .mock-line {
+ padding: 1rem 1.5rem;
+}
+
+.marketing .included {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.5rem 3rem;
+ margin-top: 3rem;
+}
+
+.marketing .price-note {
+ margin-top: 3rem;
+}
+
+.marketing .faq summary {
+ padding-block: 1.75rem;
+ line-height: 1.5;
+}
+
+.marketing .faq .answer {
+ padding-bottom: 2rem;
+ line-height: 1.75;
+}
+
+@media (min-width: 801px) and (max-width: 1100px) {
+ .marketing .cards {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
@media (max-width: 800px) {
.marketing .trust,
.faq-layout {
grid-template-columns: minmax(0, 1fr);
}
+ .marketing .trust {
+ row-gap: 1.75rem;
+ }
+
+ .proof-result h2 {
+ max-width: 24ch;
+ }
+
+ .proof-customers {
+ margin-top: 0.75rem;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 2rem;
+ }
+
+ .marketing .trust-logos {
+ flex: none;
+ width: 100%;
+ max-width: 420px;
+ }
+
.faq-layout .section-head {
- margin-bottom: 0;
+ margin-bottom: 1rem;
}
.marketing .row,
@@ -1646,3 +1766,22 @@ a {
grid-template-columns: minmax(0, 1fr);
}
}
+
+@media (max-width: 400px) {
+ .marketing .mock-head,
+ .marketing .mock-line {
+ padding-inline: 1rem;
+ }
+
+ .marketing .mock-line {
+ gap: 0.5rem 0.75rem;
+ }
+
+ .marketing .mock-line:has(.pack) {
+ grid-template-columns: minmax(0, 1fr) auto;
+ }
+
+ .marketing .mock-line:has(.pack) > :first-child {
+ grid-column: 1 / -1;
+ }
+}