Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155@reference "../../../../app.css";
/* ---------- Run it at home: the glass globe (GlobeCard.svelte) ---------- */.landing { .gl { display: grid; place-items: center; width: 100%; /* Its width comes from the stage, never from the art it holds; its height from its width, as the zoomed square's, so zooming doesn't resize it (and re-run the observer that sets the zoom). */ contain: inline-size; aspect-ratio: 1; min-height: 0; max-height: 340px; } /* Stacked, it keeps to the scale of the PR and CI art beside it (zoomed to 0.66) rather than filling the column. */ @media (width < 64rem) { .gl { max-width: 240px; } } /* Phones: a size up, as the PR and CI art are. */ @media (width < 48rem) { .gl { max-width: 284px; } } /* The ring's square, zoomed down to fit a narrower stage (GlobeCard sets the zoom from the stage's width: Safari got tan(atan2(100cqi, 340px)) wrong, leaving it tiny). */ .gl-fit { position: relative; display: grid; place-items: center; width: 340px; height: 340px; } .gl-ring { position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; translate: -50% -50%; border-radius: 50%; opacity: 0.2; --rim: linear-gradient(#363738, #989b9e); } .gl-earth { position: relative; touch-action: pan-y; user-select: none; cursor: grab; } .gl-earth[data-dragging] { cursor: grabbing; } .gl-sphere { --globe-base: 77 77 79; --globe-map: 2.5; position: absolute; inset: 0; border-radius: 50%; border: 1.3px solid var(--line); background: linear-gradient(180deg, rgba(245, 245, 245, 0.05), rgba(245, 245, 245, 0.02)); box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.4); } .gl-sphere canvas { display: block; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.3), #000); opacity: 0; transition: opacity 0.6s ease; } .gl-sphere canvas[data-drawn] { opacity: 1; } /* A knot, placed (.at) where its lon/lat comes round. */ .gl-knot { pointer-events: none; } /* Knot pin — a violet dot, dark ring, a glint on top. */ .gl-dot { position: absolute; width: 7px; height: 7px; translate: -50% -50%; border-radius: 5px; background: var(--ind-grid); box-shadow: 0 0.9px 0.9px rgba(51, 44, 178, 0.7), 0 0 0 2.7px var(--color-background-subtle), inset 0 0.45px 0.18px #fff; } /* Knot pill: .glass .rim, over the knot. */ .gl-tag { --glass-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35); position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 4px 6px 4px 5px; border-radius: 5px; width: max-content; font-size: 12.75px; line-height: 1.6; color: var(--text); white-space: nowrap; } .gl-tag > svg { flex: none; width: 14px; height: 14px; color: var(--muted); }}
.landing { @variant light { /* No light frame yet: the sphere as a light slab as bright as the page, land in neutral 100. */ .gl-sphere { --globe-base: 14 14 14; --globe-map: 8; background: linear-gradient( 180deg, var(--color-background-default), var(--color-background-subtle) ); box-shadow: 0 3px 0 var(--color-background-muted), 0 0 1px rgba(0, 0, 0, 0.24); } .gl-sphere canvas { mix-blend-mode: multiply; filter: invert(1); } .gl-dot { box-shadow: 0 0.9px 0.9px rgba(51, 44, 178, 0.5), 0 0 0 2.7px var(--color-background-default), inset 0 0.45px 0.18px #fff; } .gl-tag { --glass-shadow: none; } }}