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
2025-10-19 00:23:51 +11:00
parent 796924499d
commit 5e0be60c30
40 changed files with 1865 additions and 324 deletions

View File

@@ -194,78 +194,14 @@ body {
}
/* CHORUS Blog Typography */
.prose {
@apply max-w-none text-carbon-950 dark:text-carbon-100;
}
.prose h1 {
@apply text-h2 font-sans font-thin text-carbon-950 dark:text-mulberry-100 mb-8;
}
.prose h2 {
@apply text-h3 font-logo text-carbon-950 dark:text-mulberry-200 mb-6 mt-12;
}
.prose h3 {
@apply text-h4 font-sans text-carbon-950 dark:text-mulberry-300 mb-4 mt-8;
}
.prose h4 {
@apply text-h5 font-sans text-carbon-800 dark:text-mulberry-400 mb-3 mt-6;
}
.prose h5 {
@apply text-h6 font-sans text-carbon-700 dark:text-mulberry-500 mb-3 mt-6;
}
.prose h6 {
@apply text-h7 font-sans text-carbon-600 dark:text-mulberry-600 mb-2 mt-4;
}
.prose p {
@apply text-base leading-relaxed mb-6 text-carbon-800 dark:text-carbon-200;
}
.prose a {
@apply text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-300 transition-colors underline decoration-ocean-500/30 hover:decoration-ocean-600/50 dark:hover:decoration-ocean-400/50;
}
.prose strong {
@apply text-carbon-950 dark:text-carbon-100 font-semibold;
}
.prose code {
@apply bg-carbon-200 dark:bg-carbon-800 text-eucalyptus-700 dark:text-eucalyptus-400 px-2 py-1 rounded-sm font-mono text-sm;
}
.prose pre {
@apply bg-carbon-100 dark:bg-carbon-900 border border-carbon-300 dark:border-carbon-700 rounded-lg overflow-x-auto p-4 mb-6;
}
.prose pre code {
@apply bg-transparent text-carbon-950 dark:text-carbon-200 p-0;
}
.prose blockquote {
@apply border-l-4 border-carbon-400 dark:border-mulberry-600 pl-6 italic text-carbon-600 dark:text-carbon-300 my-6;
}
.prose ul {
@apply list-disc pl-6 mb-6 space-y-2;
}
.prose ol {
@apply list-decimal pl-6 mb-6 space-y-2;
}
.prose li {
@apply text-carbon-800 dark:text-carbon-200;
}
/* Blog-specific utilities */
.blog-container {
@apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.blog-meta {