Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130@reference "../../../../app.css";
/* * "What's in the box": the beats (Beat), one after another, every one open. * * Phones: each copy above its visual. Tablets and up: the copy beside its visual, the sides * swapping from one beat to the next. */.landing { .ft .gh { margin-bottom: 48px; }
.beats { display: grid; gap: 96px; } .beat { display: grid; gap: 20px; } /* The title at the size of Hackable's card titles; the copy at its "Learn more" link's. */ .bt { margin: 0 0 16px; font-family: var(--font-body); font-size: 1.125rem; font-weight: 590; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); } .text p { max-width: 30em; margin: 0 0 20px; font-size: 1rem; font-weight: 450; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); } /* Clipped 40px out from its box, so a visual can bleed a little past it. Not overflow-clip-margin: Safari doesn't have it and clips at the box. Padding the box out and pulling it back in with the margin leaves the layout as it was. */ .stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: calc(289px + 80px); margin: -40px; padding: 40px; overflow: clip; }
@media (width < 48rem) { .beat .text { margin-bottom: 24px; } }
/* ---- tablets and up: side by side, swapping sides ---- */ @media (width >= 48rem) { .bt { font-size: 1.25rem; } .beat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; } .beats { gap: 40px; } .stage { min-height: calc(320px + 80px); } .beat:nth-child(even) .text { grid-column: 2; grid-row: 1; } .beat:nth-child(even) .stage { grid-column: 1; grid-row: 1; } }
/* ---- desktop: the hero's two columns, the copy kept to 302px ---- */ @media (width >= 64rem) { .ft .gh { margin-bottom: 64px; } /* The aside on its own line on desktop only; narrower, it runs on after the title. */ .ft .gh :where(.solid, .dim) { display: block; } .beats { gap: 56px; } /* The right column starts where the hero's copy does. */ .beat { grid-template-columns: calc(var(--hero-split) - var(--hero-gap)) minmax(0, 1fr); column-gap: var(--hero-gap); } /* The copy as wide as Hackable's points. */ .beat .text { max-width: 335px; } /* On the right, centred on the axis the right column's visuals share: the 413px dolly editor's, which the pull request and the self-host console sit on too. */ .beat:nth-child(even) .text { margin-left: calc((413px - 335px) / 2); } .stage { min-height: calc(420px + 80px); } /* The CI box's near corner (65px into the device, which overflows its column and so starts at its edge) a touch left of the copy of the beats on the right, 33px in. */ .beat[data-beat="ci"] .cd { translate: -32px 0; } /* The pull request's near corner on the hero's copy line, and room above it for its version picker, which floats well over the card. */ .beat[data-beat="pr"] .stage { justify-items: start; margin-top: -160px; padding-top: 160px; } }}