diff --git a/src/tailwind.css b/src/tailwind.css index 72f6497..f9be84b 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -2,206 +2,23 @@ @tailwind components; @tailwind utilities; -@layer base { - a { - @apply text-twilight-800; - } - a:hover { - @apply underline underline-offset-4; - } - p { - @apply mb-4; - } - h1, - h2, - h3 { - @apply text-pink-800; - } - h1 { - @apply text-3xl mb-8 font-bold; - } - h2 { - @apply text-2xl font-semibold; - } - - h3 { - @apply text-xl font-medium; - } +/* Dark mode specific adjustments */ +.dark { + color-scheme: dark; + background-color: theme('colors.dark.background.primary'); + color: theme('colors.dark.text.primary'); } -@layer components { - /* BUTTONS */ - .btn { - @apply py-2 px-5 rounded block no-underline mb-2 hover:no-underline w-full text-center; - } - .btn.secondary { - @apply border border-pink-800 hover:bg-pink-700 text-pink-800 hover:text-white; - } - .btn.primary { - @apply border border-pink-800 bg-pink-800 hover:bg-pink-700 hover:border-pink-700 text-white; - } - - /*** HEADER LINKS ***/ - .nav-link, - .account-link { - @apply hover:no-underline text-xl sm:text-base md:text-lg lg:text-xl block rounded-md py-2 text-pink-800; - } - .nav-link.active, - .account-link.active { - @apply decoration-twilight-700 underline decoration-4 underline-offset-6 hover:underline; - } - - /*** MOBILE MENU ***/ - .mobile-menu { - @apply pt-20 block absolute top-full w-full h-screen bg-white left-0; - } - .mobile-menu li { - @apply text-center; - } - - /* COMPLETED LESSONS/HOMEWORK */ - .done { - @apply opacity-25; - } - - /* AUTH FORMS */ - .auth-form { - @apply mt-5 max-w-sm w-full mx-auto gap-2 bg-white; - } - .auth-form label { - @apply w-full block text-base uppercase; - } - .auth-form input { - @apply w-full mb-3 border-stone-300; - } - .auth-form button { - @apply mt-2; - } - - /* ADD/EDIT FORMS (ADMIN ONLY) */ - .add-form { - @apply mt-5 max-w-5xl mx-auto border grid p-10 gap-2 items-center grid-cols-[repeat(4,_1fr)]; - } - .add-form label { - @apply text-right; - } - #timestamps, - #hw-items, - #pw-items { - @apply mt-3 w-full border px-5 py-3; - } - .timestamp, - .hw-item, - .pw-item { - @apply grid grid-cols-4 gap-2 items-center py-3 border-t border-dashed border-gray-700; - grid-template-columns: repeat(4, 1fr); - } - .timestamp:first-of-type, - .hw-item:first-of-type, - .pw-item:first-of-type { - @apply border-0; - } - - /* FLASH MESSAGES */ - .flash { - @apply w-full py-2 px-4 mb-4 border text-center font-bold relative; - } - .flash-success { - @apply bg-green-100 text-green-700 border-green-700; - } - .flash-error { - @apply bg-red-100 text-red-700 border-red-700; - } - .flash-info { - @apply bg-blue-100 text-blue-700 border-blue-700; - } - .flash-close { - @apply absolute right-3 cursor-pointer text-3xl; - top: 0; - } - - /*** FAQ ACCORDION ***/ - dl { - @apply bg-white py-2 xs:py-4 px-2 xs:px-5 border border-stone-200; - } - dt { - @apply bg-twilight-50 cursor-pointer pt-4 pb-3 px-6 w-full outline-0 transition border border-twilight-300 flex items-center; - } - dt h3 { - @apply text-twilight-900 mr-auto; - } - dt:last-of-type { - @apply mb-0; - } - - dt.acc-opened, - dt:hover { - @apply bg-twilight-100; - } - dt:after { - @apply text-2xl font-bold font-awesome text-pink-800; - content: "\2b"; /* plus sign */ - } - - dt.acc-opened:after { - content: "\f068"; /* minus sign */ - } - - dd { - @apply px-6 bg-stone-50 max-h-0 overflow-hidden opacity-0 mb-2 border border-stone-200; - transition: 0.4s ease-in-out; - } - dd > *:last-child { - @apply mb-0; - } - - dd.acc-opened { - @apply opacity-100 py-6 mt-1; - max-height: 2500px; - } - - dd ul { - @apply list-disc ml-6; - } - - dd ol { - @apply mt-3 ml-8 list-decimal; - } - - /*** RESOURCE PAGE CARDS ***/ - - #card-container { - @apply flex flex-wrap gap-3 md:gap-5 justify-center; - } - .card { - @apply border border-twilight-200 bg-white w-full max-w-[400px] xs:w-[300px] md:w-[350px] flex flex-col drop-shadow-[0_0_7px_rgba(34,101,129,0.1)] hover:drop-shadow-[0_0_7px_rgba(34,101,129,0.25)] overflow-hidden; - } - .card:hover { - } - .card a { - @apply block h-full no-underline text-center; - } - .card h2 { - @apply xs:text-xl md:text-[1.75rem] px-8 pt-10; - } - .card span { - @apply text-twilight-900 px-8 pb-10 block; - } - .card img { - @apply shadow-[0_2px_10px_0_rgba(0,0,0,0.1)]; - } - - /********* temporary ************/ - #video { - max-width: 960px; - } - #player { - @apply w-full aspect-video; - } +/* Smooth transition for theme switching */ +body { + transition: background-color 0.3s ease, color 0.3s ease; } -@layer utilities { - .stripe-rows { - @apply [&>:nth-of-type(even)]:bg-stone-200; - } +/* Enhance accessibility and readability for dark mode */ +.dark a { + color: theme('colors.dark.interactive.primary'); } + +.dark a:hover { + color: theme('colors.dark.interactive.hover'); +} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 255708f..e4dc1bb 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,47 +1,82 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], - theme: { - screens: { - xs: "640px", - sm: "780px", - md: "926px", - lg: "1024px", - xl: "1280px", - "2xl": "1536px", - }, - extend: { - fontFamily: { - logo: ["Orienta", "serif"], - main: ["Poppins", "sans-serif"], - awesome: ['"Font Awesome 6 Free"'], - }, - colors: { - twilight: { - 50: "#f1f8fa", - 100: "#E8F3F7", - 200: "#bfe0ee", - 300: "#9ed0e5", - 400: "#7ec0dd", - 500: "#5eb1d4", - 600: "#3ea1cc", - 700: "#2e86ab", - 800: "#226581", - 900: "#153f51", - }, - }, - textUnderlineOffset: { - 6: "6px", - }, - textDecorationThickness: { - 3: "3px", - }, - maxWidth: { - "1/3": "33%", - 80: "20rem", - }, - }, - }, - plugins: [require("@tailwindcss/forms")], - safelist: ["flash-success", "flash-error", "flash-info"], -}; + content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], + darkMode: 'class', // Enable dark mode via class + theme: { + screens: { + xs: "640px", + sm: "780px", + md: "926px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, + extend: { + fontFamily: { + logo: ["Orienta", "serif"], + main: ["Poppins", "sans-serif"], + awesome: ['"Font Awesome 6 Free"'], + }, + colors: { + // Light mode palette (existing) + twilight: { + 50: "#f1f8fa", + 100: "#E8F3F7", + 200: "#bfe0ee", + 300: "#9ed0e5", + 400: "#7ec0dd", + 500: "#5eb1d4", + 600: "#3ea1cc", + 700: "#2e86ab", + 800: "#226581", + 900: "#153f51", + }, + // Dark mode semantic colors + dark: { + // Background colors + background: { + primary: '#121212', // Deep dark for main background + secondary: '#1E1E1E', // Slightly lighter for secondary areas + tertiary: '#2C2C2C', // Even lighter for tertiary sections + }, + // Text colors + text: { + primary: '#E0E0E0', // Light gray for primary text + secondary: '#A0A0A0', // Muted gray for secondary text + accent: '#FFFFFF', // Pure white for high emphasis + }, + // Interactive colors + interactive: { + primary: '#3EA1CC', // Preserved primary color from light theme + hover: '#2E86AB', // Slightly darker for hover states + active: '#226581', // Even darker for active states + }, + // Accent and utility colors + accent: { + success: '#4CAF50', // Green for success states + error: '#F44336', // Red for error states + warning: '#FFC107', // Amber for warnings + info: '#2196F3', // Blue for informational states + }, + // Border and divider colors + border: { + light: '#404040', // Dark border for light separation + dark: '#303030', // Darker border for more emphasis + }, + }, + }, + textUnderlineOffset: { + 6: "6px", + }, + textDecorationThickness: { + 3: "3px", + }, + maxWidth: { + "1/3": "33%", + 80: "20rem", + }, + }, + }, + plugins: [require("@tailwindcss/forms")], + safelist: ["flash-success", "flash-error", "flash-info", "dark"], +}; \ No newline at end of file