bretton.dev
Coves frontend - a photon fork
1@import 'tailwindcss';
2
3@plugin '@tailwindcss/container-queries';
4
5@custom-variant dark (&:is(.dark *));
6
7@theme {
8 --font-sans: sans-serif;
9 --font-system: system-ui;
10 --font-inter: Inter, system-ui, sans-serif;
11 --font-display: Inter, system-ui, sans-serif;
12 --font-mono: monospace;
13
14 --animate-pop-in: pop-in 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
15
16 --ease-cubic: cubic-bezier(0.075, 0.82, 0.165, 1);
17 --spacing-22: 88px;
18
19 --color-slate-25: rgb(252 253 254);
20 --color-zinc-925: 28 28 32;
21
22 /* dark theme */
23 --color-primary-100: rgb(248 248 251);
24 --color-primary-200: rgb(175 175 185);
25
26 /* light theme */
27 --color-primary-800: rgb(50 58 77);
28 --color-primary-900: rgb(15 23 42);
29
30 --color-white: var(--color-other-white, rgb(255 255 255));
31 --color-black: var(--color-other-black, rgb(0 0 0));
32
33 @keyframes pop-in {
34 0% {
35 transform: translateY(12px);
36 opacity: 0;
37 }
38 100% {
39 transform: translateY(0px);
40 opacity: 1;
41 }
42 }
43}
44
45@layer utilities {
46 .font-display {
47 letter-spacing: var(--tracking-tight);
48 }
49}
50
51@custom-variant hover (&:hover);
52
53@font-face {
54 font-family: 'Inter';
55 src: url('/font/Inter.woff2') format('woff2');
56 font-display: swap;
57}
58
59body {
60 @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
61}
62
63.dark {
64 color-scheme: dark;
65}
66
67.wait * {
68 cursor: wait !important;
69}
70
71#nprogress {
72 z-index: 999 !important;
73 position: fixed !important;
74}
75
76#nprogress .bar {
77 @apply bg-primary-900! dark:bg-primary-100!;
78 z-index: 999 !important;
79 height: 1px !important;
80}
81
82#nprogress .peg {
83 display: none !important;
84 z-index: 999 !important;
85}
86
87pre:not(.code-baseline) {
88 @apply bg-slate-100 p-2 rounded-xl my-2 max-w-full whitespace-pre-wrap
89 border-slate-200 border dark:bg-zinc-950 dark:border-zinc-900 text-xs;
90}
91
92:not(pre) > code:not(.code-baseline) {
93 @apply bg-slate-100 dark:bg-zinc-950;
94 padding-left: 0.25rem;
95 padding-right: 0.25rem;
96 padding-top: 0.125rem;
97 padding-bottom: 0.125rem;
98 border-radius: 6px;
99 font-size: 12px;
100}
101
102select:focus-visible,
103a:focus-visible,
104button:focus-visible {
105 outline: none;
106 @apply ring-2 ring-offset-1 ring-primary-900 dark:ring-primary-100;
107}