initial stylesheet

This commit is contained in:
leander committed 2025-06-20 03:26:53 +02:00
1 parent ae520d8418
commit 9e20dcf0b7
1 file changed
+77 -13
+77 -13
View File
@@ -1,26 +1,90 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
/* Norway brand colors */
--norway-red: #ef2b2d;
--norway-blue: #002768;
/* Light theme colors */
--background: #e9e9e9;
--background-secondary: #dedddd;
--foreground: #1a1a1a;
--foreground-secondary: #6b7280;
/* Dark theme colors */
--background-dark: #1e1e2e;
--background-secondary-dark: #181825;
--foreground-dark: #ffffff;
--foreground-secondary-dark: #a1a1aa;
/* Accent colors */
--accent-primary: var(--norway-red);
--accent-primary-light: #ff8888;
--accent-secondary: var(--norway-blue);
--accent-secondary-light: #77a9ff;
/* Norway gradient */
--gradient-norway: linear-gradient(64deg, var(--norway-red) 20%, #ffffff 50%, var(--norway-blue) 75%);
/* Border colors */
--border-light: #e5e7eb;
--border-dark: #374151;
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: var(--background-dark);
--background-secondary: var(--background-secondary-dark);
--foreground: var(--foreground-dark);
--foreground-secondary: var(--foreground-secondary-dark);
}
}
/* Tailwind theme configuration */
@theme inline {
--color-background: var(--background);
--color-background-secondary: var(--background-secondary);
--color-foreground: var(--foreground);
--color-foreground-secondary: var(--foreground-secondary);
--color-accent-primary: var(--accent-primary);
--color-accent-primary-light: var(--accent-primary-light);
--color-accent-secondary: var(--accent-secondary);
--color-accent-secondary-light: var(--accent-secondary-light);
--color-border: var(--border-light);
--color-norway-gradient: var(--gradient-norway);
}
/* Dark mode border color */
@media (prefers-color-scheme: dark) {
@theme inline {
--color-border: var(--border-dark);
}
}
::selection {
@apply bg-accent-primary;
@apply text-white;
}
body {
background: var(--background);
color: var(--foreground);
@apply bg-background;
@apply text-foreground;
font-family: Arial, Helvetica, sans-serif;
}
a {
@apply text-accent-primary;
@apply duration-200;
@apply ease-in;
}
a:hover {
@apply text-accent-primary-light;
}
.border-norway {
@apply border-b-2;
@apply border-transparent;
border-image: var(--gradient-norway) 1;
}