A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115@layer base, diffuse;body { background-color: var(--bg-color); color: var(--text-color);}main { padding: var(--space-2xl) var(--space-xl); @media (min-width: 48rem) { align-items: center; display: flex; flex-direction: row; gap: var(--space-2xl); justify-content: center; min-height: 100dvh; }}.connect-index__left { flex: 1; margin-bottom: var(--space-lg); max-width: 24rem;}.connect-index__right { flex: 1; max-width: 24rem;}.diffuse-logo-container { display: block; margin-bottom: var(--space-lg); svg { display: block; fill: oklch(from var(--bg-color) calc(l - 0.5) c h); opacity: 0.2; width: 5em; @media (prefers-color-scheme: dark) { fill: var(--text-color); opacity: 0.25; }}}h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--space-sm);}p { color: oklch(from var(--text-color) l c h / 0.55); font-size: var(--fs-sm); line-height: var(--leading-relaxed); margin: 0; max-width: 22rem;}ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md);}li { margin: 0;}.connect-item { align-items: center; display: flex; gap: var(--space-md);}.connect-item[href] { border-radius: var(--radius-md); color: inherit; margin: calc(-1 * var(--space-2xs)); padding: var(--space-2xs); text-decoration: none; &:hover { background: oklch(from var(--text-color) l c h / 0.05); }}.connect-item__icon { flex-shrink: 0; font-size: var(--fs-base);}.connect-item__info { display: flex; flex-direction: column; flex: 1; gap: var(--space-3xs); min-width: 0;}.connect-item__name { align-items: center; display: flex; font-weight: 600; gap: var(--space-xs);}.connect-item__badge { background: oklch(from var(--text-color) l c h / 0.075); border-radius: 9999px; color: oklch(from var(--text-color) l c h / 0.5); flex-shrink: 0; font-size: 50%; font-weight: 500; letter-spacing: var(--tracking-wide); line-height: 0.75; padding: var(--space-3xs); text-box: trim-both cap alphabetic; text-transform: uppercase;}.connect-item__detail { color: oklch(from var(--text-color) l c h / 0.55); font-size: var(--fs-xs);}