UI/UX Improvements: Modern design + hashtag system + cover images
- Added modern CSS design system with better typography - Created hashtag/tag functionality with auto-tagging - Improved homepage with hero section and trending tags - Enhanced article pages with full-width cover images - Added tag pages for filtering articles by hashtag - Better mobile responsive design - Smoother animations and transitions - Auto-tag system analyzes content and assigns relevant tags - 30+ predefined AI-related tags (ChatGPT, OpenAI, etc.)
This commit is contained in:
Zeya Phyo
267
frontend/app/globals-improved.css
Normal file
267
frontend/app/globals-improved.css
Normal file
@@ -0,0 +1,267 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Modern Design System for Burmddit */
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1e40af;
|
||||
--accent: #f59e0b;
|
||||
--text: #1f2937;
|
||||
--text-light: #6b7280;
|
||||
--bg: #ffffff;
|
||||
--bg-secondary: #f9fafb;
|
||||
--border: #e5e7eb;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-bg-secondary text-text antialiased;
|
||||
font-feature-settings: "cv11", "ss01";
|
||||
}
|
||||
}
|
||||
|
||||
/* Burmese Fonts - Better rendering */
|
||||
@font-face {
|
||||
font-family: 'Pyidaungsu';
|
||||
src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-feature-settings: "liga" 1;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Pyidaungsu';
|
||||
src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.font-burmese {
|
||||
font-family: 'Pyidaungsu', 'Noto Sans Myanmar', 'Myanmar Text', sans-serif;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* Modern Card Design */
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden;
|
||||
@apply border border-gray-100;
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply transform hover:-translate-y-1 hover:scale-[1.02];
|
||||
}
|
||||
|
||||
/* Cover Image with Overlay */
|
||||
.cover-image-container {
|
||||
@apply relative overflow-hidden;
|
||||
}
|
||||
|
||||
.cover-image-overlay {
|
||||
@apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent;
|
||||
}
|
||||
|
||||
.cover-image-text {
|
||||
@apply absolute bottom-0 left-0 right-0 p-6 text-white;
|
||||
}
|
||||
|
||||
/* Tag/Hashtag Design */
|
||||
.tag {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
|
||||
@apply bg-primary/10 text-primary hover:bg-primary hover:text-white;
|
||||
@apply transition-all duration-200 cursor-pointer;
|
||||
}
|
||||
|
||||
.tag-burmese {
|
||||
@apply font-burmese text-sm;
|
||||
}
|
||||
|
||||
/* Article Content - Better Typography */
|
||||
.article-content {
|
||||
@apply font-burmese text-gray-800 leading-loose;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.article-content h1 {
|
||||
@apply text-4xl font-bold mt-10 mb-6 text-gray-900;
|
||||
@apply font-burmese leading-tight;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
@apply text-3xl font-bold mt-8 mb-5 text-gray-900;
|
||||
@apply font-burmese leading-snug;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
@apply text-2xl font-semibold mt-6 mb-4 text-gray-800;
|
||||
@apply font-burmese;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
@apply mb-6 text-lg leading-loose text-gray-700;
|
||||
}
|
||||
|
||||
.article-content a {
|
||||
@apply text-primary hover:text-primary-dark underline decoration-2 underline-offset-2;
|
||||
@apply transition-colors duration-200;
|
||||
}
|
||||
|
||||
.article-content ul, .article-content ol {
|
||||
@apply ml-6 mb-6 space-y-3;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
@apply text-lg text-gray-700 leading-relaxed;
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
.article-content ul li {
|
||||
@apply list-disc;
|
||||
}
|
||||
|
||||
.article-content ol li {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
.article-content code {
|
||||
@apply bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800;
|
||||
@apply border border-gray-200;
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
@apply bg-gray-900 text-gray-100 p-5 rounded-xl overflow-x-auto mb-6;
|
||||
@apply shadow-lg;
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
@apply border-l-4 border-primary pl-6 italic my-6 text-gray-700;
|
||||
@apply bg-primary/5 py-4 rounded-r-lg;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
|
||||
}
|
||||
|
||||
/* Glassmorphism Effect */
|
||||
.glass {
|
||||
@apply bg-white/80 backdrop-blur-lg border border-white/20;
|
||||
}
|
||||
|
||||
/* Image Zoom on Hover */
|
||||
.image-zoom {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
.image-zoom img {
|
||||
@apply transition-transform duration-500 ease-out;
|
||||
}
|
||||
|
||||
.image-zoom:hover img {
|
||||
@apply scale-110;
|
||||
}
|
||||
|
||||
/* Loading Skeleton */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200;
|
||||
@apply bg-[length:200%_100%];
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* Smooth Page Transitions */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* Badge Design */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
|
||||
@apply shadow-sm;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply bg-primary text-white;
|
||||
}
|
||||
|
||||
.badge-accent {
|
||||
@apply bg-accent text-white;
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.hover-lift {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
@apply transform -translate-y-2 shadow-2xl;
|
||||
}
|
||||
|
||||
/* Focus Styles */
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-primary ring-offset-2 rounded;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-400 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
/* Mobile Optimizations */
|
||||
@media (max-width: 640px) {
|
||||
.article-content {
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.article-content h1 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
.article-content h3 {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
@apply text-black;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user