diff --git a/app/globals.css b/app/globals.css index c8654b0..27f0018 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,17 +1,45 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; -@layer utilities { - .text-balance { - text-wrap: balance; - } +@custom-variant dark (&:is(.dark *)); - .text-shadow { - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +@theme { + --breakpoint-*: initial; + --breakpoint-xs: 440px; + --breakpoint-sm: 640px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1536px; + + --text-xxs: 0.625rem; +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); } } +@utility text-balance { + text-wrap: balance; +} + +@utility text-shadow { + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + .title-highlight { background: linear-gradient(200deg, #ff0098 20%, #0ef 80%); -webkit-background-clip: text; @@ -118,3 +146,7 @@ input[type='checkbox']:focus + .checkbox { opacity: 20%; animation: fadeInOut 4s ease-in-out infinite; } + +button { + cursor: pointer; +} diff --git a/app/page.tsx b/app/page.tsx index de6977a..cb58617 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -30,7 +30,7 @@ export default async function Home() {
-

+

Suosituimmat keskustelunaiheet tänään

diff --git a/bun.lockb b/bun.lockb index 6ba222c..50f49a0 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/BottomFade.tsx b/components/BottomFade.tsx index c57c839..0f878f2 100644 --- a/components/BottomFade.tsx +++ b/components/BottomFade.tsx @@ -1,5 +1,5 @@ export default function BottomFade() { return ( -
+
); } diff --git a/components/ChannelGrid.tsx b/components/ChannelGrid.tsx index b4d9090..7ea01fc 100644 --- a/components/ChannelGrid.tsx +++ b/components/ChannelGrid.tsx @@ -4,18 +4,18 @@ const DELAYS = shuffle([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1 export default function ChannelGrid({ channels }: { channels: Channel[] }) { return ( -
+
{channels.map((channel, i) => (
diff --git a/components/FeatureImage.tsx b/components/FeatureImage.tsx index ef6fef3..b71bd11 100644 --- a/components/FeatureImage.tsx +++ b/components/FeatureImage.tsx @@ -14,7 +14,7 @@ export default function FeatureImage({ return (
-
+
@@ -107,23 +107,23 @@ export default function Form() {
-