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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user