your personal website on atproto - mirror forked from flo-bit.dev/blento
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412@import 'tailwindcss';
@plugin '@tailwindcss/forms';@plugin '@tailwindcss/typography';
@source '../node_modules/@foxui';
@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));@custom-variant accent (&:where(.accent, .accent *));
.body::-webkit-scrollbar-track { background-color: transparent;}
@supports (scrollbar-width: auto) { body { scrollbar-color: var(--color-base-400) transparent; scrollbar-width: thin; }
.dark body { scrollbar-color: var(--color-base-800) transparent; }}
@supports not (scrollbar-width: auto) { body::-webkit-scrollbar { width: 14px; height: 14px; }}
body::-webkit-scrollbar-thumb { background-color: var(--color-base-400); border-radius: 20px; border: 4px solid transparent; background-clip: content-box;}
body::-webkit-scrollbar-thumb:hover { background-color: var(--color-base-500);}
.dark body::-webkit-scrollbar-thumb { background-color: var(--color-base-800);}
.dark body::-webkit-scrollbar-thumb:hover { background-color: var(--color-base-700);}
@theme inline { --color-base-50: var(--base-50); --color-base-100: var(--base-100); --color-base-200: var(--base-200); --color-base-300: var(--base-300); --color-base-400: var(--base-400); --color-base-500: var(--base-500); --color-base-600: var(--base-600); --color-base-700: var(--base-700); --color-base-800: var(--base-800); --color-base-900: var(--base-900); --color-base-950: var(--base-950);
--color-accent-50: var(--accent-50); --color-accent-100: var(--accent-100); --color-accent-200: var(--accent-200); --color-accent-300: var(--accent-300); --color-accent-400: var(--accent-400); --color-accent-500: var(--accent-500); --color-accent-600: var(--accent-600); --color-accent-700: var(--accent-700); --color-accent-800: var(--accent-800); --color-accent-900: var(--accent-900); --color-accent-950: var(--accent-950);}
@layer base { :root { --accent-50: var(--color-pink-50); --accent-100: var(--color-pink-100); --accent-200: var(--color-pink-200); --accent-300: var(--color-pink-300); --accent-400: var(--color-pink-400); --accent-500: var(--color-pink-500); --accent-600: var(--color-pink-600); --accent-700: var(--color-pink-700); --accent-800: var(--color-pink-800); --accent-900: var(--color-pink-900); --accent-950: var(--color-pink-950);
--base-50: var(--color-neutral-50); --base-100: var(--color-neutral-100); --base-200: var(--color-neutral-200); --base-300: var(--color-neutral-300); --base-400: var(--color-neutral-400); --base-500: var(--color-neutral-500); --base-600: var(--color-neutral-600); --base-700: var(--color-neutral-700); --base-800: var(--color-neutral-800); --base-900: var(--color-neutral-900); --base-950: var(--color-neutral-950); }
.red { --accent-50: var(--color-red-50); --accent-100: var(--color-red-100); --accent-200: var(--color-red-200); --accent-300: var(--color-red-300); --accent-400: var(--color-red-400); --accent-500: var(--color-red-500); --accent-600: var(--color-red-600); --accent-700: var(--color-red-700); --accent-800: var(--color-red-800); --accent-900: var(--color-red-900); --accent-950: var(--color-red-950); }
.orange { --accent-50: var(--color-orange-50); --accent-100: var(--color-orange-100); --accent-200: var(--color-orange-200); --accent-300: var(--color-orange-300); --accent-400: var(--color-orange-400); --accent-500: var(--color-orange-500); --accent-600: var(--color-orange-600); --accent-700: var(--color-orange-700); --accent-800: var(--color-orange-800); --accent-900: var(--color-orange-900); --accent-950: var(--color-orange-950); }
.amber { --accent-50: var(--color-amber-50); --accent-100: var(--color-amber-100); --accent-200: var(--color-amber-200); --accent-300: var(--color-amber-300); --accent-400: var(--color-amber-400); --accent-500: var(--color-amber-500); --accent-600: var(--color-amber-600); --accent-700: var(--color-amber-700); --accent-800: var(--color-amber-800); --accent-900: var(--color-amber-900); --accent-950: var(--color-amber-950); }
.yellow { --accent-50: var(--color-yellow-50); --accent-100: var(--color-yellow-100); --accent-200: var(--color-yellow-200); --accent-300: var(--color-yellow-300); --accent-400: var(--color-yellow-400); --accent-500: var(--color-yellow-500); --accent-600: var(--color-yellow-600); --accent-700: var(--color-yellow-700); --accent-800: var(--color-yellow-800); --accent-900: var(--color-yellow-900); --accent-950: var(--color-yellow-950); }
.lime { --accent-50: var(--color-lime-50); --accent-100: var(--color-lime-100); --accent-200: var(--color-lime-200); --accent-300: var(--color-lime-300); --accent-400: var(--color-lime-400); --accent-500: var(--color-lime-500); --accent-600: var(--color-lime-600); --accent-700: var(--color-lime-700); --accent-800: var(--color-lime-800); --accent-900: var(--color-lime-900); --accent-950: var(--color-lime-950); }
.green { --accent-50: var(--color-green-50); --accent-100: var(--color-green-100); --accent-200: var(--color-green-200); --accent-300: var(--color-green-300); --accent-400: var(--color-green-400); --accent-500: var(--color-green-500); --accent-600: var(--color-green-600); --accent-700: var(--color-green-700); --accent-800: var(--color-green-800); --accent-900: var(--color-green-900); --accent-950: var(--color-green-950); }
.emerald { --accent-50: var(--color-emerald-50); --accent-100: var(--color-emerald-100); --accent-200: var(--color-emerald-200); --accent-300: var(--color-emerald-300); --accent-400: var(--color-emerald-400); --accent-500: var(--color-emerald-500); --accent-600: var(--color-emerald-600); --accent-700: var(--color-emerald-700); --accent-800: var(--color-emerald-800); --accent-900: var(--color-emerald-900); --accent-950: var(--color-emerald-950); }
.teal { --accent-50: var(--color-teal-50); --accent-100: var(--color-teal-100); --accent-200: var(--color-teal-200); --accent-300: var(--color-teal-300); --accent-400: var(--color-teal-400); --accent-500: var(--color-teal-500); --accent-600: var(--color-teal-600); --accent-700: var(--color-teal-700); --accent-800: var(--color-teal-800); --accent-900: var(--color-teal-900); --accent-950: var(--color-teal-950); }
.cyan { --accent-50: var(--color-cyan-50); --accent-100: var(--color-cyan-100); --accent-200: var(--color-cyan-200); --accent-300: var(--color-cyan-300); --accent-400: var(--color-cyan-400); --accent-500: var(--color-cyan-500); --accent-600: var(--color-cyan-600); --accent-700: var(--color-cyan-700); --accent-800: var(--color-cyan-800); --accent-900: var(--color-cyan-900); --accent-950: var(--color-cyan-950); }
.sky { --accent-50: var(--color-sky-50); --accent-100: var(--color-sky-100); --accent-200: var(--color-sky-200); --accent-300: var(--color-sky-300); --accent-400: var(--color-sky-400); --accent-500: var(--color-sky-500); --accent-600: var(--color-sky-600); --accent-700: var(--color-sky-700); --accent-800: var(--color-sky-800); --accent-900: var(--color-sky-900); --accent-950: var(--color-sky-950); } .blue { --accent-50: var(--color-blue-50); --accent-100: var(--color-blue-100); --accent-200: var(--color-blue-200); --accent-300: var(--color-blue-300); --accent-400: var(--color-blue-400); --accent-500: var(--color-blue-500); --accent-600: var(--color-blue-600); --accent-700: var(--color-blue-700); --accent-800: var(--color-blue-800); --accent-900: var(--color-blue-900); --accent-950: var(--color-blue-950); }
.indigo { --accent-50: var(--color-indigo-50); --accent-100: var(--color-indigo-100); --accent-200: var(--color-indigo-200); --accent-300: var(--color-indigo-300); --accent-400: var(--color-indigo-400); --accent-500: var(--color-indigo-500); --accent-600: var(--color-indigo-600); --accent-700: var(--color-indigo-700); --accent-800: var(--color-indigo-800); --accent-900: var(--color-indigo-900); --accent-950: var(--color-indigo-950); }
.violet { --accent-50: var(--color-violet-50); --accent-100: var(--color-violet-100); --accent-200: var(--color-violet-200); --accent-300: var(--color-violet-300); --accent-400: var(--color-violet-400); --accent-500: var(--color-violet-500); --accent-600: var(--color-violet-600); --accent-700: var(--color-violet-700); --accent-800: var(--color-violet-800); --accent-900: var(--color-violet-900); --accent-950: var(--color-violet-950); }
.purple { --accent-50: var(--color-purple-50); --accent-100: var(--color-purple-100); --accent-200: var(--color-purple-200); --accent-300: var(--color-purple-300); --accent-400: var(--color-purple-400); --accent-500: var(--color-purple-500); --accent-600: var(--color-purple-600); --accent-700: var(--color-purple-700); --accent-800: var(--color-purple-800); --accent-900: var(--color-purple-900); --accent-950: var(--color-purple-950); }
.fuchsia { --accent-50: var(--color-fuchsia-50); --accent-100: var(--color-fuchsia-100); --accent-200: var(--color-fuchsia-200); --accent-300: var(--color-fuchsia-300); --accent-400: var(--color-fuchsia-400); --accent-500: var(--color-fuchsia-500); --accent-600: var(--color-fuchsia-600); --accent-700: var(--color-fuchsia-700); --accent-800: var(--color-fuchsia-800); --accent-900: var(--color-fuchsia-900); --accent-950: var(--color-fuchsia-950); }
.pink { --accent-50: var(--color-pink-50); --accent-100: var(--color-pink-100); --accent-200: var(--color-pink-200); --accent-300: var(--color-pink-300); --accent-400: var(--color-pink-400); --accent-500: var(--color-pink-500); --accent-600: var(--color-pink-600); --accent-700: var(--color-pink-700); --accent-800: var(--color-pink-800); --accent-900: var(--color-pink-900); --accent-950: var(--color-pink-950); }
.rose { --accent-50: var(--color-rose-50); --accent-100: var(--color-rose-100); --accent-200: var(--color-rose-200); --accent-300: var(--color-rose-300); --accent-400: var(--color-rose-400); --accent-500: var(--color-rose-500); --accent-600: var(--color-rose-600); --accent-700: var(--color-rose-700); --accent-800: var(--color-rose-800); --accent-900: var(--color-rose-900); --accent-950: var(--color-rose-950); }
.gray { --base-50: var(--color-gray-50); --base-100: var(--color-gray-100); --base-200: var(--color-gray-200); --base-300: var(--color-gray-300); --base-400: var(--color-gray-400); --base-500: var(--color-gray-500); --base-600: var(--color-gray-600); --base-700: var(--color-gray-700); --base-800: var(--color-gray-800); --base-900: var(--color-gray-900); --base-950: var(--color-gray-950); }
.zinc { --base-50: var(--color-zinc-50); --base-100: var(--color-zinc-100); --base-200: var(--color-zinc-200); --base-300: var(--color-zinc-300); --base-400: var(--color-zinc-400); --base-500: var(--color-zinc-500); --base-600: var(--color-zinc-600); --base-700: var(--color-zinc-700); --base-800: var(--color-zinc-800); --base-900: var(--color-zinc-900); --base-950: var(--color-zinc-950); }
.neutral { --base-50: var(--color-neutral-50); --base-100: var(--color-neutral-100); --base-200: var(--color-neutral-200); --base-300: var(--color-neutral-300); --base-400: var(--color-neutral-400); --base-500: var(--color-neutral-500); --base-600: var(--color-neutral-600); --base-700: var(--color-neutral-700); --base-800: var(--color-neutral-800); --base-900: var(--color-neutral-900); --base-950: var(--color-neutral-950); }
.stone { --base-50: var(--color-stone-50); --base-100: var(--color-stone-100); --base-200: var(--color-stone-200); --base-300: var(--color-stone-300); --base-400: var(--color-stone-400); --base-500: var(--color-stone-500); --base-600: var(--color-stone-600); --base-700: var(--color-stone-700); --base-800: var(--color-stone-800); --base-900: var(--color-stone-900); --base-950: var(--color-stone-950); }
.slate { --base-50: var(--color-slate-50); --base-100: var(--color-slate-100); --base-200: var(--color-slate-200); --base-300: var(--color-slate-300); --base-400: var(--color-slate-400); --base-500: var(--color-slate-500); --base-600: var(--color-slate-600); --base-700: var(--color-slate-700); --base-800: var(--color-slate-800); --base-900: var(--color-slate-900); --base-950: var(--color-slate-950); }}