Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115@reference "../../../../app.css";
/* ---------- Recent updates (RecentUpdates.svelte, UpdateCard.svelte) ---------- */.landing { /* The title and lead, with Follow beside them on wider screens and under them on phones. */ .ru-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px; margin-bottom: 40px; } .ru-copy { display: flex; flex-direction: column; align-items: flex-start; } .ru-lead { max-width: 360px; margin-top: 16px; font-size: var(--text-body); font-weight: 480; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
/* The cards in a row that scrolls sideways and snaps. It hangs past the column's right edge to the screen's, fading out there. The few px of padding keep focus rings inside the scroll box. */ .ru-row { --ru-bleed: var(--rail-end); --ru-ring: 4px; --ru-lead: calc(var(--rail-lane) - var(--rail-x)); --ru-card: min(320px, 100% - 24px); --ru-gap: 16px; --ru-pitch: calc(var(--ru-card) + var(--ru-gap)); display: flex; align-items: stretch; gap: var(--ru-gap); margin: calc(-1 * var(--ru-ring)) calc(-1 * var(--ru-bleed)) calc(-1 * var(--ru-ring)) calc(-1 * var(--ru-lead)); padding: var(--ru-ring) var(--ru-bleed) var(--ru-ring) var(--ru-lead); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ru-lead) var(--ru-ring); scrollbar-width: none; list-style: none; --ru-mask: linear-gradient( to right, transparent, #000 calc(var(--ru-lead) - var(--ru-ring)), #000 calc(100% - var(--ru-bleed)), transparent ); -webkit-mask-image: var(--ru-mask); mask-image: var(--ru-mask);
@media (width >= 64rem) { --ru-bleed: calc(var(--bleed) + var(--gutter)); } } .ru-row::after { content: ""; flex: 0 0 mod(100% + var(--ru-gap) - var(--ru-count) * var(--ru-pitch), var(--ru-pitch)); margin-inline-start: calc(-1 * var(--ru-gap)); } .ru-row::-webkit-scrollbar { display: none; } .ru-row > li { display: flex; flex: 0 0 var(--ru-card); scroll-snap-align: start; }
.ru-card { display: block; width: 100%; border-radius: calc(var(--radius-md) + 4px); color: var(--color-foreground-muted); } .ru-card:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } .ru-card .ru-body { display: flex; flex: 1; flex-direction: column; gap: var(--spacing-sm); transition: background-color 0.15s ease; } .ru-card:hover .ru-body { background-color: var(--color-background-subtle); }
.ru-text { @apply typography-paragraph-small; color: var(--color-foreground-default); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } .ru-text code { color: var(--color-foreground-muted); }}