added breakpoint for mobile view on cli install section
migrated styles from inline-css to classes in accordance to the rest of the page.

Motivation:#

I discovered your service on my phone and the grid was extending the page horizontally ^^ (great service btw)

+43 -5

1 changed file

Diff round #0

expand all

unified split

apps

main-app

public

landingpage.html

+43 -5

apps/main-app/public/landingpage.html

··· 356 356 line-height: 1.6; 357 357 } 358 358 359 + .cli-subsection-grid { 360 + display: grid; 361 + grid-template-columns: repeat(2, 1fr); 362 + gap: 3rem; 363 + align-items: center; 364 + margin-top: 3rem; 365 + } 366 + 367 + .cli-subsection-grid > div > h3 { 368 + font-size: 1.5rem; 369 + font-weight: 600; 370 + margin-bottom: 1rem; 371 + } 372 + 373 + .cli-subsection-grid > div > p { 374 + color: var(--text-muted); 375 + margin-bottom: 1.5rem; 376 + } 377 + 378 + .cli-install-row { 379 + display: flex; 380 + align-items: center; 381 + gap: 1.5rem; 382 + } 383 + .cli-install-row code { 384 + color: var(--text); 385 + background: var(--code-bg); 386 + padding: 0.5rem 0.75rem; 387 + border: 1px solid var(--border-light); 388 + border-radius: 4px; 389 + font-size: 0.875rem; 390 + } 391 + 359 392 /* Final CTA */ 360 393 .final-cta { 361 394 padding: 8rem 2rem; ··· 399 432 grid-template-columns: 1fr; 400 433 } 401 434 435 + .cli-subsection-grid { 436 + grid-template-columns: 1fr; 437 + gap: 2rem; 438 + } 439 + 402 440 .cta-buttons { 403 441 flex-direction: column; 404 442 width: 100%; ··· 556 594 </div> 557 595 </div> 558 596 559 - <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: center; margin-top: 3rem;"> 597 + <div class="cli-subsection-grid"> 560 598 <div> 561 - <h3 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">Self-host anywhere</h3> 562 - <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Deploy your own server anywhere in the world. The CLI watches the firehose and automatically pulls updates when you push changes—complete control over your hosting infrastructure.</p> 563 - <div style="display: flex; align-items: center; gap: 1.5rem;"> 599 + <h3>Self-host anywhere</h3> 600 + <p>Deploy your own server anywhere in the world. The CLI watches the firehose and automatically pulls updates when you push changes—complete control over your hosting infrastructure.</p> 601 + <div class="cli-install-row"> 564 602 <a href="https://docs.wisp.place/cli/" target="_blank" class="cta-secondary">Install CLI</a> 565 - <code style="color: var(--text); background: var(--code-bg); padding: 0.5rem 0.75rem; border: 1px solid var(--border-light); border-radius: 4px; font-size: 0.875rem;">npm install -g wispctl</code> 603 + <code>npm install -g wispctl</code> 566 604 </div> 567 605 </div> 568 606 <div>

History

1 round 1 comment

aottr.dev submitted #0 3w

1 commit

expand

fe1f41db

fix(main-app): fix responsive design for cli install

expand 1 comment

nekomimi.pet 3w

thanks! looks fine for me too so merging

pull request successfully merged