fix: Convert CSS to Tailwind v4 syntax
- Uses @theme for custom colors (Tailwind v4) - Plain CSS for components (no @layer/@apply) - CSS variables from @theme - All old classes preserved (.btn-primary, .card, etc.) - Fully compatible with Tailwind v4
This commit is contained in:
Kunthawat
@@ -26,9 +26,6 @@ const { title, description, image } = Astro.props;
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link rel="stylesheet" href="/_astro/globals.css" />
|
||||
|
||||
<!-- SEO -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description || 'Deal Plus Tech - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
|
||||
@@ -44,36 +41,5 @@ const { title, description, image } = Astro.props;
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--color-primary-600: #22c55e;
|
||||
--color-primary-700: #16a34a;
|
||||
--color-secondary-50: #f8fafc;
|
||||
--color-secondary-100: #f1f5f9;
|
||||
--color-secondary-200: #e2e8f0;
|
||||
--color-secondary-300: #cbd5e1;
|
||||
--color-secondary-500: #64748b;
|
||||
--color-secondary-600: #475569;
|
||||
--color-secondary-700: #334155;
|
||||
--color-secondary-800: #1e293b;
|
||||
--color-secondary-900: #0f172a;
|
||||
--color-accent-500: #eab308;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Kanit', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@import "../styles/globals.css";
|
||||
</style>
|
||||
|
||||
@@ -1,66 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Base styles */
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-secondary-900 antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-bold tracking-tight;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component classes - matching old site */
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@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-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-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-title {
|
||||
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@apply text-lg md:text-xl 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 bg-primary-600 text-white text-sm font-semibold rounded;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom theme colors - Industrial theme */
|
||||
:root {
|
||||
@theme {
|
||||
--color-primary-500: #22c55e;
|
||||
--color-primary-600: #16a34a;
|
||||
--color-primary-700: #15803d;
|
||||
@@ -78,11 +18,24 @@
|
||||
--color-accent-500: #eab308;
|
||||
}
|
||||
|
||||
/* Desktop-first typography */
|
||||
/* Base styles */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Kanit', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: var(--color-secondary-900);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
/* Desktop-first typography */
|
||||
@media (min-width: 1280px) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
@@ -94,3 +47,141 @@ html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button components */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--color-primary-600);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-700);
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0.125rem);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--color-secondary-800);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-secondary-900);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 2px solid var(--color-primary-600);
|
||||
color: var(--color-primary-600);
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--color-primary-600);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Section typography */
|
||||
.section-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-secondary-900);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-secondary-600);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section-subtitle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card components */
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
|
||||
.card-industrial {
|
||||
background-color: var(--color-secondary-800);
|
||||
color: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
border-left: 4px solid var(--color-primary-500);
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(to right, var(--color-primary-500), var(--color-primary-700));
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to right, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7));
|
||||
}
|
||||
|
||||
.industrial-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background-color: var(--color-primary-600);
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user