Chad Curtis
9056b43696
- New posts flushed from the stream buffer now briefly highlight with a primary-tinted fade animation so users can see what appeared - New-posts pill uses responsive CSS (new-posts-pill utility) so it sits correctly below the SubHeaderBar on both mobile and desktop - SubHeaderBar desktop padding moved inside the inner wrapper so the arc background extends to the viewport edge, eliminating the gap above tabs
125 lines
2.9 KiB
TypeScript
125 lines
2.9 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import tailwindcssAnimate from "tailwindcss-animate";
|
|
import typography from "@tailwindcss/typography";
|
|
|
|
export default {
|
|
content: [
|
|
"./pages/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
"./app/**/*.{ts,tsx}",
|
|
"./src/**/*.{ts,tsx}",
|
|
],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px'
|
|
}
|
|
},
|
|
screens: {
|
|
'sm': '640px',
|
|
'sidebar': '900px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
extend: {
|
|
spacing: {
|
|
'22': '5.5rem',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter Variable', 'Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))'
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))'
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))'
|
|
},
|
|
success: {
|
|
DEFAULT: 'hsl(var(--success))',
|
|
foreground: 'hsl(var(--success-foreground))'
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))'
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))'
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))'
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))'
|
|
}
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)'
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: {
|
|
height: '0'
|
|
},
|
|
to: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
}
|
|
},
|
|
'accordion-up': {
|
|
from: {
|
|
height: 'var(--radix-accordion-content-height)'
|
|
},
|
|
to: {
|
|
height: '0'
|
|
}
|
|
},
|
|
'pending-glow': {
|
|
'0%, 100%': {
|
|
boxShadow: '0 0 0 0 hsl(var(--primary) / 0)'
|
|
},
|
|
'50%': {
|
|
boxShadow: '0 0 8px 2px hsl(var(--primary) / 0.15)'
|
|
}
|
|
},
|
|
'badge-spotlight': {
|
|
from: { transform: 'rotate(0deg)' },
|
|
to: { transform: 'rotate(360deg)' }
|
|
},
|
|
'highlight-fade': {
|
|
from: { backgroundColor: 'hsl(var(--primary) / 0.10)' },
|
|
to: { backgroundColor: 'transparent' }
|
|
}
|
|
},
|
|
animation: {
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
'pending-glow': 'pending-glow 2.5s ease-in-out infinite',
|
|
'badge-spotlight': 'badge-spotlight 8s linear infinite',
|
|
'highlight-fade': 'highlight-fade 1.5s ease-out forwards'
|
|
}
|
|
}
|
|
},
|
|
plugins: [tailwindcssAnimate, typography],
|
|
} satisfies Config;
|