Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248@reference "../../../../app.css";
/* * Bring your own box: steps + a machine (SelfHost.svelte), and the shading of the * machines (electronics/): the cartridge console, the floppy computer and the Raspberry Pi. */.landing { .sh { padding-block: var(--section-y) 96px;
@media (width >= 64rem) { padding-block: var(--section-y); } }
/* Flush left below desktop, as the other headings are. On desktop, centred on the page, not on the rail container's content: the rail lane on its start pushes the content's centre right of the page's by half the difference of the two insets. */ @media (width >= 64rem) { .sh-head { text-align: center; translate: calc((var(--rail-end) - var(--rail-lane)) / 2) 0; } /* The aside on its own line on desktop only; narrower, it runs on after the title. */ .sh-head .gh :where(.solid, .dim) { display: block; } } .sh-homelab { position: relative; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; } .sh-homelab:focus-visible { border-radius: 4px; } .sh-letter { position: relative; display: inline-block; } .sh-letter::before { content: attr(data-letter); position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 40%, var(--text) 50%, transparent 60%) no-repeat; background-size: calc(4 * var(--w)) 100%; background-clip: text; color: transparent; animation: sh-shimmer 2s linear infinite; } @media (hover: hover) { .sh-homelab:hover { color: color-mix(in oklab, currentColor, var(--text) 50%); } } .sh-homelab { transition: color 0.2s ease, scale 0.15s var(--ease-out-strong); } @media (prefers-reduced-motion: no-preference) { .sh-homelab:active { scale: 0.94; } .sh-homelab[data-hop] .sh-letter { animation: sh-hop 0.8s ease-out calc(var(--i) * 30ms); } } @media (prefers-reduced-motion: reduce) { .sh-letter::before { animation: none; } }
/* Stacked on mobile. From tablet, copy and device side by side: halves on tablet, then the features' columns on desktop (copy on the 395px column, the device in the rest). */ .sh-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px;
@media (width >= 48rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; margin-top: 38px; } @media (width >= 64rem) { grid-template-columns: minmax(0, 395px) minmax(0, 1fr); gap: 0; } }
.sh-steps { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; list-style: none; } .sh-step { display: flex; gap: 14px; align-items: flex-start; max-width: 351px; } /* The number chip: the surface in a hairline, with its ring on dark. */ .sh-n { display: grid; flex: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 100px; background: var(--color-background-muted); box-shadow: var(--pill-shadow); font-size: 11px; line-height: 1.6; letter-spacing: -0.01em; color: var(--text); } /* The numeral is trimmed to its cap height and centred, not the line box. */ .sh-n span { display: block; text-box: trim-both cap alphabetic; } /* Trimmed, so the first line's caps sit 4px under the chip's top. */ .sh-t { padding-top: 4px; text-box: trim-both cap alphabetic; font-size: var(--text-body); font-weight: 480; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); } /* "knots", "spindles": plain underlined links. */ .sh-em { color: var(--text); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; } .sh-em:hover { text-decoration-color: var(--text); }
/* ---- the machine, rising in once picked ---- */ .sh-stage { position: relative; justify-self: center; width: min(465px, 100%); aspect-ratio: 1; } .sh-vis { position: absolute; inset: 0; animation: d-in 0.4s var(--ease-out) 0.1s both; }
/* ---- the machines (electronics/) ---- Opaque plates, hairline strokes, lit from above: the tops are the lightest face, so they read first. */ .sh-art { --sh-accent-side: color-mix(in srgb, var(--color-drawing-accent), black 8%); --sh-top: var(--color-background-inset); --sh-side: var(--color-background-default); --sh-glint: rgb(255 255 255 / 29%); --sh-sheen: rgb(255 255 255 / 5%);
@variant light { --sh-top: var(--hl-plate); --sh-side: var(--hl-side); --sh-glint: rgb(255 255 255 / 42%); --sh-sheen: rgb(255 255 255 / 34%); } } .sh-art path { vector-effect: non-scaling-stroke; } .sh-line { stroke: var(--hl-edge); } .sh-top { fill: var(--sh-top); } .sh-side, .sh-hole { fill: var(--sh-side); } .sh-pin { stroke: var(--sh-side); } .sh-accent-side { fill: var(--sh-accent-side); } /* Glass: a sheen from the top-left across each solid, and the glint, the light catching its silhouette, brightest at its top-left and bottom-right corners and tapering along the edges, over a soft glow. */ .sh-sheen-stop { stop-color: var(--sh-sheen); } .sh-glint-stop { stop-color: var(--sh-glint); } .sh-glint > :first-child { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .sh-vis { animation-name: d-fade; } }}
@keyframes sh-shimmer { from { background-position-x: calc(-3 * var(--w) - var(--x)); } to { background-position-x: calc(-1 * var(--x)); }}
@keyframes sh-hop { 20% { translate: 0 -0.14em; animation-timing-function: ease-in-out; } 45% { translate: 0 0.07em; animation-timing-function: var(--ease-spring); }}