Something went wrong. Try again.
A beautiful Tangled client with Catppuccin colors. snarled.at
catppuccin atproto tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');@import 'tailwindcss';@import '@catppuccin/tailwindcss/frappe.css';
@theme inline { --font-mono: 'Caskaydia Cove', ui-monospace, SFMono-Regular, Menlo, monospace; --color-ctp-subtext-1: var(--catppuccin-color-subtext1); --color-ctp-subtext-0: var(--catppuccin-color-subtext0); --color-ctp-overlay-2: var(--catppuccin-color-overlay2); --color-ctp-overlay-1: var(--catppuccin-color-overlay1); --color-ctp-overlay-0: var(--catppuccin-color-overlay0); --color-ctp-surface-2: var(--catppuccin-color-surface2); --color-ctp-surface-1: var(--catppuccin-color-surface1); --color-ctp-surface-0: var(--catppuccin-color-surface0);}
@font-face { font-family: 'Caskaydia Cove'; src: url('/fonts/CaskaydiaCoveNerdFont-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;}
@layer base { html { font-size: 16px; }
@media (min-width: 768px) { html { font-size: 15px; } }
:root { color-scheme: dark; --app-background: var(--color-ctp-base); --app-surface: var(--color-ctp-mantle); --app-surface-raised: var(--color-ctp-surface-0); --app-border: var(--color-ctp-surface-1); --app-text: var(--color-ctp-text); --app-muted-text: var(--color-ctp-subtext-1); --app-accent: var(--color-ctp-lavender); --app-link: var(--color-ctp-blue); color: var(--app-text); background: var(--app-background); font-family: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--app-background); }
#root { min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
h1 { color: var(--app-text); font-size: 2rem; font-weight: 700; line-height: 1.2; }
h2, h3 { color: var(--app-accent); font-weight: 650; line-height: 1.4; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
p { color: var(--app-muted-text); line-height: 1.6; }
a { color: var(--app-link); }
a:hover { color: var(--color-ctp-sapphire); }
:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }}
@layer components { .markdown-body { font-family: 'Caskaydia Cove', ui-monospace, monospace; line-height: 1.65; }
.markdown-body > * + * { margin-top: 1rem; }
.markdown-body > :not(pre) { min-width: 0; overflow-wrap: anywhere; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--app-text); font-weight: 700; line-height: 1.3; }
.markdown-body h1 { font-size: 1.8rem; }
.markdown-body h2 { font-size: 1.45rem; }
.markdown-body h3 { font-size: 1.2rem; }
.markdown-body p { color: var(--app-muted-text); }
.markdown-body ul, .markdown-body ol { padding-left: 1.75rem; }
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body li + li { margin-top: 0.35rem; }
.markdown-body a { color: var(--app-link); text-decoration: underline; text-underline-offset: 0.15em; }
.markdown-body blockquote { border-left: 3px solid var(--app-border); padding-left: 1rem; color: var(--app-muted-text); }
.markdown-body pre { overflow-x: auto; border: 1px solid var(--app-border); border-radius: 0.25rem; padding: 1rem; background: var(--color-ctp-crust); color: var(--app-text); line-height: 1.5; }
.markdown-body :not(pre) > code { border-radius: 0.25rem; padding: 0.1rem 0.35rem; background: var(--color-ctp-surface-0); color: var(--app-text); }
.markdown-body hr { border: 0; border-top: 1px solid var(--app-border); }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td { border: 1px solid var(--app-border); padding: 0.5rem 0.75rem; text-align: left; }
article { border: 1px solid var(--app-border); border-radius: 0.25rem; padding: 1.25rem; background: color-mix(in srgb, var(--app-surface) 88%, transparent); box-shadow: 0 0.75rem 2rem rgb(35 38 52 / 0.35); }
article p + p { margin-top: 0.5rem; }
article h1 + p, article h2 + p, article h3 + p { margin-top: 0.75rem; }
section { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }}