5e0be60c30
This release transforms PING into a sophisticated newspaper-style digital publication with enhanced readability and professional presentation. Major Features: - New FeaturedPostHero component with full-width newspaper design - Completely redesigned homepage with responsive newspaper grid layout - Enhanced PostCard component with refined typography and spacing - Improved mobile-first responsive design (mobile → tablet → desktop → 2XL) - Archive section with multi-column layout for deeper content discovery Technical Improvements: - Enhanced blog post validation and error handling in lib/blog.ts - Better date handling and normalization for scheduled posts - Improved Dockerfile with correct content volume mount paths - Fixed port configuration (3025 throughout stack) - Updated Tailwind config with refined typography and newspaper aesthetics - Added getFeaturedPost() function for hero selection UI/UX Enhancements: - Professional newspaper-style borders and dividers - Improved dark mode styling throughout - Better content hierarchy and visual flow - Enhanced author bylines and metadata presentation - Refined color palette with newspaper sophistication Documentation: - Added DESIGN_BRIEF_NEWSPAPER_LAYOUT.md detailing design principles - Added TESTING_RESULTS_25_POSTS.md with test scenarios This release establishes PING as a premium publication platform for AI orchestration and contextual intelligence thought leadership. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
289 lines
8.5 KiB
JavaScript
289 lines
8.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Core Brand Colors
|
|
'carbon': {
|
|
950: '#000000',
|
|
900: '#0a0a0a',
|
|
800: '#1a1a1a',
|
|
700: '#2a2a2a',
|
|
600: '#666666',
|
|
500: '#808080',
|
|
400: '#a0a0a0',
|
|
300: '#c0c0c0',
|
|
200: '#e0e0e0',
|
|
100: '#f0f0f0',
|
|
50: '#f8f8f8'
|
|
},
|
|
'mulberry': {
|
|
950: '#0b0213',
|
|
900: '#1a1426',
|
|
800: '#2a2639',
|
|
700: '#3a384c',
|
|
600: '#4a4a5f',
|
|
500: '#5a5c72',
|
|
400: '#7a7e95',
|
|
300: '#9aa0b8',
|
|
200: '#bac2db',
|
|
100: '#dae4fe',
|
|
50: '#f0f4ff'
|
|
},
|
|
'walnut': {
|
|
950: '#1E1815',
|
|
900: '#403730',
|
|
800: '#504743',
|
|
700: '#605756',
|
|
600: '#706769',
|
|
500: '#80777c',
|
|
400: '#90878f',
|
|
300: '#a09aa2',
|
|
200: '#b0adb5',
|
|
100: '#c0c0c8',
|
|
50: '#d0d3db',
|
|
25: '#e0e6ee'
|
|
},
|
|
'nickel': {
|
|
950: '#171717',
|
|
900: '#2a2a2a',
|
|
800: '#3d3d3d',
|
|
700: '#505050',
|
|
600: '#636363',
|
|
500: '#767676',
|
|
400: '#c1bfb1',
|
|
300: '#d4d2c6',
|
|
200: '#e7e5db',
|
|
100: '#faf8f0',
|
|
50: '#fdfcf8'
|
|
},
|
|
// System Colors
|
|
'ocean': {
|
|
950: '#2a3441',
|
|
900: '#3a4654',
|
|
800: '#4a5867',
|
|
700: '#5a6c80',
|
|
600: '#6a7e99',
|
|
500: '#7a90b2',
|
|
400: '#8ba3c4',
|
|
300: '#9bb6d6',
|
|
200: '#abc9e8',
|
|
100: '#bbdcfa',
|
|
50: '#cbefff'
|
|
},
|
|
'eucalyptus': {
|
|
950: '#2a3330',
|
|
900: '#3a4540',
|
|
800: '#4a5750',
|
|
700: '#515d54',
|
|
600: '#5a6964',
|
|
500: '#6a7974',
|
|
400: '#7a8a7f',
|
|
300: '#8a9b8f',
|
|
200: '#9aac9f',
|
|
100: '#aabdaf',
|
|
50: '#bacfbf'
|
|
},
|
|
'sand': {
|
|
950: '#8E7B5E',
|
|
900: '#99886E',
|
|
800: '#A4957E',
|
|
700: '#AFA28E',
|
|
600: '#BAAF9F',
|
|
500: '#C5BCAF',
|
|
400: '#D0C9BF',
|
|
300: '#DBD6CF',
|
|
200: '#E6E3DF',
|
|
100: '#F1F0EF',
|
|
50: '#F1F0EF',
|
|
},
|
|
'coral': {
|
|
950: '#6A4A48',
|
|
900: '#7B5D5A',
|
|
800: '#8C706C',
|
|
700: '#9D8380',
|
|
600: '#AE9693',
|
|
500: '#BFAAA7',
|
|
400: '#D0BDBB',
|
|
300: '#E1D1CF',
|
|
200: '#F2E4E3',
|
|
100: '#9e979c',
|
|
50: '#aea7ac'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['var(--font-inter)', 'Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['Inconsolata', 'ui-monospace', 'monospace'],
|
|
logo: ['var(--font-exo)', 'Exo', 'Inter Tight', 'sans-serif']
|
|
},
|
|
spacing: {
|
|
'chorus-xxs': '0.854rem',
|
|
'chorus-xs': '0.945rem',
|
|
'chorus-sm': '1.0rem',
|
|
'chorus-base': '1.25rem',
|
|
'chorus-md': '1.953rem',
|
|
'chorus-lg': '2.441rem',
|
|
'chorus-xl': '3.052rem',
|
|
'chorus-xxl': '6.1rem',
|
|
},
|
|
fontSize: {
|
|
'xxs': ['0.625rem', { lineHeight: '0.75rem', fontWeight: '400' }],
|
|
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '400' }],
|
|
'sm': ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }],
|
|
'base': ['1rem', { lineHeight: '1.50rem', fontWeight: '600' }],
|
|
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '600' }],
|
|
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '700' }],
|
|
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '700' }],
|
|
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '700' }],
|
|
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '800' }],
|
|
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '900' }],
|
|
|
|
'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }],
|
|
'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }],
|
|
'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '600' }],
|
|
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '700' }],
|
|
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '700' }],
|
|
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '800' }],
|
|
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '900' }],
|
|
|
|
'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }],
|
|
'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }],
|
|
'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }],
|
|
},
|
|
width: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
maxWidth: {
|
|
'8xl': '88rem',
|
|
'9xl': '96rem',
|
|
},
|
|
height: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
borderRadius: {
|
|
'none': '0',
|
|
'micro': '0.125rem',
|
|
'sm': '0.25rem',
|
|
'base': '0.375rem',
|
|
'md': '0.5rem',
|
|
'lg': '0.75rem',
|
|
'xl': '1rem',
|
|
'full': '9999px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.6s ease-out',
|
|
'slide-up': 'slideUp 0.8s ease-out',
|
|
'mobius-rotate': 'mobiusRotate 20s linear infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(2rem)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
mobiusRotate: {
|
|
'0%': { transform: 'rotateY(0deg) rotateX(10deg)' },
|
|
'100%': { transform: 'rotateY(360deg) rotateX(10deg)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
function({ addUtilities }) {
|
|
addUtilities({
|
|
// H7 Utility Class
|
|
'.h7': {
|
|
fontSize: '0.8rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: '700',
|
|
letterSpacing: '0.05em',
|
|
textTransform: 'uppercase'
|
|
},
|
|
|
|
// Complete H1-H7 Typography Utilities
|
|
'.text-h1': {
|
|
fontSize: '4.768rem',
|
|
lineHeight: '6.96rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
'.text-h2': {
|
|
fontSize: '3.052rem',
|
|
lineHeight: '4.768rem',
|
|
fontWeight: '800',
|
|
fontFamily: 'var(--font-exo), Exo, Inter, sans-serif'
|
|
},
|
|
'.text-h3': {
|
|
fontSize: '2.441rem',
|
|
lineHeight: '3.052rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
'.text-h4': {
|
|
fontSize: '1.953rem',
|
|
lineHeight: '2.441rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
'.text-h5': {
|
|
fontSize: '1.563rem',
|
|
lineHeight: '1.953rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
'.text-h6': {
|
|
fontSize: '1.250rem',
|
|
lineHeight: '1.563rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
'.text-h7': {
|
|
fontSize: '1.000rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
|
},
|
|
|
|
// Line clamp utilities
|
|
'.line-clamp-2': {
|
|
overflow: 'hidden',
|
|
display: '-webkit-box',
|
|
WebkitBoxOrient: 'vertical',
|
|
WebkitLineClamp: '2'
|
|
},
|
|
'.line-clamp-3': {
|
|
overflow: 'hidden',
|
|
display: '-webkit-box',
|
|
WebkitBoxOrient: 'vertical',
|
|
WebkitLineClamp: '3'
|
|
}
|
|
})
|
|
}
|
|
],
|
|
} |