chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Configure Tailwind CSS with custom settings and establish a global design system including light/dark mode variables and component styles.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 11:04:55 +07:00
parent 2cf79c2479
commit 44c61c8fb2
2 changed files with 28 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Frontend-Learner/assets/css/main.css
View file

@ -24,7 +24,10 @@
--error: #ef4444;
/* Typography */
--font-main: "Prompt", sans-serif;
/* Typography */
--font-main:
"Prompt", "Sarabun", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Helvetica Neue", Arial, sans-serif;
/* Layout */
--sidebar-width: 260px;
@ -72,10 +75,10 @@
--neutral-900: #0f172a;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12),
0 2px 6px -2px rgb(0 0 0 / 0.08);
--shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.15),
0 8px 16px -4px rgb(0 0 0 / 0.1);
--shadow-md:
0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.08);
--shadow-lg:
0 12px 24px -4px rgb(0 0 0 / 0.15), 0 8px 16px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.25);
}
@ -98,7 +101,8 @@ body {
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.5;
background-image: radial-gradient(
background-image:
radial-gradient(
circle at 20% 20%,
rgba(75, 130, 247, 0.05),
transparent 28%
@ -306,7 +310,8 @@ ul {
.btn-google:hover {
background-color: #f8fafc;
border-color: #cbd5e1;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
@ -324,13 +329,15 @@ ul {
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

13
Frontend-Learner/tailwind.config.ts
View file

@ -27,7 +27,18 @@ export default {
}
},
fontFamily: {
sans: ['Prompt', 'sans-serif'],
sans: [
'Prompt',
'Sarabun',
'Inter',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'sans-serif'
],
}
}
},