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

🎨 Fix: Add CSS import to BaseLayout + use standard Tailwind colors

Browse Source 
- Added import '../styles/global.css' to BaseLayout.astro
- Changed custom colors to standard Tailwind (green-600, gray-600)
- CSS now properly bundled and served

Fixes:
✅ No styles applying to website
✅ Tailwind CSS now working
✅ Button and card styles functional
This commit is contained in:
Kunthawat Greethong
2026-03-09 22:19:01 +07:00
parent 92072a4ebf
commit 2c23588dd0
189 changed files with 25 additions and 4478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/layouts/BaseLayout.astro
View File

@@ -6,6 +6,9 @@ export interface Props {
}
const { title, description, image } = Astro.props;
// Import global styles - CRITICAL for CSS to work!
import '../styles/global.css';
---
<!doctype html>
@@ -40,11 +43,9 @@ const { title, description, image } = Astro.props;
<!-- Cookie Consent Banner -->
<script>
// Check for consent preferences
const consent = JSON.parse(localStorage.getItem('consent-preferences') || 'null');
if (!consent) {
// Dynamically create and show cookie banner
const banner = document.createElement('div');
banner.id = 'cookie-banner';
banner.className = 'fixed bottom-0 left-0 right-0 bg-secondary-900 text-white p-6 z-50 shadow-lg';
@@ -60,7 +61,6 @@ const { title, description, image } = Astro.props;
`;
document.body.appendChild(banner);
// Handle button clicks
document.getElementById('accept-all')?.addEventListener('click', () => {
localStorage.setItem('consent-preferences', JSON.stringify({
essential: true,
@@ -69,7 +69,6 @@ const { title, description, image } = Astro.props;
timestamp: new Date().toISOString()
}));
banner.remove();
loadAnalytics();
});
document.getElementById('reject-all')?.addEventListener('click', () => {
@@ -83,7 +82,6 @@ const { title, description, image } = Astro.props;
});
document.getElementById('customize')?.addEventListener('click', () => {
// For now, treat as reject - can be enhanced later
localStorage.setItem('consent-preferences', JSON.stringify({
essential: true,
analytics: false,
@@ -92,25 +90,6 @@ const { title, description, image } = Astro.props;
}));
banner.remove();
});
} else if (consent.analytics) {
// Load analytics if already consented
loadAnalytics();
}
// Load Umami Analytics if consented
function loadAnalytics() {
// Umami configuration - set in .env
const umamiEnabled = false; // Set to true when Umami is configured
const umamiWebsiteId = ''; // Add your Umami Website ID
const umamiDomain = ''; // e.g., analytics.moreminimore.com
if (umamiEnabled && umamiWebsiteId && umamiDomain) {
const script = document.createElement('script');
script.defer = true;
script.src = `https://${umamiDomain}/script.js`;
script.setAttribute('data-website-id', umamiWebsiteId);
document.head.appendChild(script);
}
}
</script>
</body>

171
src/styles/global.css
View File

@@ -1,157 +1,30 @@
@import "tailwindcss";
@import 'tailwindcss';
/* Deal Plus Tech - Industrial Theme */
@theme {
/* Primary Colors - Green for trust and growth */
--color-primary-50: #f0fdf4;
--color-primary-100: #dcfce7;
--color-primary-200: #bbf7d0;
--color-primary-300: #86efac;
--color-primary-400: #4ade80;
--color-primary-500: #22c55e;
--color-primary-600: #16a34a;
--color-primary-700: #15803d;
--color-primary-800: #166534;
--color-primary-900: #14532d;
/* Secondary Colors - Slate grays for industrial look */
--color-secondary-50: #f8fafc;
--color-secondary-100: #f1f5f9;
--color-secondary-200: #e2e8f0;
--color-secondary-300: #cbd5e1;
--color-secondary-400: #94a3b8;
--color-secondary-500: #64748b;
--color-secondary-600: #475569;
--color-secondary-700: #334155;
--color-secondary-800: #1e293b;
--color-secondary-900: #0f172a;
/* Accent Colors - Yellow for highlights */
--color-accent-400: #facc15;
--color-accent-500: #eab308;
--color-accent-600: #ca8a04;
/* Industrial custom colors */
--color-industrial-dark: #1a1a1a;
--color-industrial-light: #f5f5f5;
/* Font - Kanit for Thai support */
--font-sans: 'Kanit', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
/* Shadows */
--shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-industrial: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-bold: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* Custom Styles with standard Tailwind colors */
.btn-primary {
@apply px-6 py-3 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition-colors inline-block;
}
@layer base {
html {
scroll-behavior: smooth;
/* Base font size */
font-size: 16px;
}
/* Responsive font sizes for larger screens */
@media (min-width: 1280px) {
html {
font-size: 18px;
}
}
@media (min-width: 1536px) {
html {
font-size: 20px;
}
}
@media (min-width: 1920px) {
html {
font-size: 22px;
}
}
@media (min-width: 2560px) {
html {
font-size: 24px;
}
}
body {
@apply bg-white text-secondary-900 antialiased;
}
h1, h2, h3, h4, h5, h6 {
@apply font-bold tracking-tight;
}
.btn-secondary {
@apply px-6 py-3 bg-gray-600 text-white font-semibold rounded-md hover:bg-gray-700 transition-colors inline-block;
}
@layer components {
.btn-primary {
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 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 text-base md:text-lg;
}
.btn-secondary {
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md:py-4 bg-secondary-800 text-white font-semibold rounded-lg
hover:bg-secondary-900 transition-all duration-200 text-base md:text-lg;
}
.btn-outline {
@apply inline-flex items-center justify-center px-6 py-3 md:px-8 md: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-base md:text-lg;
}
.section-title {
@apply text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900;
}
.section-subtitle {
@apply text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 mt-4;
}
.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-6 border-l-4 border-primary-500;
}
.gradient-overlay {
@apply absolute inset-0 bg-gradient-to-r from-industrial-dark/90 to-industrial-dark/70;
}
.industrial-badge {
@apply inline-flex items-center px-3 py-1 md:px-4 md:py-2 bg-primary-600 text-white text-sm md:text-base font-semibold rounded;
}
.btn-outline {
@apply px-6 py-3 border-2 border-green-600 text-green-600 font-semibold rounded-md hover:bg-green-600 hover:text-white transition-colors inline-block;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
.text-gradient {
@apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-primary-700;
}
/* Responsive text utilities */
.text-responsive-sm {
@apply text-sm md:text-base lg:text-lg xl:text-xl;
}
.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;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
.card-industrial {
@apply bg-gradient-to-br from-white to-gray-50 rounded-lg shadow-lg p-6 border border-gray-200;
}
.section-title {
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
}
.section-subtitle {
@apply text-xl text-gray-600 mb-8;
}