Release v1.2.0: Newspaper-style layout with major UI refinements
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>
This commit is contained in:
anthonyrawlins
@@ -133,22 +133,25 @@ module.exports = {
|
||||
'chorus-xxl': '6.1rem',
|
||||
},
|
||||
fontSize: {
|
||||
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }],
|
||||
'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: '400' }],
|
||||
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }],
|
||||
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }],
|
||||
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }],
|
||||
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }],
|
||||
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }],
|
||||
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }],
|
||||
'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: '500' }],
|
||||
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }],
|
||||
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }],
|
||||
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }],
|
||||
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '100' }],
|
||||
'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' }],
|
||||
@@ -164,6 +167,10 @@ module.exports = {
|
||||
'rem-4xl': '3.052rem',
|
||||
'rem-5xl': '3.815rem',
|
||||
},
|
||||
maxWidth: {
|
||||
'8xl': '88rem',
|
||||
'9xl': '96rem',
|
||||
},
|
||||
height: {
|
||||
'rem-xs': '0.640rem',
|
||||
'rem-sm': '0.800rem',
|
||||
@@ -223,44 +230,58 @@ module.exports = {
|
||||
'.text-h1': {
|
||||
fontSize: '4.768rem',
|
||||
lineHeight: '6.96rem',
|
||||
fontWeight: '100',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
||||
},
|
||||
'.text-h2': {
|
||||
fontSize: '3.052rem',
|
||||
lineHeight: '4.768rem',
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-exo), Exo, Inter Tight, sans-serif'
|
||||
fontWeight: '800',
|
||||
fontFamily: 'var(--font-exo), Exo, Inter, sans-serif'
|
||||
},
|
||||
'.text-h3': {
|
||||
fontSize: '2.441rem',
|
||||
lineHeight: '3.052rem',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
||||
},
|
||||
'.text-h4': {
|
||||
fontSize: '1.953rem',
|
||||
lineHeight: '2.441rem',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
||||
},
|
||||
'.text-h5': {
|
||||
fontSize: '1.563rem',
|
||||
lineHeight: '1.953rem',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
||||
},
|
||||
'.text-h6': {
|
||||
fontSize: '1.250rem',
|
||||
lineHeight: '1.563rem',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
fontWeight: '700',
|
||||
fontFamily: 'var(--font-inter), Inter, sans-serif'
|
||||
},
|
||||
'.text-h7': {
|
||||
fontSize: '1.000rem',
|
||||
lineHeight: '1.25rem',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
||||
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'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user