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
43 <li>43 <li>
44 <span class="doc__num">01</span>44 <span class="doc__num">01</span>
45 <span>45 <span>
46 Connect46 Connect{" "}
47 <span class="doc__pop" tabindex="0">47 <span class="doc__pop" tabindex="0">
48 <span class="doc__pop-word">everything</span>48 <span class="doc__pop-word">everything</span>
49 <span class="doc__pop-panel" aria-hidden="true">49 <span class="doc__pop-panel" aria-hidden="true">
@@ -53,13 +53,13 @@ const { gh } = Astro.props; · 3 unmodified lines
53 <span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>53 <span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>
54 </span>54 </span>
55 </span>55 </span>
56 to Executor.56 {" "}to Executor.
57 </span>57 </span>
58 </li>58 </li>
59 <li>59 <li>
60 <span class="doc__num">02</span>60 <span class="doc__num">02</span>
61 <span>61 <span>
62 Give62 Give{" "}
63 <span class="doc__pop" tabindex="0">63 <span class="doc__pop" tabindex="0">
64 <span class="doc__pop-word">your agent</span>64 <span class="doc__pop-word">your agent</span>
65 <span class="doc__pop-panel" aria-hidden="true">65 <span class="doc__pop-panel" aria-hidden="true">
@@ -69,12 +69,12 @@ const { gh } = Astro.props; · 3 unmodified lines
69 <span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>69 <span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>
70 </span>70 </span>
71 </span>71 </span>
72 the Executor tool.72 {" "}the Executor tool.
73 </span>73 </span>
74 </li>74 </li>
75 <li>75 <li>
76 <span class="doc__num">03</span>76 <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>
78 </li>78 </li>
79 </ol>79 </ol>
80 <p class="doc__subhead">One MCP. All your accounts.</p>80 <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
1742main:has(.page > .page__rail) > .pattern-bg + div {1742main:has(.page > .page__rail) > .pattern-bg + div {
1743 display: none;1743 display: none;
1744}1744}
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 @@
1/* Document-style homepage body. Measured prose, hairline sections. */1/* Document-style homepage body. Measured prose, hairline sections. */
2.doc {2.doc {
3 max-width: 720px;3 max-width: 720px;
4 /* Without the rail there is nothing to align to, so the column centres. */
5 margin-inline: auto;
4 padding: 4rem 1.5rem 6rem;6 padding: 4rem 1.5rem 6rem;
7 overflow-x: clip;
5}8}
6@media (min-width: 640px) {9@media (min-width: 640px) {
7 .doc {10 .doc {
@@ -12,6 +15,7 @@ · 4 unmodified lines
12 /* Fill the content column; the frame around rail + content is centred. */15 /* Fill the content column; the frame around rail + content is centred. */
13 .doc {16 .doc {
14 max-width: none;17 max-width: none;
18 margin-inline: 0;
15 padding-inline: 0;19 padding-inline: 0;
16 }20 }
17 .doc__intro,21 .doc__intro,
@@ -613,16 +617,20 @@ a.doc__term-v:hover { · 595 unmodified lines
613 0 12px 32px -12px rgba(13, 13, 16, 0.18);617 0 12px 32px -12px rgba(13, 13, 16, 0.18);
614 opacity: 0;618 opacity: 0;
615 pointer-events: none;619 pointer-events: none;
620 visibility: hidden;
616 transform: translateY(-4px);621 transform: translateY(-4px);
617 transition:622 transition:
618 opacity 0.15s ease,623 opacity 0.15s ease,
619 transform 0.15s ease;624 transform 0.15s ease,
625 visibility 0s linear 0.15s;
620}626}
621.doc__pop:hover .doc__pop-panel,627.doc__pop:hover .doc__pop-panel,
622.doc__pop:focus-within .doc__pop-panel {628.doc__pop:focus-within .doc__pop-panel {
623 opacity: 1;629 opacity: 1;
624 pointer-events: auto;630 pointer-events: auto;
631 visibility: visible;
625 transform: translateY(0);632 transform: translateY(0);
633 transition-delay: 0s;
626}634}
627.doc__pop-tile,635.doc__pop-tile,
628.doc__pop-pill {636.doc__pop-pill {
@@ -818,3 +826,126 @@ a.doc__term-v:hover { · 189 unmodified lines
818.doc__list--open li:last-child {826.doc__list--open li:last-child {
819 border-bottom: 0;827 border-bottom: 0;
820}828}
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
290 color: var(--color-ink-2);290 color: var(--color-ink-2);
291}291}
292 292
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. */
294@media (max-width: 1023.98px) {297@media (max-width: 1023.98px) {
295 .rail {298 .rail {
296 flex-direction: row;299 flex-direction: row;
297 align-items: center;300 align-items: center;
298 justify-content: space-between;301 justify-content: space-between;
299 gap: 16px;302 gap: 12px;
300 height: 56px;303 height: 56px;
301 padding: 0 24px;304 padding: 0 16px;
302 border-right: 0;305 border-right: 0;
303 border-bottom: 1px solid var(--color-rule);306 border-bottom: 1px solid var(--color-rule);
304 }307 }
308 .rail .rail__brand {
309 margin: 0;
310 }
305 .rail .rail__toc,311 .rail .rail__toc,
306 .rail .rail__toc-label,312 .rail .rail__toc-label,
307 .rail .rail__divider,313 .rail .rail__divider,
308 .rail .rail__foot,314 .rail .rail__foot,
309 .rail .rail__contact,315 .rail .rail__contact,
310 .rail .rail__secondary {316 .rail .rail__secondary,
317 .rail .gh-star,
318 .rail .rail__box--yc {
311 display: none;319 display: none;
312 }320 }
313 .rail .rail__nav {321 .rail .rail__stack {
314 flex-direction: row;322 flex: 0 1 auto;
315 align-items: center;
316 gap: 20px;
317 }
318 .rail .rail__cta {
319 flex-direction: row;323 flex-direction: row;
320 align-items: center;324 align-items: center;
321 gap: 12px;325 gap: 16px;
322 margin-top: 0;
323 }326 }
324 .rail .rail__stack {327 .rail .rail__nav {
325 flex: 0 1 auto;
326 flex-direction: row;328 flex-direction: row;
327 align-items: center;329 align-items: center;
328 justify-content: flex-end;330 gap: 14px;
329 gap: 20px;
330 }331 }
331 .rail .rail__link {332 .rail .rail__link {
332 padding: 0 0 0 0;333 padding: 0;
333 font-size: 14px;334 font-size: 14px;
335 white-space: nowrap;
334 }336 }
335 .rail .rail__link::before {337 .rail .rail__link::before {
336 display: none;338 display: none;
337 }339 }
338 /* The star pill and the mono count are the first things to go when the bar340 .rail .rail__cta {
339 gets tight; the links themselves survive longest. */341 display: block;
340 .rail .gh-star {342 margin-top: 0;
341 display: none;343 }
344 .rail--b .rail__box--primary {
345 width: auto;
346 height: 32px;
347 padding: 0 12px;
348 font-size: 13px;
342 }349 }
343}350}
344 351@media (max-width: 479.98px) {
345@media (max-width: 719.98px) {
346 .rail .rail__nav .rail__link:not(.rail__link--keep) {352 .rail .rail__nav .rail__link:not(.rail__link--keep) {
347 display: none;353 display: none;
348 }354 }
355 .rail .rail__nav {
356 gap: 12px;
357 }
349}358}
apps/marketing/src/styles/variants/testimonials.css+14−0
@@ -155,3 +155,17 @@ · 154 unmodified lines
155 width: calc(50% - 6px);155 width: calc(50% - 6px);
156 }156 }
157}157}
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}