kunthawat/dealplustech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Increase only smallest text on big screens

Browse Source 
- Base font: unchanged (16px default)
- Large screens (1280px+): 17px base (+1px only)
- Extra large (1536px+): 18px base (+2px only)
- .text-small: text-sm md:text-base (increased on medium+ screens)

Only smallest text increased, not all text sizes.
This commit is contained in:
Kunthawat Greethong
2026-03-04 12:00:25 +07:00
parent e8dbde069c
commit ba2c5be6e0
1 changed files with 13 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/styles/globals.css
View File

@@ -3,31 +3,8 @@
@tailwind utilities;
@layer base {
/* Larger base font size for better readability on big screens */
html {
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 {
@@ -40,59 +17,45 @@
}
@layer components {
/* Buttons - Larger text */
.btn-primary {
@apply inline-flex items-center justify-center px-8 py-4 bg-primary-600 text-white font-semibold rounded-lg
text-lg md:text-xl hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
@apply inline-flex items-center justify-center px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg
hover:bg-primary-700 transition-all duration-200 shadow-bold hover:shadow-industrial
active:translate-y-0.5;
}
.btn-secondary {
@apply inline-flex items-center justify-center px-8 py-4 bg-secondary-800 text-white font-semibold rounded-lg
text-lg md:text-xl hover:bg-secondary-900 transition-all duration-200;
@apply inline-flex items-center justify-center px-6 py-3 bg-secondary-800 text-white font-semibold rounded-lg
hover:bg-secondary-900 transition-all duration-200;
}
.btn-outline {
@apply inline-flex items-center justify-center px-8 py-4 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
text-lg md:text-xl hover:bg-primary-600 hover:text-white transition-all duration-200;
@apply inline-flex items-center justify-center px-6 py-3 border-2 border-primary-600 text-primary-600 font-semibold rounded-lg
hover:bg-primary-600 hover:text-white transition-all duration-200;
}
/* Section titles - Larger sizes */
.section-title {
@apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900;
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
}
.section-subtitle {
@apply text-xl md:text-2xl lg:text-3xl text-secondary-600 mt-4;
@apply text-lg md:text-xl text-secondary-600 mt-4;
}
/* Cards - Better padding and text */
.card {
@apply bg-white rounded-xl shadow-card overflow-hidden transition-all duration-300
hover:shadow-industrial hover:-translate-y-1;
}
.card-industrial {
@apply bg-secondary-800 text-white rounded-xl p-8 border-l-4 border-primary-500;
@apply bg-secondary-800 text-white rounded-xl p-6 border-l-4 border-primary-500;
}
/* Navigation - Larger text */
.nav-link {
@apply text-base md:text-lg font-medium hover:text-primary-600 transition-colors;
.gradient-overlay {
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
}
/* Footer - Readable text */
.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 */
.industrial-badge {
@apply inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded;
}
}
@@ -104,17 +67,4 @@
.text-gradient {
@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;
}
}