feat: add global CSS styling

This commit introduces a new file 'globals.css' to manage our application-wide styles. The imported Tailwind CSS utility classes have been applied and custom CSS variables for both light and dark themes have been defined. It also includes styling for some components like the body and borders for a more consistent look and feel throughout the application.
This commit is contained in:
Mathis H (Avnyr) 2024-06-06 14:06:30 +02:00
parent 4d6ae67389
commit 4c9a7c137c

65
src/app/globals.css Normal file
View File

@ -0,0 +1,65 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Kode Mono Variable', monospace;
}
@layer base {
:root {
--background: 0 0% 87.18%;
--foreground: 0 0% 12.94%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 26 83.33% 14.12%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 12.94%;
--card: 0 0% 100%;
--card-foreground: 0 0% 12.94%;
--border: 20 0% 52.31%;
--input: 20 21.42% 41.39%;
--primary: 47.9 100% 48.08%;
--primary-foreground: 26 83.3% 14.1%;
--secondary: 26 49.13% 43.5%;
--secondary-foreground: 0 0% 92.55%;
--accent: 60 0% 93.08%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--ring: 20 14.3% 4.1%;
--radius: 0.5rem;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 0 0% 92.55%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 0 0% 92.55%;
--border: 12 6.19% 17.63%;
--input: 12 6.5% 15.1%;
--primary: 60 96.56% 44.61%;
--primary-foreground: 26 90.03% 12.55%;
--secondary: 12 26.8% 16.18%;
--secondary-foreground: 0 0% 92.55%;
--accent: 12 5.7% 26.68%;
--accent-foreground: 0 0% 92.55%;
--destructive: 0 60.83% 54.18%;
--destructive-foreground: 0 0% 92.55%;
--ring: 47.95 95.82% 53.14%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}