2023-03-05 16:07:40 +01:00
|
|
|
@import "tailwindcss/base";
|
|
|
|
@import "tailwindcss/components";
|
|
|
|
@import "tailwindcss/utilities";
|
|
|
|
|
2023-04-07 10:31:54 +02:00
|
|
|
@import "./reset.css";
|
2023-03-13 02:03:48 +01:00
|
|
|
@import "./lolight.css";
|
2023-03-14 22:57:40 +01:00
|
|
|
@import "./lightbox.css";
|
|
|
|
|
2023-03-15 10:21:08 +01:00
|
|
|
@layer base {
|
2023-05-20 19:26:58 +02:00
|
|
|
:root { font-family: 'Inter', sans-serif; }
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
|
|
:root { font-family: 'Inter var', sans-serif; }
|
2023-03-29 18:47:45 +02:00
|
|
|
}
|
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
:root {
|
|
|
|
--color-primary: 214 93 14; /* orange */
|
|
|
|
--color-primary1: 175 58 3; /* orange faded */
|
2023-03-15 16:27:15 +01:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-secondary: 104 157 106; /* aqua */
|
|
|
|
--color-secondary1: 66 123 88; /* aqua faded */
|
2023-03-30 14:34:26 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-background: 253 244 193; /* light0 */
|
|
|
|
--color-background1: 235 219 178; /* light1 */
|
2023-03-31 22:56:34 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-foreground: 60 56 54; /* dark1 */
|
|
|
|
--color-foreground1: 80 73 69; /* dark2 */
|
|
|
|
|
|
|
|
--color-heading: var(--color-secondary);
|
|
|
|
--color-code: var(--color-background1);
|
2023-03-31 22:56:34 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
@apply selection:bg-theme-primary/50;
|
2023-03-31 22:56:34 +02:00
|
|
|
}
|
2023-03-15 10:21:08 +01:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
:root[data-mode=dark] {
|
|
|
|
--color-primary: 214 93 14; /* orange */
|
|
|
|
--color-primary1: 254 128 25; /* orange bright */
|
2023-03-16 07:30:58 +01:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-secondary: 104 157 106; /* aqua */
|
|
|
|
--color-secondary1: 142 192 124; /* aqua faded */
|
2023-04-01 16:05:12 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-background: 40 40 40; /* dark0 */
|
|
|
|
--color-background1: 60 56 54; /* dark1 */
|
2023-03-30 23:09:39 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-foreground: 235 219 178; /* light1 */
|
|
|
|
--color-foreground1: 213 196 161; /* light2 */
|
2023-03-31 17:01:27 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
--color-heading: var(--color-secondary);
|
|
|
|
--color-code: var(--color-base);
|
|
|
|
}
|
2023-03-17 21:21:01 +01:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
:root[data-mode=dark] .prose {
|
|
|
|
@apply prose-invert;
|
|
|
|
}
|
2023-04-01 12:09:58 +02:00
|
|
|
}
|
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
@layer components {
|
|
|
|
/* Set width and color for identity icons */
|
|
|
|
a[rel] svg {
|
|
|
|
width: 1em;
|
|
|
|
fill: rgb(var(--color-primary));
|
|
|
|
}
|
|
|
|
svg {
|
|
|
|
width: 1.5em;
|
|
|
|
}
|
2023-04-01 12:09:58 +02:00
|
|
|
|
2023-05-20 19:26:58 +02:00
|
|
|
.alert {
|
|
|
|
@apply p-3 mt-3 rounded;
|
|
|
|
}
|
|
|
|
|
|
|
|
.alert.alert-danger {
|
|
|
|
@apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
|
|
|
|
}
|
|
|
|
|
|
|
|
.prose a {
|
|
|
|
@apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
|
|
|
|
}
|
2023-03-15 19:16:01 +01:00
|
|
|
}
|