127 lines
3.8 kB
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4
@layer base {
5
@font-face {
6
font-family: 'iA Writer Quattro S';
7
src: url('/static/fonts/iAWriterQuattroS-Regular.ttf') format('truetype');
8
font-weight: normal;
9
font-style: normal;
10
font-display: swap;
11
font-feature-settings: "calt" 1, "kern" 1;
12
}
13
@font-face {
14
font-family: 'iA Writer Quattro S';
15
src: url('/static/fonts/iAWriterQuattroS-Bold.ttf') format('truetype');
16
font-weight: bold;
17
font-style: normal;
18
font-display: swap;
19
}
20
@font-face {
21
font-family: 'iA Writer Quattro S';
22
src: url('/static/fonts/iAWriterQuattroS-Italic.ttf') format('truetype');
23
font-weight: normal;
24
font-style: italic;
25
font-display: swap;
26
}
27
@font-face {
28
font-family: 'iA Writer Quattro S';
29
src: url('/static/fonts/iAWriterQuattroS-BoldItalic.ttf') format('truetype');
30
font-weight: bold;
31
font-style: italic;
32
font-display: swap;
33
}
34
35
@font-face {
36
font-family: 'iA Writer Mono S';
37
src: url('/static/fonts/iAWriterMonoS-Regular.ttf') format('truetype');
38
font-weight: normal;
39
font-style: normal;
40
font-display: swap;
41
}
42
@font-face {
43
font-family: 'iA Writer Mono S';
44
src: url('/static/fonts/iAWriterMonoS-Bold.ttf') format('truetype');
45
font-weight: bold;
46
font-style: normal;
47
font-display: swap;
48
}
49
@font-face {
50
font-family: 'iA Writer Mono S';
51
src: url('/static/fonts/iAWriterMonoS-Italic.ttf') format('truetype');
52
font-weight: normal;
53
font-style: italic;
54
font-display: swap;
55
}
56
@font-face {
57
font-family: 'iA Writer Mono S';
58
src: url('/static/fonts/iAWriterMonoS-BoldItalic.ttf') format('truetype');
59
font-weight: bold;
60
font-style: italic;
61
font-display: swap;
62
}
63
64
@font-face {
65
font-family: "Inter";
66
font-style: normal;
67
font-weight: 400;
68
font-display: swap;
69
}
70
h1 {
71
@apply text-2xl;
72
@apply font-sans;
73
@apply text-black;
74
@apply py-4;
75
}
76
77
::selection {
78
@apply bg-yellow-400;
79
@apply text-black;
80
@apply bg-opacity-30;
81
}
82
83
html {
84
letter-spacing: -0.01em;
85
word-spacing: -0.07em;
86
}
87
88
a {
89
@apply underline text-black hover:text-gray-800;
90
}
91
92
@layer base {
93
label {
94
@apply block text-sm text-black;
95
}
96
input {
97
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
98
}
99
textarea {
100
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
101
}
102
}
103
104
@layer components {
105
.btn {
106
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
107
justify-center bg-transparent px-2 pb-[0.2rem] text-base
108
text-gray-900 before:absolute before:inset-0 before:-z-10
109
before:block before:rounded-sm before:border before:border-blue-200
110
before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
111
before:content-[''] hover:before:border-blue-300
112
hover:before:bg-blue-50
113
hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
114
focus:outline-none focus-visible:before:outline
115
focus-visible:before:outline-4 focus-visible:before:outline-blue-500
116
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
117
}
118
}
119
@layer utilities {
120
.error {
121
@apply py-1 border-black text-black;
122
}
123
.success {
124
@apply py-1 border-black text-black;
125
}
126
}
127
}
128