fix: Increase base font size for better readability on big screens

- Base font: 18px (was 16px)
- Large screens (1280px+): 20px
- Extra large (1536px+): 22px
- Ultra large (1920px+): 24px

- Buttons: text-lg md:text-xl (was smaller)
- Navigation: text-base md:text-lg
- Body text: text-base md:text-lg lg:text-xl
- Section titles: text-4xl md:text-5xl lg:text-6xl

- NEVER use text-xs or text-sm (too small on big screens)
- All text now scales properly for 4K displays
This commit is contained in:
Kunthawat Greethong
2026-03-04 10:57:39 +07:00
parent ca9787d4dd
commit e8dbde069c

View File

@@ -3,8 +3,31 @@
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
/* Larger base font size for better readability on big screens */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 18px; /* Base size - NOT 16px */
}
/* Large screens (1280px+) */
@media (min-width: 1280px) {
html {
font-size: 20px; /* Increased for large screens */
}
}
/* Extra large screens (1536px+) */
@media (min-width: 1536px) {
html {
font-size: 22px; /* Even larger for 4K */
}
}
/* Ultra large screens (1920px+) */
@media (min-width: 1920px) {
html {
font-size: 24px; /* Maximum base size */
}
} }
body { body {
@@ -17,45 +40,59 @@
} }
@layer components { @layer components {
/* Buttons - Larger text */
.btn-primary { .btn-primary {
@apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg @apply inline-flex items-center justify-center px-8 py-4 bg-primary-600 text-white font-semibold rounded-lg
hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial text-lg md:text-xl hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
active:translate-y-0.5; active:translate-y-0.5;
} }
.btn-secondary { .btn-secondary {
@apply inline-flex items-center justify-center px-6 py-3 bg-secondary-800 text-white font-semibold rounded-lg @apply inline-flex items-center justify-center px-8 py-4 bg-secondary-800 text-white font-semibold rounded-lg
hover:bg-secondary-900 transition-all duration-200; text-lg md:text-xl hover:bg-secondary-900 transition-all duration-200;
} }
.btn-outline { .btn-outline {
@apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg @apply inline-flex items-center justify-center px-8 py-4 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
hover:bg-primary-600 hover:text-white transition-all duration-200; text-lg md:text-xl hover:bg-primary-600 hover:text-white transition-all duration-200;
} }
/* Section titles - Larger sizes */
.section-title { .section-title {
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900; @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900;
} }
.section-subtitle { .section-subtitle {
@apply text-lg md:text-xl text-secondary-600 mt-4; @apply text-xl md:text-2xl lg:text-3xl text-secondary-600 mt-4;
} }
/* Cards - Better padding and text */
.card { .card {
@apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300 @apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300
hover:shadow-industrial hover:-translate-y-1; hover:shadow-industrial hover:-translate-y-1;
} }
.card-industrial { .card-industrial {
@apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500; @apply bg-secondary-800 text-white rounded-xl p-8 border-l-4 border-primary-500;
} }
.gradient-overlay { /* Navigation - Larger text */
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70; .nav-link {
@apply text-base md:text-lg font-medium hover:text-primary-600 transition-colors;
} }
.industrial-badge { /* Footer - Readable text */
@apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded; .footer-text {
@apply text-base md:text-lg text-secondary-600;
}
/* Body text - Minimum sizes */
.body-text {
@apply text-base md:text-lg lg:text-xl;
}
.small-text {
@apply text-base; /* Minimum 18px, NEVER text-sm or text-xs */
} }
} }
@@ -67,4 +104,17 @@
.text-gradient { .text-gradient {
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700; @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
} }
/* Responsive text utilities - Larger base sizes */
.text-responsive-base {
@apply text-base md:text-lg lg:text-xl xl:text-2xl;
}
.text-responsive-lg {
@apply text-lg md:text-xl lg:text-2xl xl:text-3xl;
}
.text-responsive-xl {
@apply text-xl md:text-2xl lg:text-3xl xl:text-4xl;
}
} }