feat: Set up new Tailwind CSS configuration, global styling, and initial application pages.

2026-02-06 00:20:55 +01:00
parent 696f9d361d
commit 8ac090aff3
11 changed files with 286 additions and 114 deletions
--- a/packages/gatekeeper/tailwind.config.cjs
+++ b/packages/gatekeeper/tailwind.config.cjs
@@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            borderRadius: {
+                xl: "1rem",
+                "2xl": "1.5rem",
+                "3xl": "2rem",
+                full: "9999px",
+            },
+            colors: {
+                slate: {
+                    850: "#1e293b",
+                    900: "#0f172a",
+                    950: "#020617",
+                },
+            },
+            fontFamily: {
+                sans: ["var(--font-inter)", "Inter", "system-ui", "sans-serif"],
+                serif: ["var(--font-newsreader)", "Georgia", "serif"],
+                mono: ["JetBrains Mono", "monospace"],
+            },
+            animation: {
+                "fade-in": "fadeIn 0.5s ease-in-out",
+                "slide-up": "slideUp 0.6s ease-out",
+                "slide-down": "slideDown 0.6s ease-out",
+                shake: "shake 0.2s ease-in-out 0s 2",
+            },
+            keyframes: {
+                fadeIn: {
+                    "0%": { opacity: "0" },
+                    "100%": { opacity: "1" },
+                },
+                slideUp: {
+                    "0%": { transform: "translateY(20px)", opacity: "0" },
+                    "100%": { transform: "translateY(0)", opacity: "1" },
+                },
+                slideDown: {
+                    "0%": { transform: "translateY(-20px)", opacity: "0" },
+                    "100%": { transform: "translateY(0)", opacity: "1" },
+                },
+                shake: {
+                    "0%, 100%": { transform: "translateX(0)" },
+                    "25%": { transform: "translateX(-4px)" },
+                    "75%": { transform: "translateX(4px)" },
+                },
+            },
+            transitionTimingFunction: {
+                industrial: "cubic-bezier(0.23, 1, 0.32, 1)",
+            },
+        },
+    },
+    plugins: [require("@tailwindcss/typography")],
+};