History

Marketing: step spacing fix and mobile layout (#2017)

* marketing: keep spaces around hover words in production; mobile layout Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * marketing: centre the column when the rail is a top bar Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * marketing: centre the intro below the rail breakpoint Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> ---------

Rhys Sullivan committed 1 month ago

Commit c641b8d1 parent 71e55b05 files · +193 −29Browse files

Unified · Split

5 files
  1. apps/marketing/src/components/variants/doc-body.astro +5 −5
  2. apps/marketing/src/styles/global.css +10 −0
  3. apps/marketing/src/styles/variants/doc.css +132 −1
  4. apps/marketing/src/styles/variants/rail.css +32 −23
  5. apps/marketing/src/styles/variants/testimonials.css +14 −0
apps/marketing/src/components/variants/doc-body.astro+5−5
@@ -43,7 +43,7 @@ const { gh } = Astro.props; · 42 unmodified lines
4343 <li>
4444 <span class="doc__num">01</span>
4545 <span>
46− Connect
46+ Connect{" "}
4747 <span class="doc__pop" tabindex="0">
4848 <span class="doc__pop-word">everything</span>
4949 <span class="doc__pop-panel" aria-hidden="true">
@@ -53,13 +53,13 @@ const { gh } = Astro.props; · 3 unmodified lines
5353 <span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>
5454 </span>
5555 </span>
56− to Executor.
56+ {" "}to Executor.
5757 </span>
5858 </li>
5959 <li>
6060 <span class="doc__num">02</span>
6161 <span>
62− Give
62+ Give{" "}
6363 <span class="doc__pop" tabindex="0">
6464 <span class="doc__pop-word">your agent</span>
6565 <span class="doc__pop-panel" aria-hidden="true">
@@ -69,12 +69,12 @@ const { gh } = Astro.props; · 3 unmodified lines
6969 <span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>
7070 </span>
7171 </span>
72− the Executor tool.
72+ {" "}the Executor tool.
7373 </span>
7474 </li>
7575 <li>
7676 <span class="doc__num">03</span>
77− <span>That's it. <a href="#install">Get started.</a></span>
77+ <span>That's it.{" "}<a href="#install">Get started.</a></span>
7878 </li>
7979 </ol>
8080 <p class="doc__subhead">One MCP. All your accounts.</p>
apps/marketing/src/styles/global.css+10−0
@@ -1742,3 +1742,13 @@ main:has(.page > .page__rail) > .pattern-bg, · 1741 unmodified lines
17421742 main:has(.page > .page__rail) > .pattern-bg + div {
17431743 display: none;
17441744 }
1745+
1746+/* Below the desktop breakpoint the rail is a top bar; keep it in view. */
1747+@media (max-width: 1023.98px) {
1748+ .page__rail {
1749+ position: sticky;
1750+ top: 0;
1751+ z-index: 30;
1752+ background: var(--color-surface);
1753+ }
1754+}
apps/marketing/src/styles/variants/doc.css+132−1
@@ -1,7 +1,10 @@
11 /* Document-style homepage body. Measured prose, hairline sections. */
22 .doc {
33 max-width: 720px;
4+ /* Without the rail there is nothing to align to, so the column centres. */
5+ margin-inline: auto;
46 padding: 4rem 1.5rem 6rem;
7+ overflow-x: clip;
58 }
69 @media (min-width: 640px) {
710 .doc {
@@ -12,6 +15,7 @@ · 4 unmodified lines
1215 /* Fill the content column; the frame around rail + content is centred. */
1316 .doc {
1417 max-width: none;
18+ margin-inline: 0;
1519 padding-inline: 0;
1620 }
1721 .doc__intro,
@@ -613,16 +617,20 @@ a.doc__term-v:hover { · 595 unmodified lines
613617 0 12px 32px -12px rgba(13, 13, 16, 0.18);
614618 opacity: 0;
615619 pointer-events: none;
620+ visibility: hidden;
616621 transform: translateY(-4px);
617622 transition:
618623 opacity 0.15s ease,
619− transform 0.15s ease;
624+ transform 0.15s ease,
625+ visibility 0s linear 0.15s;
620626 }
621627 .doc__pop:hover .doc__pop-panel,
622628 .doc__pop:focus-within .doc__pop-panel {
623629 opacity: 1;
624630 pointer-events: auto;
631+ visibility: visible;
625632 transform: translateY(0);
633+ transition-delay: 0s;
626634 }
627635 .doc__pop-tile,
628636 .doc__pop-pill {
@@ -818,3 +826,126 @@ a.doc__term-v:hover { · 189 unmodified lines
818826 .doc__list--open li:last-child {
819827 border-bottom: 0;
820828 }
829+
830+/* ── Phones ── */
831+@media (max-width: 719.98px) {
832+ .doc {
833+ padding: 2.25rem 1.25rem 4rem;
834+ }
835+ .doc__title {
836+ font-size: 1.75rem;
837+ }
838+ .doc__steps {
839+ font-size: 16px;
840+ }
841+ .doc__steps li {
842+ grid-template-columns: 1.75rem 1fr;
843+ }
844+ .doc__subhead {
845+ font-size: 16px;
846+ }
847+ /* Hover reveals become tap reveals. The word can sit anywhere on the line,
848+ so the panel is not anchored to it; it is fixed across the viewport width
849+ just under the top bar. */
850+ .doc__pop {
851+ position: static;
852+ }
853+ .doc__pop-panel {
854+ position: fixed;
855+ left: 1rem;
856+ right: 1rem;
857+ top: 64px;
858+ width: auto;
859+ max-width: none;
860+ }
861+ .doc__tabs {
862+ display: flex;
863+ width: 100%;
864+ }
865+ .doc__tabs button {
866+ flex: 1;
867+ padding: 0.45rem 0.4rem;
868+ font-size: 13px;
869+ white-space: nowrap;
870+ }
871+ .doc__tabpanes p {
872+ min-height: 0;
873+ }
874+ .doc__actions {
875+ flex-direction: column;
876+ align-items: stretch;
877+ }
878+ .doc__actions > .btn-primary,
879+ .doc__actions > .btn-secondary,
880+ .doc__actions > .doc__cmd,
881+ .doc__actions > .doc__dl {
882+ width: 100%;
883+ justify-content: center;
884+ text-align: center;
885+ }
886+ .doc__dl {
887+ display: flex;
888+ flex-direction: column;
889+ align-items: stretch;
890+ }
891+ .doc__dl > a {
892+ width: 100%;
893+ justify-content: center;
894+ }
895+ .doc__dl-other {
896+ align-self: center;
897+ }
898+ .doc__dl .download-other-list {
899+ left: 50%;
900+ transform: translateX(-50%);
901+ }
902+ .doc__section {
903+ margin-top: 2.5rem;
904+ padding-top: 1.75rem;
905+ }
906+ .doc__h {
907+ font-size: 20px;
908+ }
909+ .doc__ways {
910+ grid-template-columns: 1fr;
911+ }
912+ .doc__way-a .btn-primary,
913+ .doc__way-a .btn-secondary {
914+ width: 100%;
915+ justify-content: center;
916+ text-align: center;
917+ }
918+ .doc__way-a .doc__dl {
919+ width: 100%;
920+ }
921+ .doc__fig--hero .surface-card {
922+ padding: 1rem;
923+ }
924+}
925+
926+/* Below the rail breakpoint the intro is centred, not left-ragged. */
927+@media (max-width: 1023.98px) {
928+ .doc__intro {
929+ text-align: center;
930+ }
931+ .doc__steps {
932+ justify-content: center;
933+ }
934+ .doc__steps li {
935+ display: flex;
936+ justify-content: center;
937+ gap: 0.6rem;
938+ }
939+ .doc__tabs {
940+ margin-inline: auto;
941+ }
942+ .doc__tabpanes p {
943+ margin-inline: auto;
944+ }
945+ .doc__actions {
946+ justify-content: center;
947+ }
948+ .doc__pop-panel {
949+ text-align: left;
950+ }
951+}
apps/marketing/src/styles/variants/rail.css+32−23
@@ -290,60 +290,69 @@ · 289 unmodified lines
290290 color: var(--color-ink-2);
291291 }
292292
293−/* ═══ Mobile: every rail collapses to one horizontal top bar ═══ */
293+/* ═══ Mobile: the rail becomes a slim top bar ═══
294+ Brand on the left, three links and the Get started button on the right.
295+ Everything else in the rail (index, star pill, YC badge, contact) is hidden;
296+ the page body carries it. */
294297 @media (max-width: 1023.98px) {
295298 .rail {
296299 flex-direction: row;
297300 align-items: center;
298301 justify-content: space-between;
299− gap: 16px;
302+ gap: 12px;
300303 height: 56px;
301− padding: 0 24px;
304+ padding: 0 16px;
302305 border-right: 0;
303306 border-bottom: 1px solid var(--color-rule);
304307 }
308+ .rail .rail__brand {
309+ margin: 0;
310+ }
305311 .rail .rail__toc,
306312 .rail .rail__toc-label,
307313 .rail .rail__divider,
308314 .rail .rail__foot,
309315 .rail .rail__contact,
310− .rail .rail__secondary {
316+ .rail .rail__secondary,
317+ .rail .gh-star,
318+ .rail .rail__box--yc {
311319 display: none;
312320 }
313− .rail .rail__nav {
314− flex-direction: row;
315− align-items: center;
316− gap: 20px;
317− }
318− .rail .rail__cta {
321+ .rail .rail__stack {
322+ flex: 0 1 auto;
319323 flex-direction: row;
320324 align-items: center;
321− gap: 12px;
322− margin-top: 0;
325+ gap: 16px;
323326 }
324− .rail .rail__stack {
325− flex: 0 1 auto;
327+ .rail .rail__nav {
326328 flex-direction: row;
327329 align-items: center;
328− justify-content: flex-end;
329− gap: 20px;
330+ gap: 14px;
330331 }
331332 .rail .rail__link {
332− padding: 0 0 0 0;
333+ padding: 0;
333334 font-size: 14px;
335+ white-space: nowrap;
334336 }
335337 .rail .rail__link::before {
336338 display: none;
337339 }
338− /* The star pill and the mono count are the first things to go when the bar
339− gets tight; the links themselves survive longest. */
340− .rail .gh-star {
341− display: none;
340+ .rail .rail__cta {
341+ display: block;
342+ margin-top: 0;
343+ }
344+ .rail--b .rail__box--primary {
345+ width: auto;
346+ height: 32px;
347+ padding: 0 12px;
348+ font-size: 13px;
342349 }
343350 }
344−
345−@media (max-width: 719.98px) {
351+@media (max-width: 479.98px) {
346352 .rail .rail__nav .rail__link:not(.rail__link--keep) {
347353 display: none;
348354 }
355+ .rail .rail__nav {
356+ gap: 12px;
357+ }
349358 }
apps/marketing/src/styles/variants/testimonials.css+14−0
@@ -155,3 +155,17 @@ · 154 unmodified lines
155155 width: calc(50% - 6px);
156156 }
157157 }
158+
159+@media (max-width: 719.98px) {
160+ .testi {
161+ /* No edge fade on phones: it eats the first card's left edge. */
162+ -webkit-mask-image: none;
163+ mask-image: none;
164+ }
165+ .testi__card {
166+ width: 240px;
167+ }
168+ .testi__text {
169+ -webkit-line-clamp: 5;
170+ }
171+}