See the best posts from any Bluesky account
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155@import 'tailwindcss';@source '../views';
@custom-variant dark (&:where(.dark, .dark *));
@theme { --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-heading: 'Gabarito', ui-sans-serif, system-ui, -apple-system, sans-serif;
/* ── Warm grays — noticeably tinted toward Bluesky blue ── */ --color-gray-50: oklch(98% 0.014 255); --color-gray-100: oklch(96% 0.016 255); --color-gray-200: oklch(92% 0.02 255); --color-gray-300: oklch(87% 0.024 255); --color-gray-400: oklch(70% 0.03 255); --color-gray-500: oklch(55% 0.03 255); --color-gray-600: oklch(45% 0.028 255); --color-gray-700: oklch(37% 0.025 255); --color-gray-800: oklch(28% 0.022 255); --color-gray-900: oklch(21% 0.02 255); --color-gray-950: oklch(14% 0.016 255);
/* ── Bluesky blue — tuned to the Bluesky brand ── */ --color-blue-50: oklch(96.5% 0.025 250); --color-blue-100: oklch(93% 0.05 250); --color-blue-200: oklch(88% 0.08 252); --color-blue-300: oklch(78% 0.13 254); --color-blue-400: oklch(70% 0.17 256); --color-blue-500: oklch(63% 0.19 258); --color-blue-600: oklch(56% 0.21 260); --color-blue-700: oklch(49% 0.20 262); --color-blue-800: oklch(42% 0.16 262); --color-blue-900: oklch(35% 0.12 262); --color-blue-950: oklch(27% 0.09 262);
/* ── Heart red — warmer, rosier for likes and engagement ── */ --color-red-50: oklch(96.5% 0.02 15); --color-red-100: oklch(93% 0.04 15); --color-red-200: oklch(88% 0.07 18); --color-red-300: oklch(78% 0.13 20); --color-red-400: oklch(70% 0.18 22); --color-red-500: oklch(64% 0.22 22); --color-red-600: oklch(57% 0.22 24); --color-red-700: oklch(50% 0.19 25); --color-red-800: oklch(43% 0.15 25); --color-red-900: oklch(36% 0.12 25); --color-red-950: oklch(27% 0.09 25);
/* ── Gold — celebratory highlight for top liked post ── */ --color-amber-50: oklch(97% 0.03 85); --color-amber-100: oklch(94% 0.06 85); --color-amber-200: oklch(89% 0.1 80);
/* ── Success green ── */ --color-green-600: oklch(62% 0.18 150);
/* ── Tinted neutral (embed borders) ── */ --color-neutral-200: oklch(92% 0.015 255);
/* ── Easing ── */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
/* ── Animation ── */ --animate-scale-up: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; --animate-fade-in-up: fade-in-up 0.5s var(--ease-out-quart) both; --animate-fade-in: fade-in 0.4s var(--ease-out-quart) both;}
@keyframes scale-up { from { transform: scale(0.7); } to { transform: scale(1); }}
@keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); }}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}
@keyframes heart-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); }}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); }}
/* Indeterminate progress bar: a 40%-wide segment sweeps left→right on a loop */@keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); }}
@keyframes glow-in { from { opacity: 0; transform: translateY(12px); box-shadow: 0 0 0 0 transparent; } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 20px -4px oklch(85% 0.08 85 / 0.5); }}
@keyframes glow-in-blue { from { opacity: 0; transform: translateY(12px); box-shadow: 0 0 0 0 transparent; } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 20px -4px oklch(85% 0.08 250 / 0.5); }}
@layer base { [x-cloak] { display: none !important; }}
/* ── Reduced motion ── */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}